Web Erişilebilirliği: Herkesin Kullanabildiği Site

Erişilebilir site, fare kullanmadan, sesi açmadan ve görseli görmeden de baştan sona kullanılabilen sitedir. Bunu sağlayan şeyler ayrı bir proje değil: renk kontrastı, alt metin, doğru başlık sırası, görünür odak ve etiketlenmiş form alanları. Aynı düzen, arama motorlarının ve dil modellerinin sayfanızı okuma biçimini de iyileştirir.

1. 1

   Kontrastı ve Rengi Denetleyin

   Açık gri zemin üzerine açık gri yazı ekranda zarif görünür, güneş altındaki telefonda okunmaz. Gövde metni için yaygın kabul gören eşik 4,5:1 kontrast oranıdır. Bilgiyi yalnızca renkle vermek ise renk körü kullanıcı için o bilgiyi tamamen yok eder.

   • Gövde metniyle zemin arasındaki oranı en az 4,5:1, büyük başlıklarda en az 3:1 tutun.
   • Zorunlu alanı, hatayı ve stok durumunu renge ek olarak metinle ya da ikonla belirtin.
   • Grafik ve tablolarda serileri renk dışında desen veya doğrudan etiketle de ayırın.
2. 2

   Alt Metni Anlamlı Yazın

   Alt metin, görseli göremeyen kullanıcıya ve tarayıcıya görselin ne anlattığını söyler. Dosya adını alt metin olarak bırakan sayfa, ekran okuyucuda anlamsız harf dizileri okutur. Süs amaçlı görsellerde doğru davranış ise alt metni boş bırakmaktır.

   • Görselin taşıdığı bilgiyi tek cümlede yazın; başına “resim” ya da “görsel” eklemeyin.
   • Yalnızca dekoratif olan görsellerde alt metni boş bırakın, etiketi silmeyin.
   • Ürün fotoğraflarında rengi, modeli ve kullanım bağlamını alt metne koyun.
3. 3

   Başlık Sırasını Doğru Kurun

   Ekran okuyucu kullanan ziyaretçi sayfayı başlıktan başlığa atlayarak gezer; başlık sırası onun için içindekiler tablosudur. Bir sayfada tek H1 bulunur ve alt başlıklar seviye atlamadan iner. Yazıyı büyütmek için H2 yerine H4 seçmek bu haritayı bozar.

   • Her sayfada tek bir H1 kullanın ve o H1 sayfanın konusunu yazsın.
   • Seviye atlamayın: H2’den sonra H4 değil H3 gelsin.
   • Başlık etiketini punto için değil yapı için seçin, görünen boyutu stille ayarlayın.
4. 4

   Klavyeyle Gezilebilir Yapın

   Fare kullanamayan ziyaretçi sayfayı sekme tuşuyla dolaşır. Sekme sırası görsel sırayı takip etmeli ve odağın o an nerede olduğu ekranda görünmeli. Odak halkasını tasarım gerekçesiyle kaldıran sitede klavye kullanıcısı kaybolur.

   • Odak halkasını kaldırmayın; zeminle kontrastı yüksek, belirgin bir çerçeve kullanın.
   • Menü, açılır pencere ve sekmelerin sekme tuşuyla açıldığını, Esc ile kapandığını doğrulayın.
   • Sayfanın en başına “İçeriğe geç” bağlantısı koyun ki menü her seferinde baştan gezilmesin.
5. 5

   Bağlantı Metnini Açık Yazın

   Ekran okuyucular sayfadaki bağlantıları liste hâlinde de okuyabilir. O listede yan yana duran beş tane “devamı” bağlantısı hiçbir şey anlatmaz. Bağlantı metni, çevresindeki cümle olmadan da nereye gittiğini söylemeli.

   • “Buraya tıklayın” yerine hedefi yazın: “Kargo koşullarını okuyun”.
   • Aynı sayfada aynı metinle farklı yerlere giden iki bağlantı bırakmayın.
   • Yeni sekmede açılan ya da dosya indiren bağlantıları metinde belirtin.
6. 6

   Videoya Altyazı Ekleyin

   Videolar çoğu zaman sessiz izlenir: toplu taşımada, açık ofiste, gece. Altyazı bu yüzden yalnızca duymayan kullanıcı için değil, izleyicinin büyük bölümü için gerekli. Ayrıca altyazı metni, videonuzun aranabilir tek hâlidir.

   • Otomatik altyazı üretip elle düzeltin; özel isimler ve rakamlar neredeyse her zaman yanlış çıkar.
   • Altyazıyı görüntünün içine gömmek yerine ayrı altyazı dosyası olarak yükleyin.
   • Konuşmanın tam metnini videonun altına döküm olarak da koyun.
7. 7

   Form Etiketlerini Alana Bağlayın

   Form alanının üstündeki yazı görsel olarak etiket gibi durur, ama koda bağlanmamışsa ekran okuyucu o alanı adsız okur. Adsız alan, kullanıcının neyi doldurduğunu bilmemesi demektir. Hata bildirimi de renk dışında bir yolla verilmeli.

   • Her alana görünür bir etiket yazın ve etiketi alanın kimliğine bağlayın.
   • Yer tutucu metni etiket yerine kullanmayın; yazmaya başlayınca kaybolur.
   • Hatayı alanın hemen yanında, neyin yanlış olduğunu ve nasıl düzeltileceğini söyleyerek gösterin.
8. 8

   Kendiniz Test Edin

   Otomatik araçlar sorunların bir bölümünü yakalar, geri kalanı elle denenir. Herkesin yapabileceği iki test var: fareyi bırakıp yalnızca klavyeyle, sonra ekranı kapatıp ekran okuyucuyla aynı işlemi tamamlamak. Takıldığınız her nokta, bir müşterinin vazgeçtiği noktadır.

   • İletişim formunu ve satın alma akışını fareye hiç dokunmadan, yalnızca klavyeyle tamamlayın.
   • Cihazınızda hazır gelen ekran okuyucuyu açıp ana sayfayı ve bir ürün sayfasını dinleyin.
   • Otomatik erişilebilirlik denetimini yayın öncesi kontrol listenize sabit madde olarak ekleyin.