Atlama Bağlantıları ve Bölgeler: ADA

Kırk Tab sorunu

Bir ilçe sitesi bir yardımcı çubukla, bir arama kutusuyla, 60 bağlantılı bir gezinme menüsüyle ve bir dil seçiciyle açılır. Gören fare kullanıcıları bunların hepsini gözle geçer. Klavye kullanıcısı ise benzersiz bir şeye ulaşmadan önce her sayfada onlarca kez Tab'a basar.

2.4.1 başarı ölçütü, birden çok sayfada tekrarlanan içerik bloklarını atlamak için bir mekanizma sunulmasını ister. Mekanizma bir atlama bağlantısı, başlıklar, bölgeler ya da daraltılabilir gruplar olabilir. Ölçüt tek tek bağlantıları ya da kısa ifadeleri değil blokları kapsar ve aynı blokları tekrarlayan bir sayfa kümesi varsayar. Mekanizma sayfaya yazılabilir ya da tarayıcıdan veya yardımcı teknolojiden gelebilir; ancak her kullanıcının böyle bir özelliği olduğunu varsayamayacağınız için sağladığınız atlama bağlantıları ya da yapı daha güvenli yoldur.

Kamu siteleri nerede zorlanır

• Sekme sırasında her zaman açık duran büyük mega menüler.
• Sonuçlardan önce uzun bir filtre kenar çubuğu bulunan dava arama ve kütüphane katalog sonuç sayfaları.
• Her rotada sayfanın üstünde tekrarlanan uyarı çubukları ve çerez çubukları.
• Ekran okuyucuya hepsi aynı gelen birden çok <nav> bölgesi olan sayfalar.

Kurumlar çoğunlukla tek bir ortak şablon kullanır; bu iyi haberdir: başlıktaki tek bir düzeltme her sayfayı onarır.

Yararlı bir yere inen atlama bağlantısı

İlk odaklanabilir öğe, tekrarlanan içeriğin ötesine atlayan bir bağlantı olmalıdır. Sonuç sayfasında ikinci bir bağlantı filtre kenar çubuğunu atlayabilir. Hedef var olmalı ve odaklanabilir olmalıdır.

<body>
  <nav>… 60 bağlantı …</nav>
  <aside>… 25 filtre …</aside>
  <section>…sonuçlar…</section>
</body>

<body>
  <a class="skip" href="#results">Arama sonuçlarına geç</a>
  <nav aria-label="Ana gezinme">… 60 bağlantı …</nav>
  <aside aria-label="Filtreler">… 25 filtre …</aside>
  <section id="results" tabindex="-1">…sonuçlar…</section>
</body>

<style>
  .skip { position: absolute; top: -3rem; left: 0.5rem; }
  .skip:focus { top: 0.5rem; background: #fff; color: #000;
                padding: 0.5rem 1rem; z-index: 1000; }
</style>

Bunun yerine bloğu daraltın

Bağlantı olmadan çalışan bir teknik, tekrarlanan bloğu bir düğmenin arkasına daraltmaktır. Kapalı içerik sekme sırasının dışındadır; bu yüzden tek bir Tab basışı onu geçer.

<nav id="site-menu">
  <a href="/a">…</a> <a href="/b">…</a> <!-- 60 bağlantı hep odaklanabilir -->
</nav>

<button type="button" aria-expanded="false"
        aria-controls="site-menu" id="menu-btn">Menü</button>
<nav id="site-menu" aria-label="Ana gezinme" hidden>
  <a href="/a">…</a> <a href="/b">…</a>
</nav>
<script>
  const menuBtn = document.getElementById("menu-btn");
  const siteMenu = document.getElementById("site-menu");
  menuBtn.addEventListener("click", () => {
    const open = menuBtn.getAttribute("aria-expanded") === "true";
    menuBtn.setAttribute("aria-expanded", String(!open));
    siteMenu.hidden = open;
  });
</script>

Etiketli bölgeler

Ekran okuyucu kullanıcıları bölgeler arasında atlayabilir. Bir sayfada aynı türden birden fazla bölge varsa, ayırt edilebilmeleri için her birine ayrı bir etiket verin. Bu, 2.4.1'in kendisinin bir ihlali değil, iyi uygulamadır.

<nav>…ana site bağlantıları…</nav>
<nav>…Ana sayfa / Müdürlükler / Parklar…</nav>

<nav aria-label="Ana gezinme">…ana site bağlantıları…</nav>
<nav aria-label="Sayfa yolu">…Ana sayfa / Müdürlükler / Parklar…</nav>

Mobil uygulamalar

Yerel ekranlar her ekranda büyük bir bağlantı bloğunu nadiren tekrarlar; bu yüzden bu ölçüt çoğunlukla web içeriğiyle ilgilidir. Bir uygulama tekrarlanan gezinme gömüyorsa, ekran okuyucu kullanıcılarının onu geçebilmesi için başlık özelliklerini ve gruplamayı kullanın.

Nasıl test edilir ve ne zaman yayına alınır

1. Bir sayfayı yükleyin, bir kez Tab'a basın. Bir atlama bağlantısı ya da daraltılmış menü var mı? Odaklanınca görünür oluyor mu?
2. Etkinleştirin. Odak ana içeriğe iniyor mu ve sonraki Tab içindeki ilk denetime geçiyor mu?
3. Bir ekran okuyucuyla bölgeleri ve başlıkları listeleyin. Aynı türden birden çok bölge etiketlenmiş mi?
4. Aynısını sonuç sayfasında ve bannerlı sayfalarda tekrarlayın.

Sık yapılan hatalar: atlama bağlantısında display: none, var olmayan bir hedef kimliği ve sayfayı kaydıran ama odağı taşımayan bir bağlantı.

Tekrarlanan başlık, menü ve filtreler her şablonda ilk Tab basışı ya da daraltılmış bir denetimle atlanabiliyorsa yayına alın. DOJ'un saydığı engeller için yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.1: Bypass Blocks (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.