ADA ve her sayfada aynı menü sırası

Bir kez öğrenilebilen gezinme

Bir sayfada ana menü Hizmetler, Birimler, İletişim şeklinde ve sonraki sayfada Birimler, İletişim, Hizmetler şeklinde dizilmişse her ziyaret bir aramayla başlar. WCAG 2.1, 3.2.3 başarı ölçütü (AA düzeyi), bir sayfa kümesi içinde birden çok sayfada tekrar eden gezinme mekanizmalarının her seferinde aynı göreli sırada bulunmasını ister; kullanıcı kendisi değiştirmedikçe.

"Göreli sıra" anahtar ifadedir. Mekanizmaya yeni öğe eklenebilir, alt menüler açılabilir ve derin sayfalarda ikincil gezinme belirebilir. Sabit kalması gereken, tekrar eden öğelerin sırasıdır. Kullanıcılar sırayı uyarlanabilir teknoloji ya da tercihlerle kendileri de değiştirebilir; bu ihlal değildir.

Kime yarar?

• "Fatura öde" bağlantısının üçüncü olduğunu öğrenip doğrudan oraya Tab yapan ekran okuyucu kullanıcılarına.
• Büyütme altında öğeleri konumuyla bulan az gören kişilere.
• Öngörülebilir bir yerleşime ve tekrara dayanan bilişsel engelli kişilere.

ADA açısı: parça parça büyüyen belediye siteleri

Belediye siteleri çoğu zaman bir ana siteden, bir ruhsat sisteminden, bir kütüphane kataloğundan ve bir su faturası portalından birleştirilir; her birini ayrı bir ekip yapmıştır. Üst menü benzerdir ama aynı değildir ve öğelerin sırası kayar. Belediye ana sayfasından "Fatura öde" portalına geçen vatandaş farklı sırada farklı bir menü görür; ekran okuyucu kullanıcısı sayfayı yeniden öğrenmek zorunda kalır. WCAG bir "sayfa kümesi" içinde geçerlidir ve tek bir kurumun hizmetleri genellikle tek küme sayılır. Üçüncü taraf bir portal sunduğunuz hizmetin parçasıysa tedarikçiler ve üçüncü taraf içerik sayfasına bakın.

Web kodu: menüler, altbilgiler, arama, alt gezinme

Her şablona kopyalanmış ana menü

<!-- anasayfa.html -->
<nav><a href="/hizmetler">Hizmetler</a><a href="/birimler">Birimler</a><a href="/iletisim">İletişim</a></nav>

<!-- ruhsatlar.html -->
<nav><a href="/birimler">Birimler</a><a href="/iletisim">İletişim</a><a href="/hizmetler">Hizmetler</a></nav>

<!-- layout.html, her şablonda dahil edilir -->
<header>{% include "ana-menu.html" %}</header>

<!-- ana-menu.html -->
<nav aria-label="Ana menü">
  <a href="/hizmetler">Hizmetler</a>
  <a href="/birimler">Birimler</a>
  <a href="/iletisim">İletişim</a>
</nav>

İçerik yönetiminde sayfaya göre sıralanan altbilgi bağlantıları

altbilgiBaglantilari: ["Gizlilik", "Erişilebilirlik", "Site haritası"]   // sayfa A
altbilgiBaglantilari: ["Site haritası", "Gizlilik", "Erişilebilirlik"]   // sayfa B

// site-ayarlari.json, tüm sayfalar için tek kaynak
{ "altbilgiBaglantilari": ["Gizlilik", "Erişilebilirlik", "Site haritası"] }

Üst menünün sırasını koruyan alt gezinme

<!-- /birimler/parklar sayfasında -->
<nav>
  <a href="/birimler/parklar/etkinlikler">Etkinlikler</a>
  <a href="/iletisim">İletişim</a>
  <a href="/hizmetler">Hizmetler</a>
</nav>

<!-- /birimler/parklar sayfasında -->
<nav>
  <a href="/hizmetler">Hizmetler</a>
  <a href="/birimler">Birimler</a>
  <ul>
    <li><a href="/birimler/parklar/etkinlikler">Etkinlikler</a></li>
  </ul>
  <a href="/iletisim">İletişim</a>
</nav>

Mobil kod: sekme çubukları

// SwiftUI: sekme sırası hangi ekranın kurduğuna bağlı
TabView {
  if anaEkranMi { AnaView().tabItem { Label("Ana sayfa", systemImage: "house") } }
  RaporlarView().tabItem { Label("Raporlar", systemImage: "doc") }
  if !anaEkranMi { AnaView().tabItem { Label("Ana sayfa", systemImage: "house") } }
}

// SwiftUI: tek sıra kaynağı (sekme.view ve sekme.label, uygulamanın UygulamaSekmesi üzerinde tanımladığı yardımcılardır)
enum UygulamaSekmesi: CaseIterable { case ana, raporlar, hesap }

TabView {
  ForEach(UygulamaSekmesi.allCases, id: \.self) { sekme in
    sekme.view.tabItem { sekme.label }
  }
}

// Jetpack Compose: öğeler ekran başına ayrı kuruluyor
NavigationBar {
  if (anaEkranda) NavigationBarItem(...AnaSayfa...)
  NavigationBarItem(...Raporlar...)
  if (!anaEkranda) NavigationBarItem(...AnaSayfa...)
}

// Jetpack Compose
val hedefler = listOf(AnaSayfa, Raporlar, Hesap)   // bir kez tanımlı

NavigationBar {
  hedefler.forEach { h ->
    NavigationBarItem(
      selected = suAnki == h,
      onClick = { git(h) },
      icon = { Icon(h.simge, contentDescription = null) },
      label = { Text(h.etiket) }
    )
  }
}

Test etme

1. Farklı şablonlardan bir sayfa örneği seçin: ana sayfa, bir hizmet sayfası, bir form, bir arama sonucu, bir hata sayfası.
2. Her birinde tekrar eden mekanizmaların (üst menü, altbilgi, arama, dil seçici, ekmek kırıntısı) öğelerini DOM sırasıyla ve görsel sırayla listeleyin.
3. Listeleri karşılaştırın. Her sayfada görünen öğeler aynı göreli sırayı korumalıdır. Fazladan öğelerin belirmesi ölçütü bozmaz.
4. Aynı hizmetin parçası olan alt siteleri ve portalları dahil edin.
5. Araçlar: bir tarayıcı robot birçok sayfadaki nav öğesinden bağlantı listelerini çıkarıp farkını alabilir. Sayfaların tek "küme" oluşturup oluşturmadığı bir yargı meselesidir.

Ne ters gider?

• Her sayfada "en çok ziyaret edilene" göre sıralanan menü öğeleri.
• Sağdan sola ya da mobil yerleşimlerin bir sayfada sırayı tersine çevirip diğerinde çevirmemesi.
• Aynı bağlantıların ana sayfada ve işlem sayfalarında üst bilgide farklı sırada olması.
• Bazı sayfalarda ilk, bazılarında son görünen sohbet veya erişilebilirlik araçları.

Yayına almadan önce

• Tekrar eden her gezinme bloğunu tek ortak kaynak üretiyor.
• Daha derin sayfalardaki öğeler aynı sıraya ekleniyor, asla yeniden karıştırılmıyor.
• İlgili alt siteler aynı menü sırasını izliyor.

Kaynaklar

• Understanding SC 3.2.3: Consistent Navigation (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.