Klavye ile erişilebilir arayüz: odak sırası ve odak yönetimi uygulaması

Klavye erişilebilirliği neden temel şarttır?

WCAG’ın Klavye başarı ölçütü (A düzeyi) özetle şunu söyler: her işlev, belirli zamanlama gerektirmeden klavye arayüzüyle çalıştırılabilmelidir. İstisna, fare hareketinin izlediği yola bağlı serbest çizim gibi işlevlerdir. Bu ölçüt yalnızca ekran okuyucu kullananları değil; fare kullanamayan, alternatif klavye, anahtar ya da ses girişi gibi yardımcı araçlara başvuran ve görme düşüklüğü nedeniyle imleci izlemekte zorlanan kişileri de kapsar.

Klavye desteği, diğer yardımcı teknolojilerin de temelini oluşturur. Ses komutuyla çalışan bir yazılım ya da tuş taraması yapan bir cihaz, çoğunlukla klavye olayları üzerinden arayüzle konuşur. Klavyeyle çalışmayan bir arayüz, bu kişilerin hiçbirine açılmaz.

Adım adım: önce doğru HTML

Klavye erişilebilirliğinin en büyük kısmı özel kod yazmadan, doğru HTML öğesi seçerek sağlanır. Düğme, bağlantı, form alanı ve seçim kutusu gibi yerel öğeler tarayıcıda hazır olarak odaklanabilir ve klavyeyle çalıştırılabilir. Enter ve Boşluk tuşu düğmeyi tetikler, Enter bağlantıyı açar, ok tuşları seçim gruplarında gezinir.

Sık yapılan hata, tıklanabilir bir div kullanmaktır. Div varsayılan olarak odak almaz ve klavye olaylarına yanıt vermez; onu düzeltmek için odak özniteliği, rol bilgisi ve klavye olay işleyicisi eklemek gerekir. Oysa aynı işi bir button öğesi bunların hepsini zahmetsiz yapar. Kural basittir: bir şey tıklanıyorsa button ya da a kullanın; yeni bir arayüz bileşeni gerekiyorsa önce yerel bir öğe ile çözülüp çözülemeyeceğine bakın.

Örnek: div class=“kaydet” onclick=“kaydet()” yerine button type=“button” onclick=“kaydet()” yazmak, klavye erişimini, odak halkasını ve ekran okuyucu bilgisini birlikte getirir.

Odak sırası: sayfa mantıklı sırayla gezilmeli

Odak Sırası başarı ölçütü (A düzeyi), sıralı gezinilebilen sayfalarda odak alan bileşenlerin anlamı ve işlerliği koruyan bir sırayla odak almasını ister. Basit HTML’de sıra, kaynak kodda öğelerin göründüğü sıradır. Bu yüzden en sağlam çözüm, kaynak sırasını görsel akışa uygun tutmaktır.

Odak sırasını bozan tipik nedenler: CSS ile görsel sırayı değiştirip kaynak sırasını bırakmak, pozitif değerli tabindex kullanmak, sayfaya dinamik olarak eklenen öğeleri DOM’da uzak bir yere koymak. Pozitif tabindex değerlerinden kaçının; sıra bir yerde değiştiğinde diğer her şey kayar. Negatif değerli tabindex ise yalnızca script ile odak verilecek öğeler için uygundur, örneğin hata özeti gibi. Sayfanın tamamında “Tab” tuşuyla ilerleyip odağın nereye gittiğini gözlemlemek, sırayı denetlemenin en hızlı yoludur.

Görünür odak göstergesi

Klavye kullanıcısı odağın nerede olduğunu görebilmelidir. En sık görülen kusur, tasarım gerekçesiyle odak çerçevesini kaldırmaktır: CSS’te outline değerinin none yapılması, yerine bir şey konmadığı sürece klavye kullanıcısını kör bırakır.

Çözüm, tarayıcının varsayılan çerçevesini korumak ya da onu belirgin bir şekilde özelleştirmektir. Örnek: a:focus-visible, button:focus-visible gibi seçicilere outline: solid var(--odak-kalinligi) var(--odak-rengi) yazmak ve outline-offset ile çerçeveyi öğenin biraz dışına almak yeterlidir. focus-visible, odağı yalnızca klavye gibi araçlarla gelindiğinde gösterir, fareyle tıklamada gösterilmesini engeller; tasarımcıların itirazını azaltan iyi bir denge noktasıdır. Çerçevenin hem açık hem koyu zeminde yeterli kontrasta sahip olması gerekir.

