ADA ve aynı işlev, aynı etiket

Aynı işi yapan aynı adı taşımalı

Aynı işi yapan düğmenin bir sayfada "Ara", başka sayfada "Bul" olarak adlandırılması, insanları bunun aynı işlev olup olmadığını düşünmek için durdurur. WCAG 2.1, 3.2.4 başarı ölçütü (AA düzeyi), bir sayfa kümesi içinde aynı işleve sahip bileşenlerin tutarlı biçimde tanımlanmasını ister. Buna metin etiketleri, erişilebilir adlar, alternatif metinler ve simgeler dahildir.

Tutarlı olmak her durumda birebir aynı olmak demek değildir. Etiket bağlama göre değişebilir; örneğin bir sayfada "4. sayfa", 5. sayfada "Önceki sayfa" gibi; yeter ki insanlar işlevin aynı olduğunu anlayabilsin. Farklı işlevli bileşenlerin, benzer görünseler ya da benzer etiket veya simge kullansalar bile tutarlı tanımlanması beklenmez.

Tanımanın önemi

• Ekran okuyucu kullanıcıları kontrol ve bağlantı adlarının zihinsel bir listesini oluşturur. Adı değişen kontrol yeni bir kontrol gibi görünür.
• Bilişsel ya da öğrenme engeli olanlar şeylerin nerede olduğunu ve ne yaptığını öğrenmek için tekrara güvenir.
• Ses girdisi kullananlar bir önceki sayfada öğrendikleri adı söyler.

Kamu portallarına uygulanışı (ADA açısı)

Birkaç sistemi büyütmüş bir belediyede aynı işlev için "Giriş yap", "Oturum aç", "Vatandaş girişi" ve "Hesabım" adları, ve her sitede Ara için farklı bir simge ile alternatif metin bir arada bulunur. Başvuru ve ödemeler insanların bu sistemler arasında hızlı geçmesini gerektirir. İlk çözüm, her ekibin kullandığı küçük bir ortak kontrol adı sözlüğüdür; Title II standardında (WCAG 2.1 A ve AA) bu ölçüt AA düzeyindedir. Bu işi düzenlemek için ilk adımlar sayfasına da bakın.

Kod örnekleri: giriş, arama, simgeler, ana sayfa bağlantısı

Portallar arasında giriş bağlantısı

<!-- ruhsat portalı -->  <a href="/giris">Giriş yap</a>
<!-- kütüphane portalı --> <a href="/oturum">Vatandaş girişi</a>
<!-- su portalı -->        <a href="/hesap">Hesabım</a>

<!-- her portal -->
<a href="/oturum-ac">Oturum aç</a>

Her sayfada farklı adlandırılan arama kontrolü

<!-- sayfa A -->
<button type="submit">Ara</button>
<!-- sayfa B -->
<button type="submit">Bul</button>
<!-- sayfa C -->
<button type="submit" aria-label="Sorgula"><svg>…</svg></button>

<!-- her sayfa -->
<button type="submit">Ara</button>

<!-- ya da simgeyle, her yerde aynı ad -->
<button type="submit" aria-label="Ara"><svg aria-hidden="true">…</svg></button>

Aynı işlev, farklı simge ve alternatif metin

<!-- sayfa A -->
<a href="/formlar/ruhsat.pdf"><img src="indir.svg" alt="Formu indir"></a>
<!-- sayfa B -->
<a href="/formlar/ruhsat.pdf"><img src="ok-asagi.svg" alt="Cihaza kaydet"></a>

<!-- her sayfa -->
<a href="/formlar/ruhsat.pdf"><img src="indir.svg" alt="Formu indir"></a>

Mobil kod: ortak bileşenler

// SwiftUI: her ekran kendi etiketini uyduruyor
Button { ara() } label: { Label("Durak bul", systemImage: "magnifyingglass") }
// başka yerde
Button { ara() } label: { Label("Sorgula", systemImage: "magnifyingglass") }

// SwiftUI: tek bileşen, tek etiket
struct AramaDugmesi: View {
  var eylem: () -> Void
  var body: some View {
    Button(action: eylem) {
      Label("Ara", systemImage: "magnifyingglass")
    }
  }
}

// Jetpack Compose
IconButton(onClick = aramaYap) {
  Icon(Icons.Default.Search, contentDescription = "Bul")      // ekran A
}
IconButton(onClick = aramaYap) {
  Icon(Icons.Default.Search, contentDescription = "Sorgula")  // ekran B
}

// Jetpack Compose
@Composable
fun AramaEylemi(aramaYap: () -> Unit) {
  IconButton(onClick = aramaYap) {
    Icon(Icons.Default.Search, contentDescription = stringResource(R.string.ara))
  }
}

Nasıl denetlenir?

1. Çok sayfada bulunan bileşenlerin envanterini çıkarın: arama, giriş, sepet ya da başvuru, dil seçici, yazdır, paylaş, yardım, iletişim, sayfalama, ekmek kırıntısı, sosyal bağlantılar.
2. Her biri için en az beş sayfada görünür etiketi, erişilebilir adı, alternatif metni ve simgeyi yazın.
3. Aynı işi farklı adla yapan her çifti ve farklı işler için kullanılan aynı simgeyi işaretleyin.
4. Aynı kontrolün PDF formlarındaki, web formlarındaki ve uygulamadaki etiketini karşılaştırın.
5. Araçlar: bağlantı ve düğme metnini dışa aktaran bir tarayıcı robot, href’e göre sıralayıp tek hedef için farklı etiketleri gösterebilir.

Tipik hatalar

• Her tedarikçi portalının kendi ifadesini korumasına izin vermek.
• Görünür etiketi değiştirip erişilebilir adı değiştirmemek; sayfalar arasında farklılaşırlar.
• Aynı işlev için farklı sayfalarda farklı simge veya alternatif metin kullanmak.
• Aynı kontrolü Türkçe sürümün farklı sayfalarında farklı çevirmek.

Yayına almadan önce

• Ortak bir kontrol adı listesi var ve ekipler onu kullanıyor.
• Aynı işlev her yerde aynı simgeyi ve alternatif metni kullanıyor.
• Aynı işi yapan kontroller tüm sayfa kümesi boyunca aynı erişilebilir adı taşıyor.

Kaynaklar

• Understanding SC 3.2.4: Consistent Identification (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.