Erişilebilir bir web sitesi, görme, işitme, hareket ya da bilişsel farklılığı olan kişilerin de kullanabildiği sitedir. Ama erişilebilirlik yalnız engelli kullanıcılar için değildir: güneş altında telefonuna bakan, kolu alçıda olan, yavaş bağlantıdaki ya da yaşlı ebeveyni için sipariş veren herkes erişilebilir tasarımdan faydalanır. Bu yazıda her projede uyguladığımız temel kuralları paylaşıyoruz.
Kontrast
Metin ile zemini arasındaki kontrast okunabilirliğin temelidir. WCAG 2.2 AA düzeyinde normal metin için en az 4,5:1, büyük metin için 3:1 oran gerekir. En sık hata açık gri metindir: zarif görünür ama birçok kullanıcı için okunmaz. Tasarım sistemimizde her renk çiftinin kontrast oranı belirtilir ve oranı tutmayan çift kullanılmaz.
Rengi tek bilgi taşıyıcısı olarak kullanmamak da önemlidir. Hatalı form alanını yalnız kırmızı çerçeveyle göstermek renk körlüğü olan kullanıcıya bir şey anlatmaz; yanına bir ikon ve açıklama metni eklenmelidir.
Klavyeyle gezinme
Sitenin bütün işlevleri yalnız klavyeyle kullanılabilmelidir. Sekme tuşuyla gezinirken:
- Her bağlantı, düğme ve form alanına ulaşılabilmeli.
- Sıra mantıklı olmalı: ekrandaki okuma sırasını izlemeli.
- Odaktaki öğe açıkça görünmeli.
- Açılır menüler, pencereler ve kaydırıcılar klavyeyle açılıp kapanabilmeli.
Odak halkasını “çirkin görünüyor” diye kaldırmak en yaygın hatalardan biridir. Odak halkası tasarımın bir parçası olarak ele alınmalı, markaya uygun ama her zaman görünür olmalıdır.
Başlık yapısı
Ekran okuyucu kullananlar sayfayı çoğu zaman başlıklar arasında atlayarak tarar. Her sayfada tek bir h1 olmalı, alt başlıklar h2, h3 sırasını atlamadan izlemelidir. Başlık seviyesi görsel boyuta göre değil, içerikteki yerine göre seçilir; boyut CSS ile ayrıca ayarlanır.
Görseller ve alternatif metin
Bilgi taşıyan her görselin alternatif metni olmalıdır. Alternatif metin görseli tarif etmekten çok görevini anlatır: “Ürün fotoğrafı” yerine “Erken hasat zeytinyağı, 500 ml koyu cam şişe”. Yalnız süs amaçlı görsellerde alternatif metin boş bırakılır ki ekran okuyucu onları atlayabilsin.
Formlar
- Her alanın görünür ve programatik olarak bağlı bir etiketi olmalı; yer tutucu metin etiket yerine geçmez.
- Zorunlu alanlar hem görsel olarak hem de metinle belirtilmeli.
- Hata mesajları alanın yanında, ne yapılması gerektiğini anlatan bir dille verilmeli.
- Otomatik doldurma (autocomplete) özellikleri doğru ayarlanmalı.
Dokunma hedefleri
Mobilde düğme ve bağlantıların en az 44 piksel yükseklikte ve aralarında yeterli boşlukla olması gerekir. Küçük ve sıkışık hedefler hem hareket kısıtı olanlar hem de yürürken telefonunu kullanan herkes için sorun yaratır.
Hareket
Animasyonlar dikkat çekmek ve geçişleri anlaşılır kılmak için faydalıdır; ama bazı kullanıcılarda baş dönmesi ve mide bulantısına yol açabilir. İşletim sisteminde “hareketi azalt” tercihi açık olan kullanıcılar için büyük hareketler kapatılmalı, otomatik oynayan videolar durdurulmalıdır. Kendi sitemizdeki imleç etkileşimi ve karşılama videosu da bu tercihe uyar.
Test
Erişilebilirlik testini iki aşamada yaparız. Otomatik araçlar kontrast, eksik etiket ve alternatif metin gibi hataların bir kısmını yakalar. Geri kalanı için sayfayı yalnız klavyeyle ve bir ekran okuyucuyla gezeriz. Bu testi tasarım onayından önce ve yayından önce olmak üzere iki kez tekrarlarız.
Erişilebilirlik bir eklenti ya da son dakika düzeltmesi değil, tasarımın ilk gününden itibaren alınan kararların toplamıdır. Baştan düşünüldüğünde ek maliyeti çok azdır; sonradan eklenmeye çalışıldığında ise pahalıdır.
Projenizi konuşalım. Brief sihirbazı iki dakikada kapsamı, süreyi ve önerilen ekibi çıkarır.
Brief’i başlat
