2.4.3 Odak Sırası

Bu kural ne anlama geliyor

WCAG 2.4.3, kullanıcılar bir sayfada sıralı olarak gezindiginde — genellikle Tab tuşu kullanarak — öğelerin odak aldigi siralaminin mantıklı ve anlamlı olması gerektiğini belirtir. Odak sırası görsel okuma sırasını takip etmeli ve içerik öğeleri arasındaki iliskileri korumalıdır.

Bu kriter tüm etkileşimli öğeler için geçerlidir: bağlantılar, düğmeler, form alanları ve özel bileşenler. DOM sırası görsel sunumla eşleşmelidir, böylece klavye gezinmesi doğal ve öngörülebilir hissedilir.

Neden önemlidir

Klavye kullanıcıları web sayfalarında gezinmek ve işlem yapmak için öngörülebilir bir odak sırasına güvenir. Odak beklenmedik şekilde atlayınca — ana içerikten alt bilgiye, sonra tekrar kenar çubuğuna — kullanıcılar yönünü kaybeder ve önemli içerik veya denetimleri kaçırabilir. Bu özellikle odağın nereye taştığını kolayca takip edemeyen bilişsel engelli veya az gören kullanıcılar için zorlayıcıdır.

Mantıklı bir odak sırası ayrıca form iş akışlarının doğal ilerlemesini, çok adımlı süreçlerin doğru çalışmasını ve kalıcı iletişim kutularının odağı doğru şekilde yakalamasını sağlar. Bozuk odak sırası, yalnızca klavye kullanan kişiler için tüm özellikleri kullanılamaz hale getirebilir.

İlgili axe-core kuralları

• focus-order-semantics — Odak sırasındaki öğelerin uygun bir role sahip olmasını doğrular.
• tabindex — tabindex nitelik değerlerinin 0'dan büyük olmamasını doğrular, çünkü bu doğal odak sırasını geçersiz kılar.

Nasıl test edilir

1. Farenizi bağlantısını kesin ve sayfanın tamamında yalnızca Tab ve Shift+Tab tuşlarıyla gezinin.
2. Odağın etkileşimli öğeler arasında mantıklı, görsel okuma sırasında (genellikle soldan sağa, yukarıdan aşağıya) ilerlediğini doğrulayın.
3. Hiçbir etkileşimli öğenin atlanmadığını veya sıra dışı odak almadığını kontrol edin.
4. Formları test ederek odağın alanlar arasında beklenen sırada hareket ettiğini onaylayın.
5. Kalıcı iletişim kutularını ve diyalog pencerelerini açın — odağın içeride tutulduğunu ve kapatıldığında tetikleyici öğeye döndüğünü doğrulayın.

• axe-core çalıştırın ve tabindex > 0 kullanılan tabindex ihlallerini kontrol edin.
• Tarayıcının erişilebilirlik denetçisini kullanarak sekme sırası katmanını inceleyin.

Nasıl düzeltilir

Birincil çözüm, DOM sıranızın görsel sıranızla eşleşmesini sağlamaktır. Pozitif tabindex değerlerinden kaçının ve görsel düzeni yeniden sıralanan CSS özelliklerinde dikkatli olun.

Doğru DOM sırası ve CSS görsel yeniden sıralama

<!-- Yanlış: CSS nedeniyle görsel sıra DOM sırasından farklı -->
<div style="display: flex; flex-direction: row-reverse;">
  <button>Görsel üçüncü, DOM'da birinci</button>
  <button>Görsel ikinci, DOM'da ikinci</button>
  <button>Görsel birinci, DOM'da üçüncü</button>
</div>

<!-- Doğru: DOM sırası görsel sırayla eşleşiyor -->
<div style="display: flex;">
  <button>Birinci</button>
  <button>İkinci</button>
  <button>Üçüncü</button>
</div>

Pozitif tabindex kullanmayın

<!-- Yanlış: Pozitif tabindex doğal olmayan sıra dayatıyor -->
<input tabindex="3" placeholder="İsim">
<input tabindex="1" placeholder="E-posta">
<input tabindex="2" placeholder="Telefon">

<!-- Doğru: Doğal DOM sırası, tabindex gerekmez -->
<input placeholder="İsim">
<input placeholder="E-posta">
<input placeholder="Telefon">

<!-- Kabul edilebilir: tabindex="0" doğal sıraya ekler -->
<div role="button" tabindex="0">Özel düğme</div>

<!-- Kabul edilebilir: tabindex="-1" sekme sırasından çıkarır -->
<div id="modal-kapsayıcı" tabindex="-1">...</div>

Modal odak tuzağı

// Modal iletişim kutusu içinde odağı yakalama
function odakYakala(modalOgesi) {
  const odaklanabilir = modalOgesi.querySelectorAll(
    'a[href], button:not([disabled]), input:not([disabled]),\
     select:not([disabled]), textarea:not([disabled]),\
     [tabindex]:not([tabindex="-1"])'
  );
  const ilk = odaklanabilir[0];
  const son = odaklanabilir[odaklanabilir.length - 1];

  modalOgesi.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;
    if (e.shiftKey && document.activeElement === ilk) {
      e.preventDefault();
      son.focus();
    } else if (!e.shiftKey && document.activeElement === son) {
      e.preventDefault();
      ilk.focus();
    }
  });

  ilk.focus();
}

Sık yapılan hatalar

• Pozitif tabindex değerleri (tabindex="1", tabindex="2" vb.) kullanmak — bu doğal DOM sırasını geçersiz kılar ve kafa karıştırıcı gezinme oluşturur.
• CSS flexbox sırası, grid yerleşimi veya float kullanarak DOM sırasını eşleştirmeden öğeleri görsel olarak yeniden sıralamak.
• Mevcut odak konumunun üstüne dinamik içerik ekleyerek kullanıcıların yerini kaybetmesine neden olmak.
• Modal iletişim kutularında odağı yakalamamak, kullanıcıların katman arkasındaki gizlenmiş içeriklere sekme ile geçmesine izin vermek.
• Bir modal veya açılır pencere kapatıldığında odağı tetikleyici öğeye döndürememek.
• tabindex nitelikleri nedeniyle hala odaklanabilir olan öğeleri gizlemek için display:none kullanmak.