Engellilere Uygun Web Tasarımında İşe Yarayan Kurallar

Erişilebilirlik gereksinimleri engel türüne göre ayrı ayrı ezberlenen kurallar listesi gibi sunulur, oysa çoğu tek bir teknik karara bağlanır: anlam işaretlemede mi duruyor, yoksa yalnızca görselde mi. Bu soruya doğru cevap veren arayüz listenin yarısını kendiliğinden karşılar. Kalan yarısı içerik işidir: alt metin, altyazı, hata mesajı.

Anlam işaretlemede durur

Bir div'e tıklama olayı bağladığında ortaya çıkan şey butona benzer ama buton değildir: sekme sırasına girmez, Enter ve Boşluk tuşlarına cevap vermez, ekran okuyucuya kendini buton diye tanıtmaz. Bunu tabindex, role ve tuş dinleyicileriyle yamayabilirsin; üç satır kod ve kalıcı bir bakım borcu. <button> yazmak dördünü de bedavaya getirir.

Aynı mantık form alanlarında geçerli. label etiketi for ile alana bağlıysa etikete tıklamak alanı odaklar, ekran okuyucu da alanın adını okur. Bağlı değilse etiket, alanın yanında duran bir metinden ibarettir.

Başlıklar da süs değil, gezinme aracı. Ekran okuyucu kullanıcıları sayfayı baştan sona dinlemez, başlıklar arasında atlar. h2 yerine kalınlaştırılmış paragraf kullanan bir sayfa o kullanıcı için tek parça düz metindir.

Alt metin bir açıklama değil, yerine geçen şeydir

Alt metni yazarken doğru soru "bu görselde ne var" değil, "görsel yüklenmeseydi bu cümlenin yerinde ne yazardı". Ürün fotoğrafında marka ve model yeter. Grafikte asıl bilgi eğilimin kendisidir, "çubuk grafik" demek hiçbir işe yaramaz. Tamamen dekoratif görsel alt="" ile geçilir ve ekran okuyucu onu atlar; boş bırakmakla hiç yazmamak aynı şey değil, nitelik yoksa bazı okuyucular dosya adını okumaya başlar.

En sık kaçan yer yalnızca ikondan ibaret butonlar. Görünürde metin yok, dolayısıyla erişilebilir ad da yok. aria-label ya da görsel olarak gizlenmiş bir metin şart.

Yüzde tavsiyesi doğru, gerekçesi eski

"Piksel yerine yüzde kullanın, kullanıcı yazıyı büyütebilsin" cümlesi yıllardır tekrarlanıyor ve gerekçesi artık tutmuyor. Tarayıcı yakınlaştırması pikselle tanımlanmış metni de büyütür, o tarafta bir sorun kalmadı. Fark, kullanıcının tarayıcı ayarlarından değiştirdiği varsayılan yazı boyutunda ortaya çıkıyor: rem ve em bu ayarı taban alır, sabit px almaz. Gözü zorlanan kullanıcının açtığı şey çoğu zaman yakınlaştırma değil, o ayardır.

Asıl kırılma noktası ise birim değil, kapsayıcı. WCAG metin %200 büyütüldüğünde içerik ve işlev kaybı yaşanmamasını ister. Sabit yükseklikli kutu, overflow: hidden ve tek satıra göre hesaplanmış buton tam bu eşikte kırılır. Tasarımı bir kez %200'de açıp bakmak, birim tartışmasının tamamından daha çok iş görür.

Altyazı ve dokunma hedefi

Otomatik altyazı ham malzemedir, çıktı değil. Özel isimlerde ve teknik terimlerde düzenli olarak yanılır, yani tam da anlamı taşıyan kelimelerde. Yayına almadan önce bir düzeltme turu gerekir. Sesli içeriğin yazılı dökümü ayrıca durmalı: altyazı videoyu izlerken işe yarar, döküm aranabilir ve göz gezdirilebilir olduğu için çok daha geniş bir kitleye hizmet eder.

Dokunma hedefleri için WCAG 2.1'de 44x44 CSS pikseli AAA seviyesinde tanımlı, WCAG 2.2 ile birlikte 24x24'lük bir AA eşiği eklendi (WCAG 2.2). Pratikte 24 piksel alt sınırdır, hedef değil. Yürürken telefon kullanan ya da eli titreyen biri için 44 ile 24 arasındaki fark, doğru satıra basmakla yanlış kaydı silmek arasındaki farktır.

Hata mesajı, bilişsel yükün en pahalı olduğu yer

Bir projede form doğrulamasını yalnızca kırmızı çerçeveyle gösteriyorduk; ekran okuyucuyla açtığımızda form kusursuz görünüyordu, çünkü çerçeve rengi o katmana hiç geçmiyordu.

Hata mesajının üç şeyi yapması gerekir: alanın yanında metin olarak durmak, aria-describedby ile o alana bağlanmak, aria-live bölgesiyle anında duyurulmak. Bir de yapmaması gereken bir şey var: kullanıcının doldurduğu alanı temizlemek. Formu baştan doldurmak herkes için sinir bozucudur; ekrandaki bağlamı hafızasında tutmak zorunda olan kullanıcı içinse formu terk etme sebebidir.

Aynı ilke akışın tamamına yayılır. Sadeleştirme dediğimiz şey adım sayısını azaltmak değil, her adımda kullanıcının aklında tutmak zorunda kaldığı şeyi azaltmaktır. Onay ekranında sipariş özetini göstermek akışa adım ekler, yük çıkarır. İkincisi daha değerlidir.