Web erişilebilirliği: WCAG 2.2’ye göre 12 maddelik temel kontrol listesi

Web erişilebilirliği, sitenizin engelli bireyler dahil herkes tarafından algılanabilir, kullanılabilir ve anlaşılabilir olmasıdır. Uluslararası referans, W3C’nin yayımladığı WCAG (Web İçeriği Erişilebilirlik Yönergeleri) belgesidir; güncel sürümü 2023’te yayımlanan WCAG 2.2’dir. Erişilebilirlik yalnız bir sorumluluk değil, aynı zamanda iyi bir iş kararıdır: okunaklı metin, net formlar ve klavyeyle de çalışan menüler, herkesin siteyi daha hızlı kullanmasını sağlar. Ayrıca arama motorları ve yapay zekâ asistanları da iyi yapılandırılmış, anlamlı etiketlenmiş sayfaları daha kolay anlar.

Erişilebilirlik kimin için?

Ekran okuyucu kullanan görme engelli kişiler, renk körlüğü olanlar, eli titrediği için küçük düğmelere basmakta zorlanan yaşlı kullanıcılar, kolu alçıda olduğu için yalnız klavye kullanan biri ya da güneş altında telefonuna bakan herkes… Erişilebilirlik sorunları bu kişilerin hepsini etkiler. Bu yüzden aşağıdaki maddeleri “özel bir kitle için ek iş” değil, temel kalite ölçütü olarak düşünmek gerekir.

12 maddelik temel kontrol listesi

Algılanabilirlik

1. Görsellerde anlamlı alt metin. İçerik taşıyan her görselin alt özelliği, görselin neyi anlattığını kısa bir cümleyle söylemelidir. Yalnız süs amaçlı görsellerde alt="" kullanılır ki ekran okuyucu onları atlasın. “resim1.jpg” veya anahtar kelime dizisi alt metin değildir.
2. Yeterli renk kontrastı. Normal metinde metin ile arka plan arasındaki kontrast oranı en az 4.5:1, büyük metinde (yaklaşık 24 piksel ve üstü ya da 19 piksel kalın) en az 3:1 olmalıdır. Açık gri üzerine beyaz yazı, en sık karşılaşılan hatadır.
3. Bilgiyi yalnız renkle vermemek. Bir form alanındaki hatayı yalnız kırmızı çerçeveyle göstermek renk körü bir kullanıcı için anlamsızdır. Renge ek olarak bir metin veya simge kullanın.
4. Videolarda altyazı. Konuşma içeren videolarda altyazı, işitme engelli kullanıcıların yanında sesi kapalı izleyen herkes için gereklidir.

Kullanılabilirlik

1. Tüm işlemler klavyeyle yapılabilmeli. Menüler, açılır pencereler, kaydırıcılar ve formlar yalnız Tab, Enter, boşluk ve ok tuşlarıyla kullanılabilmelidir. Fareyle denemek yetmez; bir kez de fareyi bırakıp sitenizi baştan sona gezmeyi deneyin.
2. Görünür odak göstergesi. Klavyeyle gezinen kullanıcı hangi öğede olduğunu görmelidir. CSS’te outline: none yazıp yerine bir şey koymamak, en yaygın erişilebilirlik hatalarından biridir.
3. Yeterli dokunma hedefi. WCAG 2.2 ile gelen kurala göre tıklanabilir hedefler en az 24×24 CSS pikseli büyüklüğünde olmalı ya da aralarında yeterli boşluk bulunmalıdır. Mobil kullanılabilirlik için 44×44 piksel daha rahat bir hedeftir.
4. İçeriğe atlama bağlantısı. Sayfanın en başında “İçeriğe geç” bağlantısı, klavye ve ekran okuyucu kullanıcılarının her sayfada menüyü baştan dinlemesini önler.

Anlaşılabilirlik

1. Sayfa dilinin tanımlanması. <html lang="tr"> ekran okuyucunun metni doğru telaffuzla okumasını sağlar. Türkçe bir sayfanın İngilizce aksanla okunması içeriği anlaşılmaz hale getirir.
2. Etiketli form alanları. Her form alanının görünür ve label ile bağlanmış bir etiketi olmalıdır. Yalnız alanın içindeki silik ipucu (placeholder) metni etiket yerine geçmez; yazmaya başlayınca kaybolur.
3. Anlaşılır hata mesajları. “Geçersiz giriş” yerine “Telefon numarası 10 haneli olmalı, örneğin 5321234567” gibi ne yapılacağını söyleyen mesajlar yazın.

