Evrensel Tasarımın Yedi İlkesi Web'de Nereye Oturur
Evrensel tasarımın yedi ilkesi 1997'de yazıldı ve web'i değil, kapı kollarını, rampaları, mutfak aletlerini düşünüyordu. Büyük kısmı ekrana taşınıyor, bir kısmı zorlanarak taşınıyor, bir maddesi ise web'de hiçbir şeye karşılık gelmiyor. Ayıklama işini yapıp geriye kalanı WCAG'nin ölçülebilir sayılarıyla eşlediğinizde erişilebilirlik bir iyi niyet beyanı olmaktan çıkıp kontrol edilebilir bir işe dönüşüyor.
İlkeler nereden geliyor
Listeyi North Carolina State University'de Ronald Mace ve ekibi hazırladı. Mace tekerlekli sandalye kullanan bir mimardı ve derdi, engelli bireyler için ayrı çözümler üretmek yerine baştan herkesin kullanabileceği şeyler tasarlamaktı. Bu yüzden yedi ilke bir kontrol listesi değil, bir bakış açısı. Web'de kullanışlı olmalarının sebebi de kontrol listesi olmamaları; kontrol listesi zaten var, adı WCAG.
Pratik ayrım şu: yedi ilkeyi neyi neden yaptığınızı anlamak için, WCAG'yi yaptığınızı doğrulamak için kullanın. İkisini karıştırınca ortaya bu tür yazılarda sık görülen, ölçülemeyen tavsiye yığını çıkıyor.
Ekrana doğrudan oturanlar
Eşit kullanılabilirlik web'de tek bir kurala iniyor: rengi tek başına bilgi taşıyıcısı yapmayın. Hatalı form alanını kırmızıya boyamak yetmez, yanına metin gerekir. Grafikteki iki çizgiyi sadece renkle ayırmak yetmez, biri kesikli olmalıdır. Bu, WCAG 1.4.1'in tamamı ve uygulaması on dakika sürüyor.
Kontrast tarafında tahmin yürütmeye gerek yok. Normal boyutlu metin için 4.5:1, büyük metin için (18.66 px ve üzeri, ya da 14 px kalın) 3:1 oranı AA seviyesinin şartı. AAA isterseniz 7:1. Tarayıcı geliştirici araçları bu oranı seçtiğiniz renk çifti için anında gösteriyor, dolayısıyla "kontrast önemli" cümlesini kuran ama sayı vermeyen her metin size aslında hiçbir şey söylememiş oluyor.
Kullanımda esneklik pratikte klavye demek. Fareyi kenara itin ve siteyi Tab tuşuyla baştan sona gezin. Odaklanılan öğe her adımda görünüyor mu, sıralama sayfadaki görsel sıraya uyuyor mu, açılan menüye girip Esc ile çıkabiliyor musunuz? Otuz saniyelik bir test ve çoğu sitede ilk on saniyede kırılıyor, genellikle birinin outline: none yazıp yerine bir şey koymamış olmasından.
Hata toleransı için tek soru yeterli: hata mesajı, hataya sebep olan alanın yanında mı duruyor ve ne yapılması gerektiğini söylüyor mu? Formun tepesinde "Bir hata oluştu" yazan kırmızı kutu, ekran okuyucuyla gezen biri için o alana geri dönmenin yolunu göstermediği sürece işe yaramıyor.
Dolaşımdaki 60-76 px yanlış birimde
Dokunma hedefi boyutu için sık sık "mobilde en az 60-76 piksel" tavsiyesi görürsünüz. Sayı uydurma değil ama birimi yanlış aktarılıyor ve bu haliyle uygulanamaz bir öneriye dönüşüyor.
Kaynağı, parmak ucunun ekrana temas eden alanının yaklaşık 10 milimetre olduğunu söyleyen antropometrik ölçümler. CSS pikseli 1/96 inç olarak tanımlı, yani 0.26 mm. Buradan 10 mm yaklaşık 38 CSS pikseli ediyor. Peki 76 nereden çıkıyor? Cihaz pikselinden. Piksel yoğunluğu 2 olan bir telefonda 76 cihaz pikseli tam olarak 38 CSS pikseline denk düşüyor, aradaki fark sadece hangi pikselden söz ettiğinizde. Aynı yazının ilerleyen bölümünde "minimum 60 px" diye tekrarlanan sayı da 30 CSS pikseli demek.
Bunu CSS pikseli sanıp uygularsanız ne olduğunu görmek kolay: 390 piksel genişliğindeki tipik bir telefon ekranına 76 pikselden yan yana beş buton sığıyor. Alt navigasyonunuz beş öğeden fazlaysa tasarım daha başlamadan tıkanıyor.
Gerçek eşikler şöyle: WCAG 2.2'nin 2.5.8 kriteri AA seviyesinde 24 × 24 CSS pikseli istiyor, 2.5.5 kriteri AAA için 44 × 44 diyor. Apple kendi kılavuzunda 44 pt, Google'ın Material tarafı 48 dp öneriyor. Üçünün 44-48 aralığında buluşması tesadüf değil, hepsi aynı 10-12 milimetrelik parmağı ölçüyor. Hedefiniz 44 olsun; yer yoksa 24'e kadar inebilirsiniz ama o zaman hedefler arasına boşluk koymak zorunlu hale geliyor.
Web'de karşılığı olmayan madde
Dördüncü ilke "algılanabilir bilgilendirme" ve orijinal metinde görsel, işitsel ve dokunsal anlatımın bir arada sunulmasını istiyor. Dokunsal kısım bir kapı kolu için anlamlı, bir web sayfası için değil. Tarayıcının dokunsal çıktısı yok. Braille ekranlar var ama onlar da ekrandaki metinden besleniyor, ayrı bir kanal değiller.
Yani bu ilke web'e geldiğinde tek bir şeye indirgeniyor: görsel veya işitsel her içeriğin bir metin karşılığı olsun. Görsele alt metni, videoya altyazı, podcast'e transkript.
Alt metninde çoğu kişinin bilmediği bir ayrım var. alt özniteliğini hiç yazmamakla alt="" yazmak aynı şey değil. Öznitelik yoksa ekran okuyucu çaresiz kalıp dosya adını okur ve kullanıcı "i m g underscore 4 4 2 1 nokta j p g" dinler. Boş bırakılmışsa görseli dekoratif kabul edip tamamen atlar. Karar kuralı basit: alt metnine ne yazacağınızı bulamıyorsanız o görsel muhtemelen dekoratiftir, boş bırakın.
SEO gerekçesi zayıf bir gerekçe
Erişilebilir sitelerin arama motorlarında daha iyi sıralandığı sık tekrarlanıyor. Google'ın WCAG uyumunu sıralama sinyali olarak kullandığına dair bir beyanı yok ve bunu bekleyecek bir sebep de yok.
Örtüşen kısımlar elbette var. Alt metni görsel aramasında işe yarıyor, düzgün başlık hiyerarşisi ve semantik HTML tarayıcı botunun sayfayı çözmesini kolaylaştırıyor, altyazı dosyası video içeriğini metne çeviriyor. Ama bunlar erişilebilirliğin yan ürünü, sebebi değil. Erişilebilirliği SEO gerekçesiyle savunursanız, ilk SEO denetimi "bu iş sıralamayı oynatmıyor" dediğinde savunacak bir şeyiniz kalmıyor. Gerekçe kullanıcılar; sitenizi kullanamayan kişi sayısı, arama sonucundaki sıranızdan daha somut bir maliyet.
Otomatik araçların göremediği
axe, Lighthouse ve benzerleri kontrast oranını, eksik alt özniteliğini, etiketsiz form alanını, bozuk başlık sıralamasını güvenilir biçimde yakalıyor. Bunları elle aramak zaman kaybı.
Göremedikleri ise tam olarak işin zor kısmı. Alt metninin var olduğunu görürler, doğru olup olmadığını göremezler; "görsel" yazan bir alt metni testten geçer. Odak sırasının mantıklı olup olmadığını, hata mesajının anlaşılır olup olmadığını, bir ikonun neyi kastettiğini de göremezler. Denetim aracının yeşil raporu, sitenin kullanılabilir olduğu anlamına gelmiyor; sadece makinenin bakabildiği yerlerde sorun olmadığı anlamına geliyor.
Aradaki farkı kapatmanın en ucuz yolu ekran okuyucuyu bir kez açmak. macOS'ta Cmd+F5, Windows'ta Ctrl+Win+Enter. İlk denemede kendi sitenizde kaybolmak normal ve zaten öğretici olan kısım o.
Kaynaklar