Görünen etiketler ve sesli komutlar

Gördüğünü söyle: Adda Etiket fikri

Cihazı sesle kontrol eden kişiler ekrandaki etiketi okur ve söyler: "Rezervasyon yap’a tıkla". Yazılım, erişilebilir adı eşleşen bir kontrol arar. WCAG 2.1, 2.5.3 başarı ölçütü, görünür metin etiketi (ya da metin görseli) olan bileşenlerde erişilebilir adın görünür metni içermesini ister. Ad daha uzun olabilir. En iyi uygulama, adı görünür sözcüklerle başlatmaktır.

Büyük küçük harf ve çoğu noktalama yok sayılır; görünen "Ad:" etiketi "ad" adıyla eşleşir. Görünür metin etiketi olmayan kontrol bu ölçütün dışındadır, ancak 4.1.2 uyarınca yine de erişilebilir bir ada ihtiyaç duyar.

Görünen metin ile ad nasıl birbirinden ayrılır?

• Geliştirici daha "yardımcı" bir ifadeyle aria-label ekler ve görünen sözcüğü dışarıda bırakır. Nitelik, yardımcı teknoloji için görünür metnin yerini alır.
• Gizli metin görünen sözcüklerin önüne konur ("Sil", "Öğeyi kaldır, Sil" olur). Bu hâlâ geçebilir, ancak ses eşleşmesi en iyi görünen sözcükler başta olduğunda çalışır.
• Görünen metin bir kısaltma veya simgedir ve ad farklı bir şeyi hecelemektedir.
• "B", ">", "+" gibi sözcük değil simge olan işaretler bu ölçüt için etiket sayılmaz; işlevi anlatan bir ad verin.

Kamu sitelerinde görünümü (ADA açısından)

Kamu formları kısa düğme etiketleriyle doludur: Rezervasyon yap, Sorgula, Öde, Başvur, Yenile. Ekran okuyucu ya da ses kullanan biri bir şeyi duyar veya söyler, kontrolün adı başka olursa görev son adımda tıkanır. Bu, otomatik araçların geçti dediği (her düğmenin adı var) ama görünen etiketi söyleyen kişinin yanıt alamadığı bir noktadır. İlgili arka plan: WCAG 2.1 AA ve ADA.

Web kodu: kamp alanı, seçmen sorgusu, fatura ödeme

Kamp alanı rezervasyon düğmesi

<button aria-label="Yer ayırt">Rezervasyon yap</button>

<button>Rezervasyon yap</button>
<!-- veya, görünen sözcükle başlayan daha ayrıntılı bir ad: -->
<button aria-label="Rezervasyon yap, 12 numaralı kamp alanı">Rezervasyon yap</button>

Seçmen kaydı sorgulama

<label for="sk-posta">Posta kodu</label>
<input id="sk-posta" aria-label="Bölge numarası" inputmode="numeric">

<label for="sk-posta">Posta kodu</label>
<input id="sk-posta" inputmode="numeric" autocomplete="postal-code">

Adı görünen sözcüklerin yerini alan fatura bağlantısı

<a href="/ode" aria-label="Hesap bakiyesi">Faturayı öde</a>

<a href="/ode">
  Faturayı öde
  <span class="visually-hidden">4471 ile biten hesap için</span>
</a>

Mobil kod: SwiftUI ve Jetpack Compose

// SwiftUI
Button("Kitabı yenile") { yenile() }
  .accessibilityLabel("Ödüncü uzat")

// SwiftUI
Button("Kitabı yenile") { yenile() }
  .accessibilityLabel("Kitabı yenile, Çalıkuşu")

// Jetpack Compose
Button(
  onClick = { ayirt() },
  modifier = Modifier.semantics { contentDescription = "Kamp yeri tut" }
) { Text("Rezervasyon yap") }

// Jetpack Compose
Button(
  onClick = { ayirt() },
  modifier = Modifier.semantics { contentDescription = "Rezervasyon yap, kamp alanı 12" }
) { Text("Rezervasyon yap") }

Adı hiç geçersiz kılmazsanız iki platform da görünür metni kullanır; uyumun en basit yolu budur.

Ses ve ekran okuyucuyla denetim

1. Ses kontrolünü açın (iOS ve macOS’ta Ses Denetimi, Android’de Voice Access ya da masaüstünde Dragon) ve on kontrolün görünen etiketini aynen söyleyin. Her biri etkinleşmelidir.
2. Tarayıcının erişilebilirlik ağacında ya da ekran okuyucuyla erişilebilir adı inceleyin. Görünen sözcüklerin, tercihen başta, adın içinde yer aldığını doğrulayın.
3. Hem görünür metni olan hem de aria-label veya aria-labelledby taşıyan öğeleri kodda arayın ve ikisini gözle karşılaştırın.
4. Araçlar: otomatik kurallar bazı örüntülerde görünen metinle ad arasındaki uyuşmazlığı işaretleyebilir. Bunu karar değil ipucu sayın.

Yaygın hatalar

• Görünen etiketi "netlik için" aria-label içinde yeniden yazmak.
• Görünen sözcüğü uzun bir adın sonuna koymak; bu ses eşleşmesini daha az güvenilir yapar.
• Adda farklı bir sayı ya da birim kullanmak ("3 öğe" yerine "üç öğe").
• "(zorunlu)" veya biçim ipuçlarını etiketin parçası saymak. Addan çıkarılabilirler, ancak zorunlu olma durumu yardımcı teknolojiye yine de bildirilmelidir.

Yayına almadan önce

• Her görünür metin etiketi, kontrolün erişilebilir adının içinde yer alıyor.
• aria-label ile geçersiz kılma yalnızca görünür metinden sonra sözcük eklenen yerlerde var.
• Etiketleri en az bir platformda ses kontrolü açıkken yüksek sesle söylediniz.

Kaynaklar

• Understanding SC 2.5.3: Label in Name (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.