Evrensel Tasarımın 7 Prensibi ve WCAG'in Başladığı Yer
Evrensel tasarım, bir ürünü yaş, yetenek ya da içinde bulunulan koşul fark etmeksizin aynı kapıdan kullanılabilir hale getirme fikridir. Yedi prensip bu fikrin 1997'de yazıya dökülmüş hali. Çerçeve olduklarını baştan söylemek gerekiyor, çünkü hiçbiri size tek başına "şu buton kaç piksel olmalı" demez; o cevap başka bir yerden gelir.
Prensipler nereden çıktı
Listeyi Kuzey Karolina Eyalet Üniversitesi'ndeki Center for Universal Design'da, mimar Ronald Mace'in yönettiği bir ekip hazırladı. Mace'in kendisi tekerlekli sandalye kullanıyordu ve derdi mimariydi: kapı genişlikleri, rampalar, mutfak tezgahı yükseklikleri. Web bu listenin gündeminde yoktu. Prensiplerin dijital ürünlere uyarlanması sonradan, başkaları tarafından yapıldı.
Bunu bilmek işe yarıyor. Prensipleri bir arayüze uyguladığınızda çevirinin bir kısmı doğrudan oturur, bir kısmı zorlanır. "Minimum fiziksel çaba" bir kapı kolunda net bir şey söyler; bir formda ne söylediğini siz karar verirsiniz.
Yedi prensip, kısaca
- Adil kullanım. Aynı işi herkes aynı yoldan yapabilmeli. Ayrı bir "engelli sürümü" hazırlamak bu prensibin ihlalidir, çözümü değil.
- Esnek kullanım. Birden fazla kullanım biçimine izin verin: fare, klavye, dokunma, sesli komut.
- Basit ve sezgisel kullanım. Kullanım, kişinin önceki deneyimine ya da dikkat düzeyine bağlı olmamalı.
- Algılanabilir bilgi. Bilgi tek bir duyuya bağlı taşınmamalı. Rengi tek başına anlam taşıyıcı yapan hata formu bunun klasik örneği.
- Hata toleransı. Yanlış yapmak kolay olmasın, yapıldığında geri dönmek kolay olsun.
- Düşük fiziksel çaba. Tekrarlanan hareket, uzun basılı tutma, hassas imleç kontrolü isteme.
- Yaklaşma ve kullanım için boyut ve mekan. Hedef, ona uzanan kişinin duruşundan bağımsız olarak yeterince büyük olsun.
İkisi birbirini iter
Bu listeyi bir kontrol listesi gibi kullanmaya çalışırsanız ikinci ve üçüncü maddede takılırsınız. Esneklik seçenek ister, sadelik seçenek istemez. Yazı boyutu ayarı, tema seçici, kontrast düğmesi, hareket kapatma anahtarı derken elinizde herkes için biraz daha zor bir arayüz kalır.
Çözüm bu ayarları arayüze yığmak değil, kullanıcının zaten yapmış olduğu ayara uymak. İşletim sistemi ve tarayıcı bunu size hazır veriyor: prefers-reduced-motion, prefers-color-scheme, prefers-contrast. Yazı boyutunu px yerine rem üzerinden kurarsanız tarayıcının yazı tipi ayarı da devreye girer. Kendi tema seçicinizi yazmadan önce bu üç medya sorgusunu karşılamış olun; çoğu durumda seçiciye ihtiyaç kalmıyor.
Ölçülebilir hale getiren şey WCAG
Prensipler yön verir, eşik vermez. Eşikler WCAG'de:
- Metin kontrastı en az 4.5:1, büyük metinde 3:1. Arayüz bileşenlerinin ve grafiklerin sınırları da 3:1.
- Dokunma hedefi WCAG 2.2'de en az 24x24 CSS pikseli. Daha rahat bir eşik isterseniz Apple 44 pt, Material 48 dp öneriyor.
- Her işlev klavyeyle yapılabilmeli ve odağın nerede olduğu görünmeli. Odak halkasını
outline: noneile kapatıp yerine görünür bir şey koymamak en yaygın hata (kod incelemesinde bu satırı gördüğümde geri kalanına bakmıyorum, doğrudan geri gönderiyorum).
Yedi prensip "algılanabilir bilgi" der ve durur. 4.5:1 sayısını veren WCAG'dir. İkisini karıştırmayın: biri tasarım tartışmasının dili, diğeri kabul kriteri.
Erişilebilirlik ile SEO aynı iş değil
"Erişilebilir site aynı zamanda üst sıralara çıkar" cümlesi çok tekrarlanıyor ama kesişim sanıldığından dar. Ortak küme: görsellerin alt metni, düzgün başlık hiyerarşisi, anlamlı bağlantı metni, sayfa dili, yapısal işaretleme.
Kesişim dışında kalanlar: kontrast oranı, odak sırası, klavye tuzakları, canlı bölge duyuruları, dokunma hedefi boyutu, hareket azaltma. Bunların hiçbiri sıralamaya etki etmez. Erişilebilirliği SEO gerekçesiyle savunursanız bütçe daraldığında ilk kesilen kalem tam da bu ikinci liste olur, yani asıl iş.
Ne test edilir
Otomatik denetim araçları eksik etiket, düşük kontrast, bozuk başlık sırası gibi makinece görülebilen şeyleri bulur. Odak sırasının anlamlı olup olmadığını, hata mesajının doğru anda duyurulup duyurulmadığını, bir modalın içinden çıkılabildiğini bulamaz. Bunlar el işi.
En ucuz iki test şu: fareyi masadan çekin, sayfayı baştan sona sadece Tab ve Enter ile kullanmayı deneyin. Sonra sayfayı %200 yakınlaştırın. Yatay kaydırma çubuğu çıkıyorsa ya da bir buton görünmez oluyorsa prensip tartışmasına girmeye gerek yok, sorun zaten ortada.
Kaynak