Bu kural ne anlama geliyor

WCAG 2.1.2, bir klavye kullanıcısı sayfadaki herhangi bir bileşene odak tasidiginida, standart klavye mekanizmaları kullanarak odağı o bileşenden uzaklastirabilmesini gerektirir. Odak, kullanıcının fare veya başka bir işaret aygiti kullanmadan cikamayacagi şekilde asla tuzaga dusurulmemelidir.

Bir bileşen çıkmak için standart olmayan klavye davranisi gerektiriyorsa (bir modali kapatmak için Escape tuşuna basmak gibi), kullanıcı bu yöntem hakkında bilgilendirilmelidir. Temel ilke, hiçbir klavye kullanicisinin çıkış yolu olmadan bir bilesende asili kalmamasidir.

Neden önemlidir

Klavye tuzağı, en ciddi erişilebilirlik engellerinden biridir. Bir kullanıcı bir bilesende takildiginda, sayfanın geri kalanyla etkileşim yetenegi tamamen kaybolur. Diger içeriklere gidemez, form gonderemez ve hatta klavye komutlari kullanarak tarayıcı sekmesini bile kapatamaz. Tek kacis yolu tarayıcıyı kapatip yeniden acmaktir — tüm sayfa durumunu ve kaydedilmemis calismalarini kaybeder.

Bu özellikle yalnızca klavye girisine guvenenen kullanıcılar için tehlikelidir. Görme engelli kullanıcılar, anahtar cihazlar kullanan motor engelli kullanıcılar ve ses girişi kullanıcıları tamami, ongurelebilir odak hareketine bağımlıdır. Bir klavye tuzağı, küçük bir gezinme sorununu tamamen cikmaz bir yola cevirir.

İlgili axe-core kuralları

Klavye tuzaklarını doğrudan test eden otomatik axe-core kuralı bulunmamaktadır. Odak tuzaklarını tespit etmek manuel test gerektirir çünkü otomatik araçlar, odağın bir bileşenden ayrilip ayrilamadigini belirlemek için gereken ardisik klavye etkilesimini tam olarak simüle edemez.

Nasıl test edilir

Manuel klavye testi, klavye tuzaklarını tespit etmenin en güvenilir yoludur.

Yalnızca Tab ve Shift+Tab tuşlarıyla sayfadaki her etkileşimli öğede gezinin.
Odak özel bir bileşene (modal, bileşen, gömülü içerik) girdiginde, Tab ile cikmaya çalışın.
Yalnızca Tab odağı cikarmiyorsa Escape, ok tuşları ve diğer standart klavye kısayollarını deneyin.
Gömülü içerikleri test edin: iframe'ler, üçüncü parti bileşenler, gömülü medya oynaticilari ve WYSIWYG editorler yaygın tuzak kaynaklaridir.
Modal diyalogların Escape veya bir kapatma düğmesi ile kapatıldığında odağın serbest birakildigini doğrulayın.

Özel tarih secicilere, otomatik tamamlama alanlarına, zengin metin editorlerine ve gömülü haritalara özellikle dikkat edin.

Nasıl düzeltilir

Her bileşenin odağı tasimak için bir klavye mekanizması sagladigindan emin olun. Kasitli odak yakalama (modaller) bir çıkış yolu içermelidir.

Uygun odak yönetimi ile modal diyalog

<!-- Kasitli olarak odağı yakalayan ancak çıkış sağlayan modal -->
<div role="dialog" aria-modal="true"
  aria-labelledby="modal-başlık" id="modal">
  <h2 id="modal-başlık">Islemi Onayla</h2>
  <p>Devam etmek istediginizden emin misiniz?</p>
  <button onclick="onayla()">Evet</button>
  <button onclick="modalKapat()">Iptal</button>
</div>

<script>
const modal = document.getElementById('modal');
const odaklanabilirOgeler = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const ilkOge = odaklanabilirOgeler[0];
const sonOge = odaklanabilirOgeler[odaklanabilirOgeler.length - 1];

modal.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    modalKapat();
    return;
  }
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === ilkOge) {
      e.preventDefault();
      sonOge.focus();
    } else if (!e.shiftKey && document.activeElement === sonOge) {
      e.preventDefault();
      ilkOge.focus();
    }
  }
});
</script>

Özel bilecenlerde kazara tuzakları onleme

// Yanlış: keydown işleyicisi tüm varsayılan davranisi engelliyor
widget.addEventListener('keydown', (e) => {
  e.preventDefault(); // Bu odağı tuzaga dusurur!
  bilesenTuslama(e);
});

// Doğru: yalnızca islenen tuşlar için varsayilani engelle
widget.addEventListener('keydown', (e) => {
  if (['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(e.key)) {
    e.preventDefault();
    bilesenTuslama(e);
  }
  // Tab ve diğer tuşlar doğal olarak geçer
});

Gömülü içerik çıkışı

<!-- Standart olmayan çıkış için talimatlar sağlayın -->
<p class="sr-only">
  Gömülü editordan çıkmak ve ana sayfaya dönmek için
  Escape tuşuna basın.
</p>
<div id="editör" tabindex="0"
  aria-label="Zengin metin editörü. Çıkmak için Escape tuşuna basın.">
  <!-- Editor içeriği -->
</div>

Sık yapılan hatalar

Bir bileşen içindeki tüm keydown olaylarinda e.preventDefault() cagirmak, Tab tusunun odağı tasitmasini engellemek.
Escape tuşuna basildiginda kapanmayan modal diyaloglar, klavye kullanıcılarını içine hapseder.
Tüm klavye girisini yakalayan üçüncü parti gömülü bileşenler (sohbet, harita, video oynatıcılar).
Tab tusunun alt öğeler arasında çıkışı olmadan sonsuz döngü yapmasina neden olan özel bilecenlerdeki sonsuz odak dongleri.
Kullanıcı uzaklastiktan sonra odağı zorla bir bileşene geri donduren JavaScript tabanlı odak yönetimi.
Bir bileşenden çıkmak için standart olmayan tuşlar (Escape gibi) gerektiğinde eksik talimatlar.

2.1.2 Klavye Tuzağı Yok