Klavye Erişilebilirliği Pratikte Nerede Kırılır

Fareyi kenara bırakın ve sitenizde yalnızca Tab, Enter, Esc ve ok tuşlarıyla dolaşın. Beş dakika, çoğu otomatik erişilebilirlik raporundan daha fazlasını söyler. Klavye erişimi genelde ekran okuyucu uyumundan önce kırılır ve hep aynı birkaç yerden kırılır: odak sırası, odak göstergesi, tıklanabilir hale getirilmiş div'ler ve kapanmayan modallar.

Odak sırası CSS'i değil DOM'u izler

Tab tuşu, odaklanabilir öğeleri kaynak kodundaki sıraya göre dolaşır. CSS bu sırayı istediği gibi bozabilir: flex-direction: row-reverse, order, grid'de elle yerleştirme, mutlak konumlandırma. Ekranda soldan sağa ilerleyen bir kart dizisi klavyede sondan başa gidebilir, kodda da gözle görünür bir hata olmaz.

Bir projede ürün kartlarının mobil sırasını order ile ters çevirmiştik; görsel sonuç isteneni veriyordu, Tab listeyi tersten geziyordu. Bu tür bir uyumsuzluğun çözümü CSS tarafında değil: öğeleri doğru sırada yazıp görsel düzeni o sıranın üzerine kurmak gerekir.

Odak halkasını silmenin bedeli

outline: none satırı neredeyse her zaman tasarım gerekçesiyle yazılır ve klavye kullanıcısının nerede olduğunu bilmesini imkansızlaştırır. Halkanın biçimi tartışılır, varlığı tartışılmaz. Kendi stilinizi verin: kalın bir kenarlık ya da zıt renkte bir gölge iş görür. outline özelliğinin dokümantasyonu seçenekleri topluca gösteriyor.

Gerekçe "fareyle tıklayınca da halka çıkıyor" ise cevabı :focus-visible. Tarayıcı odağın klavyeden mi işaretleme aygıtından mı geldiğini ayırt eder, halkayı yalnızca gerektiğinde gösterir. :focus için halkayı kaldırıp :focus-visible için geri vermek üç satır CSS, üçüncü parti bir eklentiye gerek yok.

tabindex nereye konur, nereye konmaz

<a href>, <button>, <input> ve <select> klavyeyle hazır çalışır. Tıklanabilir bir <div> yazdığınız anda dört işi elle üstlenirsiniz:

• odaklanabilirlik (tabindex="0"),
• ekran okuyucuya öğenin ne olduğunu söyleyen rol,
• Enter ve Space tuşlarını dinleyen olay işleyicisi,
• devre dışı durumun görsel ve erişilebilirlik tarafı.

<button> dördünü birden verir. Pozitif değerler ayrı bir konu: tabindex="1" ve üstünü taşıyan öğeler, sayfadaki doğal sıranın tamamından önce ve kendi aralarında küçükten büyüğe gezilir. Yani tek bir tabindex="3", sayfanın gezinme sırasını baştan kurar. Pratikte pozitif tabindex çözdüğü problemden fazlasını yaratır; bir kod tabanında görülüyorsa oradaki gerçek sorun muhtemelen işaretleme sırasıdır.

Açılan pencereden çıkış

Modal açıldığında odak içine taşınmalı, pencere açıkken içinde kalmalı, Esc ile kapanmalı, kapandığında onu açan butona dönmeli. Dördünden biri eksikse klavye kullanıcısı görünmeyen bir katmanın arkasındaki bağlantıları gezmeye başlar: ekranda modal durur, Tab arka plandaki sayfada ilerler. Fareyle test eden hiç kimse bunu görmez.

Odak tuzağını kendi JavaScript'inizle yazmak mümkün, ama <dialog> öğesini showModal() ile açtığınızda tuzak ve Esc davranışı tarayıcıdan gelir. Geriye tek iş kalır, kapanışta odağı tetikleyen öğeye geri vermek.

Atlama bağlantısı ve gözden kaçan koşulu

Elli bağlantılı bir menüyü her sayfada Tab'layarak geçmek kimsenin işine gelmez; "ana içeriğe atla" bağlantısı tam bunun için var. İki koşulu var. Bağlantı belgedeki ilk odaklanabilir öğe olmalı, yoksa ona ulaşmak için zaten menüyü geçmek gerekir. Hedef de odak alabilmeli: <main id="icerik"> doğal olarak odaklanabilir değildir, bu yüzden tabindex="-1" eklenir. Eksikse sayfa hedefe kayar, odak menüde kalır, bir sonraki Tab kullanıcıyı başa döndürür. Bağlantının odak alana kadar görünmez durması da gerekir, ama bunu display: none ile yapmayın, o öğeyi odak sırasından büsbütün çıkarır.

SEO tarafı, olduğu kadar

Erişilebilirlik bir sıralama faktörü değil. Arama motorunun değerlendirdiği şey anlamlı işaretleme, okunabilir bağlantı metni, tutarlı başlık hiyerarşisi ve açıklayıcı alt metni; bunlar erişilebilirlikle aynı işi yaptığı için iki taraf birlikte iyileşir. Klavye gezintisi bu kesişimin dışında kalır, arama motoru botu Tab tuşuna basmaz. Erişilebilirliği SEO getirisiyle savunmak zorunda kalıyorsanız zemin zayıf: ölçülemeyen kalem, bütçe daraldığında ilk silinen kalemdir.