Sayfaları Bulmanın Birden Çok Yolu: ADA

Tek kapı yetmez

"Hacimli atık toplama" arayan bir sakin Hizmetler menüsüne göz atabilir, aramaya yazabilir ya da A'dan Z'ye listeyi tarayabilir. Bilişsel engeli olan biri menüleri öngörmeyi zor bulup aramayı tercih edebilir. Ekran okuyucu kullanan biri site haritasını derin bir menüden daha hızlı bulabilir. Birkaç yol sunmak, insanların kendilerine uyanı kullanmasını sağlar.

2.4.5 başarı ölçütü, bir web sayfası kümesi içinde bir sayfayı bulmak için birden fazla yol sunulmasını ister; sayfa bir sürecin sonucu ya da adımıysa istisnadır. Bir ödeme onayı ya da arama sonuçları sayfasına yalnızca önceki adım tamamlanarak ulaşılabilir; bu nedenle muaftır.

"Web sayfası kümesi", tek bir yazar ya da kuruluştan, ortak amaçlı sayfalar topluluğudur ve farklı dil sürümleri ayrı küme sayılır. Olağan yaklaşım, W3C'nin listesinden iki ya da daha fazla tekniği birleştirmektir: ilgili sayfalara bağlantılar (G125), içindekiler, site haritası, arama işlevi, tüm sayfaların bağlantı listesi ya da ana sayfadan tüm sayfalara bağlantılar.

Tek yol sunan siteler

• Büyük bir menüye güvenen ve araması olmayan ilçe siteleri.
• Sayfalarına yalnızca bir üst sayfadan ulaşılan müdürlük mikro siteleri.
• Araması olan ama hizmet ya da konum listesi bulunmayan kütüphane ve park sayfaları.
• Sekme çubuğu olan ve bir işlevi aramanın yolu bulunmayan uygulamalar.

Kurumlarda genellikle parçalar zaten vardır; yalnızca her sayfada sunulmazlar.

A'dan Z'ye dizin

Alfabetik bir hizmet listesi, neye ihtiyacı olduğunu bilen ama hangi müdürlüğün ilgilendiğini bilmeyen sakinler için iyi çalışan ikinci bir yoldur.

<nav aria-label="Ana gezinme">
  <a href="/services">Hizmetler</a>
  <a href="/departments">Müdürlükler</a>
</nav>
<!-- belirli hizmetlere başka yol yok -->

<nav aria-label="Ana gezinme">
  <a href="/services">Hizmetler</a>
  <a href="/departments">Müdürlükler</a>
  <a href="/services/a-z">Hizmetler A'dan Z'ye</a>
</nav>

<!-- /services/a-z -->
<h1>Hizmetler A'dan Z'ye</h1>
<nav aria-label="Harfe git">
  <a href="#b">B</a> <a href="#r">R</a> <a href="#y">Y</a>
</nav>
<h2 id="b">B</h2>
<ul><li><a href="/services/building-permits">Bina ruhsatları</a></li></ul>

Ekmek kırıntısı ve ilgili bağlantılar

Hiyerarşide geriye doğru bir iz gibi ilgili sayfalardan gelen bağlantılar da başka bir yoldur.

<h1>Özel etkinlik izni</h1>
<p>…</p>

<nav aria-label="Sayfa yolu">
  <ol>
    <li><a href="/">Ana sayfa</a></li>
    <li><a href="/departments/parks">Park ve Rekreasyon</a></li>
    <li aria-current="page">Özel etkinlik izni</li>
  </ol>
</nav>
<h1>Özel etkinlik izni</h1>
<aside aria-labelledby="rel">
  <h2 id="rel">İlgili hizmetler</h2>
  <ul><li><a href="/services/park-reservations">Park rezervasyonları</a></li></ul>
</aside>

İçeriğe uygun arama

Arama en yaygın ikinci yoldur. Kapsamlı arama, meclis kayıtları gibi büyük belge koleksiyonu olan siteler için uygundur.

<input type="text" placeholder="Ara">

<form role="search" action="/search">
  <label for="q">Sitede ara</label>
  <input id="q" type="search" name="q">
  <label for="scope">Arama alanı</label>
  <select id="scope" name="scope">
    <option value="all">Tüm site</option>
    <option value="docs">Meclis belgeleri</option>
    <option value="services">Hizmetler</option>
  </select>
  <button type="submit">Ara</button>
</form>

Çok sayıda hedefi olan uygulamalar

WCAG 2.4.5 web sayfası kümeleri için yazılmıştır; bu yüzden yerel uygulamalarda bir zorunluluktan çok kullanılabilirlik önerisidir. Çok ekranlı bir uygulama yine de sekme çubuğuna ek olarak aramadan yarar görür. SwiftUI:

NavigationStack {
    ServiceList()
}

NavigationStack {
    ServiceList()
        .searchable(text: $query, prompt: "Hizmet ara")
}

Jetpack Compose:

Scaffold(bottomBar = { ServiceTabs() }) { ServiceList() }

Scaffold(
    topBar = {
        OutlinedTextField(
            value = query, onValueChange = { query = it },
            label = { Text("Hizmet ara") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
            keyboardActions = KeyboardActions(onSearch = { runSearch(query) })
        )
    },
    bottomBar = { ServiceTabs() }
) { ServiceList() }

Nasıl test edilir

1. Sitenin derinlerinden beş sayfa seçin. Her biri için ona ulaşmanın tüm yollarını listeleyin: menü, arama, A'dan Z'ye, ilgili bağlantılar, ana sayfa bağlantıları.
2. Her sayfa için en az iki yol olduğunu kontrol edin. İyi uygulama olarak bunlar yalnızca ana sayfadan değil her sayfadan sunulmalıdır.
3. Bir sürecin adımı olan sayfaları, örneğin bir başvuru adımını ya da sonuç sayfasını işaretleyin. Bunlar muaftır.
4. Her dil sürümünü ayrı ayrı kontrol edin.

Bir tarayıcı, hiçbir bağlantının işaret etmediği yetim sayfaları gösterebilir; bu, tek yolu olan ya da hiç yolu olmayan sayfaları fark etmenin hızlı bir yoludur.

Hatalar ve yayın öncesi liste

• Aramayı yalnızca ana sayfada sunmak (tek başına ihlal değil, ama her sayfada sunmak daha iyi uygulamadır).
• Altbilgideki ana sayfa bağlantısını ikinci yol saymak.
• Aynı sayfalara aynı şekilde ulaşan iki menüyü ayrı yol saymak.
• İstisnanın sıradan içeriğe değil, süreç adımlarına uygulandığını unutmak.

Bir sürecin adımı olmayan her sayfaya gezinme ile arama ya da dizin gibi en az iki farklı yolla ulaşılabiliyorsa yayına alın.

DOJ rehberinin saydığı engeller için yaygın engeller sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.5: Multiple Ways (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.