Web Erisilebilirlik ve WCAG: Herkes Icin Tasarim

Web Erisilebilirlik Nedir?

Web erisilebilirlik, web sitelerinin ve uygulamalarin engelli bireyler dahil herkes tarafindan algilanabilir, kullanilabilir ve anlasilabilir olmasini saglayan tasarim ve gelistirme pratigidir. Gorme, isitme, motor ve bilissel engellere sahip kullanicilar, yardimci teknolojiler (ekran okuyucular, klavye navigasyonu, ses komutlari) araciligiyla web ile etkilesime girer. Erisilebilir bir web sitesi, bu kullanicilarin da esit sekilde bilgiye ulasmasini ve hizmetlerden yararlanmasini saglar.

Dunya nufusunun yaklasik %15'i bir tur engele sahiptir. Erisilebilirlik sadece etik bir sorumluluk degil, ayni zamanda yasal bir zorunluluk ve is firsatidir. Turkiye'de 5378 sayili Engelliler Hakkinda Kanun ve AB Erisilebilirlik Direktifi, dijital hizmetlerin erisilebilir olmasini gerektirmektedir. Bu rehberde, WCAG 2.2 standartlarini ve pratik uygulama adimlarini detayli sekilde ele alacagiz.

WCAG 2.2 Nedir?

WCAG (Web Content Accessibility Guidelines), W3C (World Wide Web Consortium) tarafindan gelistirilen web erisilebilirlik standartlaridir. WCAG 2.2, Ekim 2023'te yayimlanan en guncel surumddur ve dort temel ilke uzerine insaa edilmistir.

Uyumluluk Seviyeleri

Cogu yasal duzenleeme ve en iyi uygulama rehberi, WCAG 2.2 AA seviyesini hedef olarak belirler.

Ilke 1: Algilanabilirlik (Perceivable)

Bilgi ve kullanici arayuzu bilesenleri, kullanicilarin algilayabilecegi sekilde sunulmalidir. Icerik en az bir duyu organiiyla erisilebilir olmalidir.

Temel Gereksinimler

• Metin Alternatifleri (1.1.1): Tum metin disi icerikler (gorseller, ikonlar, grafikler) icin anlamli alternatif metin (alt ozelligi) saglayin. Dekoratif gorseller icin bos alt etiketi (alt="") kullanin.
• Zaman Tabanli Medya (1.2): Video iceriklere altyazi ve sesli betimleme ekleyin. Canli yayinlar icin gercek zamanli altyazi destegi saglayin.
• Uyarlanabilir Icerik (1.3): Icerik yapisini semantik HTML ile tanimlayiin. Baslik hiyerarsisi (H1-H6), listeler, tablolar ve form etiketleri dogru kullanilmali.
• Ayirt Edilebilirlik (1.4): Renk tek basina bilgi aktarim araci olmamali. Metin-arka plan kontrast orani normal metin icin en az 4.5:1, buyuk metin icin en az 3:1 olmali (AA seviyesi).

Ilke 2: Kullanilabilirlik (Operable)

Kullanici arayuzu bilesenleri ve navigasyon, tum kullanicilar tarafindan calistiirilabilir olmalidir.

Temel Gereksinimler

• Klavye Erisimi (2.1): Tum islevsellik klavye ile erisilebilir olmali. Tab tusu ile gezinme, Enter/Space ile etkilesim, Escape ile kapatma gibi standart klavye kaliplarini destekleyin. Klavye tuzaklarindan kacinin.
• Yeterli Zaman (2.2): Kullanicilara icerigi okumak ve kullanmak icin yeterli zaman verin. Otomatik kaydirma, zamanlayici ve oturum suresi dolumu icin uzatma veya devre disi birakma secenegi sunun.
• Nöbet Tetikleyiciler (2.3):Saniyede 3'ten fazla yanip sonen icerik kullanmayin. Fotosensitif epilepsi riski tasir.
• Gezinilebilirlik (2.4):"Icerigi Atla" baglantilari ekleyin, sayfa basliklarini tanimlayin, odak sirasini mantikli yapilandirin ve baaglanti metinlerini aciklayici yapiin ("buraya tiklayin" yerine "fiyat listesini indirin").
• Giris Yontemleri (2.5): Isaret (pointer) hareketleri gerektiren islevler icin alternatifler sunun. Surukleme-birakma islemleri icin buton alternatifleri saglayin. Dokunma hedeflerinin en az 24x24 piksel (AA) veya 44x44 piksel (gelismis) boyutunda olmasini saglayin.

Ilke 3: Anlasilabilirlik (Understandable)

Bilgi ve kullanici arayuzunun isleyisi anlasilabilir olmalidir.

Temel Gereksinimler

• Okunabilirlik (3.1): Sayfanin dilini HTML lang ozelligi ile belirtin. Farkli dildeki metin bolumleri icin lang ozelligini o boluume ekleyin. Kisaltmalarin ve teknik terimlerin aciklamalarini saglayin.
• Ongorulebilirlik (3.2): Odak veya giris degisikliginde beklenmedik baglam degisiklikleri yapmayin. Navigasyon ve islevsellik tum sayfalarda tutarli olmali.
• Giris Yardimi (3.3): Form hatalarini acikca tanimlayiin ve cozum onerileri sunun. Zorunlu alanlari belirtin. Onemli islemler icin (mali islemler, veri silme) onay mekanizmasi saglayin.

Ilke 4: Saglam (Robust)

Icerik, yardimci teknolojiler dahil cesitli kullanici ajanlari tarafindan guvenilir sekilde yorumlanabilir olmalidir.

