Web Erişilebilirliği: WCAG, ARIA ve Kapsayıcı Tasarım

Web Erişilebilirliği Nedir?

Web erişilebilirliği, web sitelerinin ve uygulamaların herkes tarafından kullanılabilir olması anlamına gelir. Görme, işitme, motor ve bilişsel engelleri olan kullanıcılar dahil.

Dünya Sağlık Örgütü'ne göre, dünya nüfusunun %15'i bir tür engellikle yaşamaktadır. Erişilebilir olmayan web siteleri bu kullanıcıları dışlar.

Web erişilebilirliği sadece etik bir zorunluluk değil, aynı zamanda yasal bir gereklilik de olabilir. Birçok ülke (ABD, AB, UK) erişilebilirlik yasaları çıkarmıştır.

Erişilebilir web siteleri SEO'ya da katkıda bulunur. Ekran okuyucular ve arama motoru botları benzer şekilde sayfayı tarar. İyi yapılandırılmış HTML her ikisine de fayda sağlar.

WCAG Standartları

WCAG (Web Content Accessibility Guidelines), W3C tarafından yayımlanan web erişilebilirlik standartıdır. Dört temel ilke üzerine kuruludur: Algılanabilir, İşletilebilir, Anlaşılabilir, Sağlam (POUR).

Algılanabilir (Perceivable): Bilgi ve kullanıcı arayüzü bileşenleri, kullanıcıların algılayabileceği şekilde sunulmalıdır. Alt text, renk kontrastı, metin alternatifleri.

İşletilebilir (Operable): Kullanıcı arayüzü bileşenleri ve navigasyon işletilebilir olmalıdır. Klavye navigasyonu, yeterli süre, nöbet tetikleyici içerikten kaçınma.

Anlaşılabilir (Understandable): Bilgi ve kullanıcı arayüzünün işletimi anlaşılır olmalıdır. Okunabilir metin, öngörülebilir davranış, giriş yardımı.

Sağlam (Robust): İçerik, yardımcı teknolojiler dahil çeşitli kullanıcı ajanları tarafından güvenilir şekilde yorumlanabilmelidir. Semantic HTML, ARIA rolleri.

WCAG 2.1 AA seviyesi çoğu yasal gereklilik için standarttır. AAA seviyesi en yüksek erişilebilirlik seviyesidir ancak her içerik için gerekli değildir.

ARIA Roller ve Özellikler

ARIA (Accessible Rich Internet Applications), dinamik web içeriğinin erişilebilirliğini artırmak için HTML'e eklenen özniteliklerdir. role, aria-label, aria-hidden gibi.

role özniteliği, bir elementin amacını tanımlar: role="navigation", role="button", role="dialog". Ekran okuyucular bu bilgiyi kullanarak içeriği sesli okur.

aria-label, elementin erişilebilir adını tanımlar. Görsel metin olmayan ikon butonları için kritiktir: <button aria-label="Menüyü kapat">X</button>.

aria-hidden="true", dekoratif elementleri ekran okuyuculardan gizler. Sadece görsel amaçlı kullanılan ikonlar ve boşluklar için kullanılır.

aria-live, dinamik olarak güncellenen içeriği ekran okuyuculara bildirir. role="alert" veya aria-live="polite" ile bildirimler sesli olarak duyurulur.

Önemli: ARIA birinci kuralı 'Mümkün olduğunda native HTML elementlerini kullanın.' <button> yerine <div role="button"> kullanmayın.

Kapsayıcı Tasarım İpuçları

Renk kontrastı: Metin ve arka plan arasında yeterli kontrast sağlayın. WCAG AA için normal metin 4.5:1, büyük metin 3:1 kontrast oranı gerekir.

Klavye navigasyonu: Tüm interaktif elementler (link, button, form) klavye ile erişilebilir olmalıdır. Tab tuşu ile gezinilebilmeli, Enter/Space ile etkinleştirilebilmelidir.

Alt text: Tüm anlamlı görsellere açıklayıcı alt text ekleyin. Dekoratif görseller için alt="" kullanın (boş). Ekran okuyucular alt text'i sesli okur.

Form etiketleri: Her form input'u için <label> elementi kullanın. Placeholder metin etiket yerine geçmez. Hata mesajları aria-describedby ile ilişkilendirin.

Focus göstergesi: Klavye ile gezinirken focus edilen element görünür olmalıdır. outline: none kullanmayın. Gerekirse custom focus style ekleyin.

Semantik HTML: Doğru HTML elementlerini kullanın: <nav>, <main>, <article>, <aside>, <header>, <footer>. Heading hiyerarşisini (h1-h6) doğru kullanın.

Test ve Değerlendirme

Otomatik test araçları: axe DevTools, Lighthouse Accessibility audit, WAVE. Bu araçlar yaygın sorunları tespit eder ancak tüm sorunları bulamaz.

Manuel test: Klavye ile tüm sayfayı gezin. Ekran okuyucu (NVDA, VoiceOver, TalkBack) ile test edin. Renk körlüğü simülasyonu ile kontrol edin.

Kullanıcı testi: Gerçek engelli kullanıcılarla test yapın. Otomatik araçlar ve manuel test, gerçek kullanıcı deneyimini tam olarak yansıtmaz.

Erişilebilirlik denetimi (audit): Profesyonel erişilebilirlik denetimi yaptırın. WCAG uyumluluk raporu ve iyileştirme yol haritası alın.

Utilgo Erişilebilirlik Araçları

Utilgo, renk kontrast kontrolü, alt text oluşturucu ve erişilebilirlik denetimi araçları sunar. Tüm araçlar tarayıcıda çalışır.

Araç sayfası: utilgo.net/tr/web/renk-kontrast-kontrolu