Odak Sırası ve ADA

Anlamı koruyan bir sıra

2.4.3 başarı ölçütü, bir sayfada sırayla gezinilebiliyorsa ve bu sıra anlamı ya da işletimi etkiliyorsa geçerlidir. Odaklanabilir bileşenler, anlamı ve işletilebilirliği koruyan bir sırayla odak almalıdır.

Sıranın görsel yerleşimle birebir aynı olması gerekmez ve sayfa anlaşılır ve işletilebilir kaldığı sürece okuma sırasından farklı olabilir. Yapmaması gereken, sayfadaki ilişkileri bozan bir yere atlamaktır; örneğin bir alandan, kalan alanlardan önce "Gönder" düğmesine geçmek ya da görünmeyen içeriğin içine inmek.

Ağaç ya da sekme listesi gibi bileşik bir bileşenin içindeki ok tuşu hareketi, bu ölçüt kapsamında sıralı gezinme sayılmaz.

Kamu sitelerinde sıra nerede bozulur

• Sayfanın sonuna, formdan uzağa eklenen hata özetleri.
• Kapalıyken sekme sırasında kalan ekran dışı menüler ve çekmeceler.
• İçeriği değiştirip odağı hiçbir yerde bırakan çok adımlı başvurular.
• Belgenin sonuna, onu açan denetimden uzağa eklenen açılır içerik.

Okul kaydı ve izin başvuruları çok adımlıdır; bu, bu sorunları sık ve maliyetli yapar: bir kişi odak sayfanın yanlış yerindeyken formun yarısını doldurabilir.

Hata özetini odağın bulabileceği yere koyun

Başarısız bir gönderimden sonra sorunların özeti formdan önce gelmeli ve odağı almalıdır.

form.addEventListener("submit", e => {
  const errors = validate();
  if (errors.length) {
    e.preventDefault();
    document.body.append(buildSummary(errors));   // formun çok altında
  }
});

form.addEventListener("submit", e => {
  const errors = validate();
  if (errors.length) {
    e.preventDefault();
    const summary = buildSummary(errors);
    summary.tabIndex = -1;
    form.before(summary);
    summary.focus();
  }
});

Kapalı çekmeceler sekme sırasından çıkmalı

Bir çekmeceyi dönüşümle ekran dışına almak, onu klavye gezintisinden çıkarmaz. Odak görünmeyen bağlantılara inebilir.

.drawer { transform: translateX(-100%); }
.drawer.open { transform: none; }

.drawer { transform: translateX(-100%); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
/* ya da kapalıyken: <aside class="drawer" inert> */

Çok adımlı formlar: odağı içerikle birlikte taşıyın

Bir adım değiştirildiğinde odak yeni adımın başlığına gitmeli; böylece sonraki Tab ilk alana ulaşır.

nextBtn.addEventListener("click", () => {
  stepContainer.innerHTML = renderStep(2);   // odak kayboluyor
});

nextBtn.addEventListener("click", () => {
  stepContainer.innerHTML = renderStep(2);
  const h = stepContainer.querySelector("h2");
  h.tabIndex = -1;
  h.focus();
});

Mobil uygulamalarda gezinme sırası

Ekran okuyucular ve anahtar erişimi, görsel yerleşimden ayrışabilen anlamsal sırayı izler. Aşağıdaki Compose özellikleri Compose UI 1.5 ya da üstünü gerektirir ve deneysel API izni isteyebilir. SwiftUI:

ZStack {
    PayButton()
    AmountDue(amount)
}

ZStack {
    PayButton().accessibilitySortPriority(1)
    AmountDue(amount).accessibilitySortPriority(2)
}
.accessibilityElement(children: .contain)

Jetpack Compose:

Box {
    PayButton(onPay, Modifier.align(Alignment.BottomEnd))
    AmountDue(amount)
}

Box(Modifier.semantics { isTraversalGroup = true }) {
    AmountDue(amount, Modifier.semantics { traversalIndex = 0f })
    PayButton(
        onPay,
        Modifier.align(Alignment.BottomEnd)
            .semantics { traversalIndex = 1f }
    )
}

Nasıl test edilir

1. Her şablonda baştan Tab'a basarak ilerleyin. Odak, sayfayı okuyup tamamlayacağınız sırayla mı ilerliyor?
2. Her menüyü, iletişim kutusunu ve çekmeceyi açın. Açılınca odak içine geçiyor mu ve (iyi uygulama olarak) kapanınca tetikleyiciye dönüyor mu?
3. Hatalı bir form gönderin ve adımları değiştirin. Odak nereye iniyor?
4. Odağın asla gizli ya da ekran dışı bir şeye inmediğinden emin olun.

Sık yapılan hatalar, sayfayı yeniden sıralayan pozitif tabindex değerleri ve kaynak sırası farklı kalırken öğeleri görsel olarak yeniden sıralayan CSS'tir. Araçlar pozitif tabindex'i işaretleyebilir, ama sıranın anlamlı olup olmadığına karar veremez.

Yayına almadan önce kontrol listesi

• Tab sırası her şablonda sayfanın anlamını ve işletilebilirliğini koruyor.
• Yeni içerik, onu doğuran denetimin yanında beliriyor ya da odak alıyor.
• Kapalı ya da gizli içerik odaklanabilir değil.
• Adım değişiklikleri ve hata özetleri odak alıyor.

Mobil ekranlarda sırayı yalnızca bakarak değil, bir ekran okuyucu açıkken gözden geçirin. Title II kuralının nasıl uygulandığı için mobil uygulamalar sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.3: Focus Order (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.