Web Erişilebilirlik (WCAG) Ön Denetimi

Erişilebilirlik sorunları işinize nasıl yansır?

Erişilebilirlik çoğu zaman "iyi niyetli bir ek" gibi konuşulur, oysa doğrudan ölçülebilir bir kayıp kalemidir. Etiketi olmayan bir form alanı, ekran okuyucu kullanan ziyaretçinin teklif formunu yarıda bırakması demektir. Yakınlaştırması kapatılmış bir mobil sayfa, gözlüğünü yanına almamış her kullanıcıyı kaybeder. Bu kişiler size "siteniz erişilebilir değil" diye yazmaz; sessizce sekmeyi kapatır ve rakibinizin sitesine gider.

İkinci etki arama motoru tarafındadır. Alt metinleri, doğru başlık hiyerarşisi ve anlamlı bölge işaretleri, aramanın sayfanızı anlamasını da kolaylaştırır. Erişilebilirlik için yaptığınız düzeltmelerin büyük bölümü aynı zamanda temiz HTML demektir. Kamu kurumlarıyla ya da kurumsal firmalarla çalışıyorsanız sözleşmelerde erişilebilirlik şartıyla karşılaşma ihtimaliniz de her yıl artıyor.

Otomatik ön denetim neyi görür, neyi göremez?

Bu araç sitenizin HTML kaynağını okur ve yapısal olarak kesin biçimde doğrulanabilen şeyleri raporlar: alt metni var mı yok mu, form alanının etiketi tanımlı mı, başlık seviyesi atlanmış mı, iframe'in adı yazılmış mı. Bu sorulara makine kesin cevap verebilir, dolayısıyla raporda gördüğünüz her bulgu gerçek bir eksikliktir.

Buna karşılık WCAG ölçütlerinin çoğunluğu yalnızca elle test edilebilir. Renk kontrastının yeterli olup olmadığı, klavyeyle gezinirken odak halkasının görünüp görünmediği, sekme sırasının mantıklı ilerleyip ilerlemediği, videodaki altyazının içerikle örtüşüp örtüşmediği, bir alt metnin "görsel" yerine gerçekten anlamlı bir açıklama içerip içermediği: bunların hiçbirine otomatik araç karar veremez. Var olan bir alt metnin doğru yazılıp yazılmadığını da biz ölçmüyoruz, yalnızca varlığını sayıyoruz. Bu yüzden çıkan rapor bir uyumluluk belgesi değil, elle yapılacak denetimin başlangıç noktasıdır.

En sık çıkan bulgular ve nasıl düzeltilir

Alt metni eksik görseller genellikle en kalabalık başlıktır. Her görsele ne olduğunu anlatan kısa bir cümle yazın: "resim1.jpg" değil, "Bursa Nilüfer'deki ofis girişi". Yalnızca süs amaçlı görsellerde alt niteliğini boş bırakın (alt=""), böylece ekran okuyucu onları atlar. Bu ikisi arasındaki farkı içerik yöneticinize açıklamak, çoğu sitede sorunun yarısını kapatır.

Form etiketleri için her giriş alanını bir label ile eşleştirin ve etiketi görünür tutun. Alan içine yazılan gri ipucu metni (placeholder) etiket yerine geçmez; kullanıcı yazmaya başladığında kaybolur. İkon butonlarında aria-label ekleyin ya da ikonun yanına ekranda gizli ama okuyucuya açık bir metin koyun; "Kapat", "Menüyü aç", "Sepete ekle" gibi.

Başlık hiyerarşisinde her sayfada tek bir H1 bulunsun ve seviyeleri sırayla kullanın. Başlıkları büyük görünsün diye seçmeyin; boyut CSS işidir, seviye ise içeriğin haritasıdır. Menü, ana içerik ve alt bilgi bölümlerini nav, main ve footer etiketleriyle sarın, sayfanın en başına ana içeriğe atlayan bir bağlantı ekleyin.

Son olarak iki hızlı düzeltme: mobil görünüm ayarındaki user-scalable=no ifadesini kaldırın, otomatik oynayan ses veya videoyu kullanıcının başlatmasına bırakın. tabindex değeri 1 ve üzeri olan öğeleri de sıfıra çekin; klavye sırasını sayfanın kendi akışına bırakmak neredeyse her zaman daha doğru sonuç verir.

Raporu aldıktan sonra izlenecek yol

PDF raporu aldıktan sonra bulguları etkilediği kullanıcı sayısına göre sıralayın. Ana sayfa, iletişim formu ve satın alma adımındaki sorunlar önceliklidir; nadiren ziyaret edilen bir alt sayfadaki eksik tablo başlığı bekleyebilir. Raporu geliştiricinize olduğu gibi iletebilirsiniz, her madde hangi öğede tespit edildiğini gösterir.

Otomatik denetimi kapattıktan sonra bir de elle deneyin: fareyi bir kenara bırakıp sadece Tab tuşuyla siteyi baştan sona gezin, odağın nerede olduğunu her adımda görebiliyor musunuz bakın. Bu beş dakikalık test, otomatik araçların göremediği sorunların önemli bölümünü ortaya çıkarır. Kapsamlı bir denetim ya da düzeltme çalışması gerekiyorsa Kod16 olarak birlikte planlayabiliriz.