Erisilebilirlik — WCAG Standartlari ve a11y Optimizasyonu

Bu Hizmet Nedir?

Web erisilebilirligi (a11y), sitenizin engelli bireyler dahil tum kullanicilar tarafindan etkin bir sekilde kullanilabilmesini saglayan uygulama ve standartlar butunudur. Bu hizmet kapsaminda WCAG 2.1 AA seviyesine tam uyum sagliyoruz: semantik HTML yapisi, ARIA rolleri ve etiketleri, klavye navigasyonu, renk kontrasti, screen reader uyumu ve hareket hassasiyeti yonetimi.

Dunya nufusunun yaklasik %16'si (1.3 milyar kisi) bir engelle yasamaktadir. Bu kitle, gecici engelleri (kirilan kol), durumsal engelleri (gunes altinda ekran okuma) ve yaslilik kaynakli zorlklari da kapsadiginda cok daha buyur. Erisilebilir olmayan bir site, bu devasa kullanici kitlesini tamamen dislar.

Hukuki acidan, ABD'de ADA (Americans with Disabilities Act) kapsaminda web erisilebilirlik davalari yilda 4.000'i asmistir. Avrupa'da European Accessibility Act 2025'te yururluge girecek ve dijital hizmetlerde erisilebilirlik zorunlu olacaktir. Turkiye'de de 5378 sayili Engelliler Hakkinda Kanun dijital erisilebilirlik gereksinimlerini kapsamaktadir.

Neden Erisilebilirlik Kritik?

Erisilebilirlik sadece etik bir sorumluluk degil, ayni zamanda is sonuclarina dogrudan etki eden bir faktordr:

• Engelli bireylerin kuresel harcama gucu yillik 8 trilyon dolardan fazladir
• Erisilebilir siteler arama motorlari tarafindan daha iyi anlasilir, yani SEO performansi artar
• Semantik HTML ve ARIA etiketleri, Google'in icerik anlamasini kolaylastirir
• ABD'de erisilebilirlik davalari yillik %12 artmaktadir
• Erisilebilir tasarim, tum kullanicilarin deneyimini iyilestirir (curb-cut etkisi)

Detayli Calisma Kapsami

Semantik HTML Yapilandirmasi

Dogru HTML elementlerinin dogru yerlerde kullanilmasi, erisilebilirligin temelidir. <header>, <nav>, <main>, <aside>, <footer> gibi landmark elementleri, screen reader kullanicilarinin sayfada hizli gezinmesini saglar. Baslik hiyerarsisi (h1-h6) dogru siralamayla kullanilir. Listeler, tablolar ve formlar semantik olarak yapilandirilir.

ARIA Rolleri ve Etiketleri

ARIA (Accessible Rich Internet Applications) rolleri, HTML elementlerine ek anlam katarak yardimci teknolojilerin onlari dogru yorumlamasini saglar. Ornegin: role="navigation" bir gezinme bolgesini tanimlar, aria-label gorsel olmayan bir aciklama ekler, aria-expanded bir akordenonun acik/kapali durumunu bildirir. Ancak ARIA'nin asiri veya yanlis kullanilmasi, erisilebilirligi iyilestirmek yerine bozar. "ARIA'nin ilk kurali: ARIA kullanma" prensibiyle — yani yerel HTML elemanlari yeterliyse ARIA eklenmemelidir.

Klavye Navigasyonu ve Focus Yonetimi

Tum interaktif elementler (butonlar, linkler, formlar, modaller) klavyeyle erisilebilir olmalidir. Tab sirasi mantiksal bir akisi takip etmeli, focus gorunur olmali (focus ring), modal acildiginda focus modal icerisinde tutulmali (focus trap) ve kapandiginda tetikleyici elemana geri donmelidir. Skip link ile kullanicilar tekrarlayan navigasyonu atlayarak dogrudan ana icerge gidebilmelidir.

Renk Kontrasti Analizi

WCAG 2.1 AA, normal metin icin minimum 4.5:1, buyuk metin icin minimum 3:1 kontrast orani gerektirir. Tum metin-arka plan kombinasyonlarini analiz ediyor, yetersiz kontrast olanlarini tespit ediyor ve AA standardini karsilayan alternatif renkleri oneriyoruz. Ayrica renk korlugu simulasyonu ile icerigini sadece renkle ileten elementleri belirliyoruz.

Screen Reader Uyumluluk Testleri

NVDA (Windows), VoiceOver (macOS/iOS) ve TalkBack (Android) gibi populer screen reader'larla siteyi test ediyoruz. Her sayfanin iceriginin dogru sirayla, anlamli bir sekilde okunup okunmadigini, gorsellerin alt metinlerinin yeterli olup olmadigini ve interaktif elemanlarin dogru duyurulup duyurulmadigini dogruluyoruz.

Hareket Hassasiyeti (prefers-reduced-motion)

Vestibular bozukluklari olan kullanicilar icin animasyonlar sorun yaratabilir. prefers-reduced-motion medya sorgusunu kullanarak, bu tercihi belirten kullanicilar icin animasyonlari azaltiyor veya devre disi birakiyoruz. Parallax efektleri, otomatik kayan carousel'lar ve agresif gecis animasyonlari kontrol altina alinir.

Sik Yapilan Hatalar

1. Sadece otomatik test araclarina guvenme: Lighthouse, axe ve WAVE gibi araclar WCAG ihlallerinin sadece %30-40'ini tespit edebilir. Manuel test ve screen reader kontrolu zorunludur.
2. Gorsellerde alt metin eksikligi: Her gorsel bir alt metin (alt attribute) icermelidir. Dekoratif gorseller alt="" ile isaretlenmelidir. "image.jpg" gibi dosya adi alt metin degildir.
3. Focus ring'i kaldirmak: outline: none CSS kurali, klavye kullanicilarinin nerede olduklarini gormelerini engeller. Goruntusu begenilmiyorsa, markaniza uygun bir custom focus stili tanimlanmalidir.
4. Rengi tek bilgi tasiyici olarak kullanmak: "Kirmizi alanlar hatalidi" gibi sadece renge dayali bilgi, renk korleri tarafindan anlasilamaz. Ikon, metin veya desen gibi ek gostergeler kullanilmalidir.
5. ARIA'yi asiri veya yanlis kullanmak: Her elemente role ve aria-label eklemek, screen reader deneyimini daha kotu hale getirir. "No ARIA is better than bad ARIA."

Beklenen Sonuclar ve Metrikler

• WCAG 2.1 AA seviyesine %100 uyum
• Engelli kullanicilara acilarak potansiyel kitlede %15 genisleme
• Erisilebilirlik dava riski sifira indirilir
• SEO performansinda olculebilir iyilesme (semantik HTML + ARIA)
• Tum kullanicilar icin daha iyi deneyim (curb-cut etkisi)

Neden Profesyonel Destek Gerekli?

Erisilebilirlik, WCAG spesifikasyonunun derinlemesine anlasilmasini gerektiren teknik bir alandir. Otomatik araclar soranlarin sadece ucunu gosterir; gercek uyum, manuel test, screen reader deneyimi ve ARIA uzmanligiyla saglanir. Yanlis ARIA kullanimi erisilebilirligi iyilestirmek yerine bozar. Bir profesyonel ekip, hem teknik implementasyonu yapar hem de ekibinizi egiterek surekli uyum saglanmasini garanti eder.