Sağlamlık

1. Doğru HTML yapısı. Her sayfada tek bir h1, sırayla ilerleyen h2 ve h3 başlıkları, liste için ul/ol, düğme için button kullanın. Tıklanabilir bir div, ekran okuyucu için düğme değildir.

Nasıl test edilir?

• Otomatik tarama: Erişilebilirlik testimiz eksik alt metin, etiketsiz form alanı, dil tanımı ve başlık sırası gibi makine tarafından tespit edilebilen sorunları listeler. Otomatik araçlar sorunların yalnız bir bölümünü yakalayabilir.
• Klavye testi: Fareyi kenara koyun ve sitenizin en önemli işini (teklif formu, sepete ekleme, randevu) yalnız klavyeyle tamamlamaya çalışın.
• Ekran okuyucu: Windows’ta ücretsiz NVDA, Mac ve iPhone’da VoiceOver, Android’de TalkBack ile birkaç sayfayı dinleyin.
• Yakınlaştırma: Tarayıcıyı %200’e büyütün; metin taşmadan ve yatay kaydırma gerekmeden okunabiliyor mu bakın.

Sık yapılan hatalar

1. Tüm görsellere aynı alt metni yazmak ya da alt metne anahtar kelime doldurmak.
2. Açılır pencereyi (modal) klavyeyle kapatılamaz hale getirmek.
3. Logo veya simge düğmelerine metin karşılığı (aria-label) vermemek.
4. Erişilebilirlik “eklentisi” kurup sorunun çözüldüğünü varsaymak. Bu eklentiler temel HTML hatalarını düzeltemez.

Örnek senaryo: bir teklif formunu erişilebilir yapmak

Ad, telefon, e-posta, hizmet seçimi ve mesaj alanlarından oluşan bir teklif formunu ele alalım. Erişilebilir hale getirmek için yapılacaklar:

1. Her alana görünür bir etiket ekleyin. “Adınız”, “Telefon numaranız” gibi etiketleri alanın üstüne yazın ve label for ile alana bağlayın. Alan içindeki silik ipucu metni ek bilgi olarak kalabilir.
2. Zorunlu alanları metinle belirtin. Yalnız kırmızı yıldız yerine etiketin yanına “(zorunlu)” yazın.
3. Hizmet seçimini klavyeyle çalışır yapın. Özel tasarım bir açılır liste kullanıyorsanız ok tuşları ve Enter ile seçim yapılabildiğini test edin; emin değilseniz standart select öğesini kullanın.
4. Hata mesajlarını alanın yanında ve metin olarak gösterin. “Telefon numarası 10 haneli olmalı” mesajı hem görünür olmalı hem de ekran okuyucuya duyurulmalıdır.
5. Gönder düğmesini büyük ve belirgin yapın. Düğme metni “Gönder” yerine “Teklif isteğimi gönder” gibi ne olacağını söyleyen bir ifade olabilir.
6. Başarı mesajını duyurun. Form gönderildikten sonra sayfanın üstünde beliren “Teşekkürler, en geç bir iş günü içinde dönüş yapacağız” mesajı klavye odağını da üzerine almalıdır.

Bu düzenlemelerin hiçbiri tasarımı bozmaz; aksine formun herkes için daha hızlı doldurulmasını sağlar ve yarıda bırakılan form sayısını azaltır.

Sonuç

Erişilebilirlik bir kerelik bir proje değil, her yeni sayfa ve her yeni özellikte uygulanan bir alışkanlıktır. Yukarıdaki 12 madde, sorunların büyük çoğunluğunu kapsar ve çoğu tasarım aşamasında hiçbir ek maliyet olmadan çözülebilir. Bu maddeleri uyguladığınızda sitenizi kullanabilen kişi sayısı artar; arama motorları ve yapay zekâ asistanları da içeriğinizi daha doğru anlar. Yapay zekâ tarafını merak ediyorsanız yapay zekâ asistanlarının sitenizi nasıl okuduğunu anlatan yazımıza göz atabilirsiniz.