Web erisilebilirligi, engelli kullanicilarin dahil olmasinin otesinde, klavye kullananlar, düşük goruslu ekran okuyucu kullanicilar, motor kisitliligi olanlar ve geçici durumda olan herkes icin daha iyi deneyim demektir. WCAG 2.2 Pours ilkesi — Perceivable, Operable, Understandable, Robust — pratik uygulama cercevesi sunar.
Semantik HTML temeli
En düşük maliyetli erisilebilirlik iyilestirmesi doğru HTML elementlerini kullanmaktir. button tiklanabilir aksiyon icin, a href navigasyon icin, nav, main, header landmark'lar icin. Div'e onClick eklemek klavye ve ekran okuyucu destegini manuel yazmayi gerektirir.
<!-- Kotu -->
<div class="btn" onclick="submit()">Gonder</div>
<!-- Iyi -->
<button type="submit">Gonder</button>Baslik hiyerarsisi (h1-h6) atlanmadan kullanılmalı; sayfa basligi tek h1 olmali. Liste içeriği ul veya ol ile isaretlenmeli. Tablo verisi icin table, layout icin CSS grid/flex tercih edilmeli.
Klavye navigasyonu ve focus
Tüm etkilesimli elemanlar Tab ile erisilebilir olmali. Focus sırası görsel akisa uygun olmali; tabindex yalnizca gerekli yerlerde kullanılmalı (0 veya -1). Pozitif tabindex focus sirasini bozar.
Focus görsel olarak belirgin olmali: minimum 2px kontrastli outline. :focus-visible ile fare tiklamasinda outline gizlenip klavyede gosterilebilir. Modal acildiginda focus trap uygulanmali; kapatildiginda önceki elemana donulmeli.
.interactive:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}ARIA: ne zaman ve nasil
ARIA (Accessible Rich Internet Applications) semantik HTML yetersiz kaldiginda devreye girer. Birinci kural: native HTML varsa ARIA kullanma. role, aria-label, aria-labelledby, aria-describedby en sik attribute'lardir.
- aria-expanded: Accordion ve menu açık/kapali durumu.
- aria-live: Dinamik içerik guncellemeleri (polite veya assertive).
- aria-hidden: Dekoratif ikonlari ekran okuyucudan gizler.
- role="dialog": Modal pencere; aria-modal="true" ile birlikte.
Canli bolge (live region) toast bildirimleri icin kullanılır. Cok sik assertive duyuru kullanıcıyı yorar; yalnizca kritik hatalarda tercih edilir.
Renk kontrasti ve görsel tasarım
WCAG AA normal metin icin 4.5:1, büyük metin icin 3:1 kontrast orani gerektirir. AAA seviyesi 7:1 ve 4.5:1'dir. Araclar: Contrast Checker, axe DevTools, Figma plugin'leri. Gradient uzerinde metin özellikle risklidir.
Bilgi yalnizca renkle iletilmemeli: form hatalari kirmizi border + metin + ikon. Grafiklerde pattern veya etiket farklilastirmasi kullanılır. Dark mode'da kontrast yeniden dogrulanmalidir.
Form erisilebilirligi
Her input icin görünür label veya aria-label zorunludur. Placeholder label yerine gecmez. Hata mesajlari aria-invalid ve aria-describedby ile input'a baglanir. Zorunlu alanlar yildiz yerine '(zorunlu)' metni veya aria-required kullanır.
<label for="email">E-posta (zorunlu)</label>
<input id="email" type="email" aria-required="true"
aria-invalid="true" aria-describedby="email-error" />
<span id="email-error" role="alert">Gecerli bir e-posta girin.</span>Multimedya ve hareket
Video icin altyazi ve transkript saglanmali. Otomatik oynatma sesli içerik engellenmeli veya kullanıcı kontrolu sunulmali. prefers-reduced-motion ile animasyonlar azaltilir veya kapatilir. Vestibuler bozuklugu olan kullanicilar icin parallax ve hızlı gecisler zararli olabilir.
Ekran okuyucu testi
NVDA (Windows), VoiceOver (macOS/iOS) ve TalkBack (Android) ile manuel test yapilmali. Otomatik araclar sorunlarin yalnizca %30-50'sini yakalar. Ekran okuyucu kullanicilariyla kullanilabilirlik testi en degerli geri bildirimi sağlar.
Skip link ('Icerige atla') tekrarlayan navigasyonu atlar. Landmark'lar sayfa bolgelerine hızlı geçiş sağlar. Görsel olarak gizli ama ekran okuyucuya açık metin (.sr-only class) bağlam ekler.
Test otomasyonu
axe-core, eslint-plugin-jsx-a11y ve pa11y CI pipeline'a entegre edilir. Her PR'da erisilebilirlik ihlali build'i başarısız yapabilir (severity esigine gore). Storybook a11y addon bilesen bazinda erken geri bildirim verir.
- Otomatik tarama (axe) her commit'te.
- Klavye-only test checklist sprint sonunda.
- Ekran okuyucu smoke test major release oncesi.
- Dis denetim veya sertifikasyon yillik (kamu sektoru icin sik zorunlu).
Yasal ve is etkisi
ABE (Avrupa Erisilebilirlik Yasasi), ADA (ABD) ve Turkiye'deki mevzuat kamu ve belirli sektorlerde uyumluluk gerektirir. Uyumsuzluk dava ve itibar riski tasir. Eriilebilir ürün daha geniş kitleye ulasir; SEO'ya da olumlu etki eder (semantik yapı).
Karmaşık widget'lar
Combobox, date picker ve tree view WAI-ARIA Authoring Practices Guide pattern'lerine uymali. Klavye: ok tuslari, Enter, Escape, Home/End davranislari spesifikasyonla eslesmeli. Kutuphane seçiminde (Radix, Headless UI) erisilebilirlik olgunlugu degerlendirilmeli.
Custom dropdown native select yerine yalnizca stil gereksinimi varsa kullanılmalı; aksi halde native element tercih edilir. Her custom widget icin test plani ve dokumantasyon zorunludur.
Ekip süreci
Tasarım asamasinda erisilebilirlik kontrol listesi kullanılır. Design review'da kontrast ve focus state onaylanir. Geliştirici egitimi ve champion modeli (her squad'da a11y sorumlusu) bilinci yayar.
Erisilebilirlik tek seferlik audit degil sürekli pratiktir. Definition of Done'a a11y maddesi eklenmeli. Kullanıcı sikayetleri ve destek ticket'lari duzenli analiz edilir. Temel ilkeler — semantik HTML, klavye erisimi, kontrast, anlamli metin — her projede uygulanabilir ve ölçülebilir hedefler sunar.
WCAG başarı kriterleri pratik özet
Seviye A minimum gereksinimlerdir: alternatif metin, klavye erisimi, zaman sınırı olmayan formlar. AA çoğu kurumsal uyumluluk hedefidir: kontrast, yeniden boyutlandirma, tutarlı navigasyon. AAA en katidir ve her içerik turu icin mümkün olmayabilir; kritik akislarda hedeflenir.
- 1.1.1: Gorsellerde anlamli alt metin.
- 2.1.1: Klavye ile tüm islevlere erişim.
- 2.4.7: Görünür focus gostergesi.
- 3.3.2: Form alanlarinda etiket veya talimat.
- 4.1.2: Arayüz bilesenlerinin ad, rol, deger bilgisi.
Dokumantasyon ve bileşen kutuphanesi
Her bilesen Storybook'ta erisilebilirlik sekmesi ile dokumante edilir: beklenen klavye davranisi, ARIA attribute'lari, bilinen sinirlamalar. Copy-paste edilebilir örnek kod yeni gelistiricilerin hata yapmasini azaltir. Radix ve React Aria gibi kutuphaneler pattern implementasyonu sağlar ancak ozellestirme sirasinda bozulabilir; test sarttir.
Uluslararasi ve dil destegi
lang attribute html veya bölüm bazinda tanimlanir. Ekran okuyucu doğru dilde telaffuz eder. RTL (sagdan sola) dillerde layout mirror edilir; ikon yonleri ve animasyonlar gozden gecirilir. Tarih ve sayı formatlari locale API ile uretilir.
Çeviri metinleri genislediginde layout kirilmamali; flex ve grid min-width: 0 ile tasma onlenir. Buton metni %200 uzadiginda tasarım token'lari ve responsive kurallar test edilir.
Performans ve erisilebilirlik dengesi
Asiri ARIA ve gereksiz live region performansi dusurur ve ekran okuyucuyu yorar. Lazy load gorsellerde loading="lazy" ve above-the-fold icerikte eager kullanımı LCP ve erisilebilirligi dengelemek icin önemlidir. Skeleton ekran aria-busy ile isaretlenmeli; yükleme bitince kaldırilmalidir.
Erisilebilirlik checklist'i her major feature icin PR template'ine eklenir: semantik kontrol, klavye testi, kontrast, ekran okuyucu smoke test. Bu disiplin erken asamada ucuz, production sonrasi duzeltmeden cok daha az maliyetlidir. VPAT veya ACR raporu kurumsal müşteriler icin hazir bulundurulabilir.
Erisilebilir ürünler daha geniş kullanıcı kitlesine ulasir, arama motoru sinyallerini iyilestirir ve yasal riskleri azaltir. Her sprintte en az bir a11y iyilestirmesi hedefi sürdürülebilir ilerleme sağlar. Kullanıcı geri bildirim kanallarinda erisilebilirlik etiketi ile filtreleme yapilarak tekrarlayan sorunlar kok neden analizi ile cozulur. Erisilebilirlik rozet programlari ve ic sertifikasyon gelistiricileri motive eder ve bilinci kurumsal hafizada tutar. Dis kaynakli audit raporlari bulgu basina öncelik ve sorumlu atamasi ile takip edilir; kapatilmadan release yapilmaz. Bu süreç erisilebilirligi teknik borc degil ürün kalitesi olarak konumlandirir.