Temel Gereksinimler

• Ayristirma (4.1.1): Gecerli HTML yazin. Etiketlerin dogru acilip kapatildigini, kimliklerin benzersiz oldugunu ve ic ice yerlesimin dogru oldugunu dogrulayin.
• Ad, Rol, Deger (4.1.2): Tum UI bilesenleri icin programatik olarak ad, rol ve durum bilgisi saglayin. Ozel bilesenler icin ARIA rollerini ve ozelliklerini kulllanin.
• Durum Mesajlari (4.1.3): Hata mesajlari, basari bildirimleri ve ilerleme durum bilgilerini role="alert", role="status" veya aria-live bolgeleri ile yardimci teknolojilere iletin.

ARIA (Accessible Rich Internet Applications)

ARIA, HTML'in yetersiz kaldigi durumlarda erisilebilirlik bilgisi eklemenizi saglayan bir standarttir. Ancak "ARIA kullanmamanin en iyi ARIA kullanimi" ilkesini benimseyin; once semantik HTML kullanin, ARIA'yi yalnizca gerektiginde ekleyin.

Sik Kullanilan ARIA Ozellikleri

• aria-label: Gorunur etiketi olmayan ogelere erisilebilir ad ekler. Ornek: ikon butonlar.
• aria-labelledby: Baska bir ogeyi etiket olarak referans gosterir.
• aria-describedby: Ek aciklama bilgisi saglar. Form alanlari icin yardim metinleri.
• aria-expanded: Acilir/kapanir ogelerin durumunu belirtir (true/false).
• aria-hidden: Ogeyi yardimci teknolojilerden gizler. Dekoratif ogeler icin kullanilir.
• aria-live: Dinamik icerik degisikliklerini duyurur. polite (siradaki bosllukta) veya assertive (hemen) degerleri alir.
• role: Ogenin rolunu tanimlar. button, dialog, navigation, tablist gibi roller.

Erisilebilirlik Test Araclari

Erisilebilirlik testini hem otomatik araclar hem de manuel yontemlerle gerceklestirmeniz gerekir. Otomatik araclar sorunlarin yaklasik %30-40'ini tespit edebilir; geri kalani icin manuel test zorunludur.

Otomatik Test Araclari

• axe DevTools: Deque Systems tarafindan gelistirilen tarayici eklentisi. WCAG ihlallerini tespit eder ve cozum onerileri sunar.
• WAVE: WebAIM tarafindan sunulan, web sayfalarini gorsel olarak analiz eden ucretsiz arac.
• Lighthouse: Google Chrome'un yerlesik erisilebilirlik denetimi.
• eslint-plugin-jsx-a11y: React projelerinde gelistirme sirasinda erisilebilirlik sorunlarini yakalayan ESLint eklentisi.
• Pa11y: CI/CD surecine entegre edilebilen komut satiri erisilebilirlik test araci.

Manuel Test Yontemleri

• Klavye Testi: Fareyi birakarak tum siteyi yalnizca klavye ile kulllanin. Tab sirasi, odak gorunurlugu ve etkilesim noktalarini kontrol edin.
• Ekran Okuyucu Testi: NVDA (Windows, ucretsiz), VoiceOver (macOS/iOS, yerlesik) veya JAWS (Windows, ucretli) ile siteyi test edin.
• Zum Testi: Sayfayi %200 ve %400 oraninda buyuterek icerik ve islevselligin bozulmaadigini dogrulayin.
• Renk Kontrasst Testi: WebAIM Contrast Checker ile metin ve arka plan renk kontrastini olcun.

Erisilebilirlik Kontrol Listesi

Projelerinizde asagidaki kontrol listesini uygulayarak WCAG 2.2 AA uyumlulugu saglayin:

1. Tum gorsellerde anlamli alt metinleri var mi?
2. Renk kontrast oranlari AA gereksinimlerini karsiyor mu?
3. Site tamamen klavye ile kullanilabiliyor mu?
4. Odak gostergesi (focus indicator) tum etkilesimli ogelerde gorunur mu?
5. Baslik hiyerarsisi (H1-H6) dogru ve sIirali mi?
6. HTML lang ozelligi dogru tanimlanmis mi?
7. Form alanllarinda label etiketleri dogru iliskilendirilmis mi?
8. Hata mesajlari acik, anlasilir ve cozum odakli mi?
9. Video iceriklerde altyazi mevcut mu?
10. Dokunma hedefleri en az 24x24 piksel boyutunda mi?
11. ARIA rolleri ve ozellikleri dogru kullanilmis mi?
12. Dinamik icerik degisiklikleri aria-live ile duyuruluyor mu?
13. "Icerigi Atla" baglantilari mevcut mu?
14. Sayfa %400 buyutmede hala kullanilabilir mi?
15. Otomatik hareketli icerikler durdurulabiliyor mu?

Sonuc: Web erisilebilirlik, herkesin dijital dunyaya esit erisimini saglayan temel bir haktir. WCAG 2.2 standartlari, algilanabilirlik, kullanilabilirlik, anlasilabilirlik ve saglaamlik ilkeleri ile kapsamli bir cerceve sunar. Otomatik test araclari ve mannel denetim yontemlerini birlikte kullanarak, dijital urunlerinizin herkes icin erisilebilir olmasini saglayin. Megis olarak, gelistirdigimiz tum projelerde WCAG 2.2 AA uyumlulugunu standart olarak hedefliyor ve kapsayici dijital deneyimler olusturuyoruz.