Atlama bağlantısı, modal pencereler ve odak yönetimi

Her sayfada yineleyen başlık ve menü bloklarını atlamak için sayfanın en başına “Ana içeriğe geç” bağlantısı konur. Bağlantı ilk Tab’ta görünür hale gelir ve main bölgesinin kimliğine gider.

Modal pencerelerde odak yönetimi şu adımlarla yapılır: pencere açılınca odak pencerenin içine, örneğin başlığına ya da ilk etkileşimli öğeye taşınır; pencere açıkken Tab odağı pencerenin dışına kaçırmaz; Escape ile pencere kapanır; kapanınca odak pencereyi açan düğmeye geri döner. Pencerenin arkasındaki içerik etkin kalmamalıdır.

Tek sayfa uygulamalarında sayfa değiştiğinde odak yönetimi ihmal edilirse klavye ve ekran okuyucu kullanıcısı yeni sayfanın başladığını anlayamaz. Rota değişiminde odağı yeni sayfanın ana başlığına taşımak ve belge başlığını güncellemek yaygın uygulamadır. Açılır menü, sekme ve ağaç gibi bileşik bileşenlerde ise Tab bileşene girer, bileşenin içinde ok tuşlarıyla gezilir; bu kalıp, WAI-ARIA yazım uygulamalarında tarif edilir.

Örnek kurulum: sayfanın en üstüne a href=“#icerik” bağlantısı konur, metni “Ana içeriğe geç” olur; main öğesine id=“icerik” verilir. Bağlantı varsayılan olarak ekran dışında tutulur ve odak aldığında görünür hale gelir (CSS’te odak durumunda konumu görünür alana çekilir). Test: sayfayı yükleyin, ilk Tab’a basın; bağlantı görünüyor ve Enter ile ana içeriğe götürüyorsa kurulum doğrudur.

Klavye ile test etme kontrol listesi

Fareyi bırakıp sayfayı baştan sona klavyeyle gezin ve şunları kontrol edin:

• Tab ile her bağlantıya, düğmeye ve form alanına ulaşabiliyor muyum?
• Odak sırası görsel akışa ve anlama uygun mu?
• Odağın nerede olduğu her an görünüyor mu?
• Enter ve Boşluk beklenen öğeleri tetikliyor mu?
• Açılır menü, modal ve ipucu kutuları Escape ile kapanıyor mu?
• Odak bir yere takılıp kalıyor mu, yani klavye tuzağı var mı?
• Sayfa içeriği dinamik olarak değiştiğinde odak kayboluyor mu?

Bu testi bir ekran okuyucuyla da yineleyin; klavye testinde bulunan sorunların çoğu orada da çıkar. Otomatik denetim araçları bu sorunların yalnızca bir kısmını yakalar, bu yüzden el ile test vazgeçilmezdir.

Test sırasında bulunan sorunları kayıt altına alırken şu bilgileri not edin: hangi sayfa ve bileşen, hangi tuş, beklenen davranış, gerçekleşen davranış. Bu format, geliştiriciye hatayı hızla yeniden üretme imkânı verir. Özellikle özel açılır menü, tarih seçici ve sürükle-bırak bileşenlerinde klavye alternatifi (ok tuşları, düğmeler) bulunduğundan emin olun; fareyle sürüklemeye bağımlı işlevlerde aynı sonucu veren bir klavye yolu sağlanmalıdır.

Bu beceri Mindset programlarında nerede çalışılır?

Erişilebilirlik (WCAG) Tasarım Prensipleri eğitimi, işletilebilir arayüzü ayrı bir modül olarak işliyor; ayrıca erişilebilirlik denetimi ve araçları, kapsayıcı tasarım uygulaması ve mevzuat temelleri de programda yer alıyor. Bu yapı arayüz tasarımcıları, ön yüz geliştiriciler, test ve kalite ekipleri ile ürün sahipleri için ortak bir dil sunabilir.

Kurumsal ekipler, kendi ürün arayüzlerini klavye testinden geçirerek uygulamalı çalışma yapabilir. İçeriğin ürününüze göre uyarlanması için kurumsal eğitim talebi üzerinden görüşebilirsiniz.