Başlıklar, Etiketler ve ADA

Yön gösteren sözcükler

Başlıklar insanların taramasını ve ekran okuyucu kullanıcılarının bölümden bölüme atlamasını sağlar. Etiketler ne yazılacağını ya da seçileceğini söyler. Üç alanın hepsi "Tarih" diye etiketlenmişse ya da bölümler "Bilgi" ve "Diğer" diye adlandırılmışsa, insanlar tahmin etmek zorunda kalır.

2.4.6 başarı ölçütü, başlıkların ve etiketlerin konuyu ya da amacı tanımlamasını ister. Yalnızca başlık ya da etiket varsa geçerlidir; bunları eklemenizi şart koşmaz. Uygun bir ipucuysa kısa bir sözcük geçebilir; arama alanının yanındaki büyüteç gibi, anlamı bağlamda yaygın olarak anlaşılan bir simge de etiket işlevi görebilir.

İlgili ölçütler diğer parçaları kapsar: doğru işaretleme için 1.3.1, girdi etiketleri için 3.3.2, adların nasıl sunulduğu için 4.1.2. Bu ölçüt sözcüklerle ilgilidir.

Kamu formlarında belirsiz etiketler

• "Tarih" ya da "Açıklama" adlı birkaç alanı olan olay bildirim formları.
• "Hoş geldiniz", "İleri" ve "Son" gibi başlıkları olan kayıt sayfaları.
• "Diyalog" ya da "Mesaj" etiketli iletişim kutuları.
• Ne olacağına dair ipucu vermeyen "Git" ya da "Tamam" etiketli düğmeler.

Etkilenenler arasında başlıklarla ya da form alanları listesiyle gezinenler ve bir hizmeti yılda yalnızca bir kez kullanıp form dolduran herkes vardır.

Hangi tarih olduğunu söyleyin

Bir formda aynı türden birkaç alan varsa, her etiket hangisi olduğunu söylemelidir.

<label for="d1">Tarih</label> <input id="d1" type="date">
<label for="d2">Tarih</label> <input id="d2" type="date">
<label for="d3">Tarih</label> <input id="d3" type="date">

<label for="d1">Olay tarihi</label> <input id="d1" type="date">
<label for="d2">Hasarı fark ettiğiniz tarih</label> <input id="d2" type="date">
<label for="d3">Tercih ettiğiniz denetim tarihi</label> <input id="d3" type="date">

Bir şey söyleyen başlıklar

Başlık, ardından gelenleri bir sakinin kullanacağı sözcüklerle tanımlamalıdır.

<h2>Hoş geldiniz!</h2>
<h2>İleri</h2>
<h2>Son</h2>

<h2>Kimler kayıt olabilir</h2>
<h2>Getirilecek belgeler</h2>
<h2>Son tarihler ve ücretler</h2>

İletişim kutusu başlıkları ve düğme metni

İletişim kutusunun adı başlığı olmalı, düğme de ne yaptığını söylemelidir.

<dialog aria-label="Diyalog">
  <p>Rezervasyon iptal edilsin mi?</p>
  <button>Git</button>
</dialog>

<dialog aria-labelledby="dlg-title">
  <h2 id="dlg-title">Rezervasyonunuzu iptal edin</h2>
  <button type="button">Evet, rezervasyonu iptal et</button>
  <button type="button">Rezervasyonu koru</button>
</dialog>

Uygulamalarda etiketler ve bölüm başlıkları

SwiftUI:

Form {
    TextField("Bilgi", text: $incidentDate)
}

Form {
    Section("Olay ayrıntıları") {
        TextField("Olay tarihi", text: $incidentDate)
    }
}

Jetpack Compose:

OutlinedTextField(
    value = date, onValueChange = { date = it },
    label = { Text("Alan") }
)

Text("Olay ayrıntıları", Modifier.semantics { heading() })
OutlinedTextField(
    value = date, onValueChange = { date = it },
    label = { Text("Olay tarihi (GG.AA.YYYY)") }
)

Nasıl test edilir

1. Başlıkları bir ekran okuyucu ya da tarayıcı eklentisiyle listeleyin. Bir taslak gibi okuyun: her biri bölümünün neyi kapsadığını söylüyor mu?
2. Form alanlarını listeleyin. Etiketleri tek başına okuyun: hangi alanın hangisi olduğunu anlayabiliyor musunuz?
3. Düğme ve iletişim kutusu metinlerini bağlam dışında okuyun.
4. Ekranda görünen etiketin, ekran okuyucunun okuduğu adla eşleştiğini kontrol edin.

Bir araç size bir etiketin var olduğunu söyleyebilir. Anlamlı olup olmadığını yalnızca bir insan söyleyebilir.

Hatalar ve yayın öncesi liste

• Farklı alanlar için aynı etiket metnini kullanmak.
• Etiket genel kalırken bir alanı açıklamak için yerleşime güvenmek.
• Başlıkları söyledikleri şeye değil, görünüşlerine göre seçmek.
• Anlamı yaygın olarak anlaşılmayan, yalnızca simgeli düğmeler.

Her başlık, alan etiketi ve düğme tek başına okunduğunda konusunu ya da amacını tanımlıyorsa yayına alın. İncelemeye formlarla başlamak iyi bir yoldur.

WCAG 2.1 AA ve ADA sayfasına da bakın.

Kaynaklar

• Understanding SC 2.4.6: Headings and Labels (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.