ADA ve form etiketleri ile yönergeleri

Ne yazılacağını açık etmek

Etiketi olmayan ya da yazmaya başlayınca kaybolan etiketi olan bir alan, insanları tahmin etmeye zorlar. WCAG 2.1, 3.3.2 başarı ölçütü, içerik kullanıcıdan girdi gerektirdiğinde etiket veya yönerge sağlanmasını ister. Understanding belgesinde "gerektirmek" gevşek yorumlanır: isteğe bağlı alanlar da girdi kabul ettiği için kapsamdadır.

• Her kontrolün bir etiketi olmalı; radyo grubundaki, onay kutusu kümesindeki veya birleşik kutudaki her seçeneğin de kendi etiketi olmalı.
• Girdinin olağandışı ya da katı bir biçimi varsa bunu bir yönergeyle söyleyin.
• Uzun yönergeler yalnızca alan odaktayken görünebilir; yeter ki insanlar onlara ulaşabilsin.
• Çok fazla metin de bir engeldir; her şeyi değil, yeterli bilgiyi hedefleyin.

Komşu ölçütler

Etiketin doğru kodlanıp bağlanması 1.3.1’e, erişilebilir ad 4.1.2’ye, ifadenin açık olup olmadığı 2.4.6’ya aittir. Bu ölçüt daha basit bir soru sorar: orada insana ne gireceğini söyleyen bir şey var mı?

ADA açısı: etiketsiz alanlar ve belirsiz yönergeler

DOJ rehberi, erişilemeyen formları yaygın engeller arasında sayar ve etiketsiz alanlar ile belirsiz yönergeleri özellikle belirtir. Kamu formları buna özellikle yatkındır: su faturası hesap sorgusunda yalnızca yer tutuculu alanlar, açıklanmamış yıldızlar, kimsenin belirtmediği tarih biçimleri, ortak sorusu uzak bir başlıkta kalan radyo düğmesi grupları. Genel bakış için yaygın engeller sayfasına bakın.

Kod: yer tutucular, gruplar, biçimler, zorunlu işaretleri

Etiket yerine kullanılan yer tutucu

<input name="abone" placeholder="Abone numarası">

<label for="abone">Abone numarası</label>
<input id="abone" name="abone" inputmode="numeric" placeholder="örn. 4471-0092">

Sorusu olmayan radyo grubu

<p>Ziyaret türü</p>
<input type="radio" name="ziyaret" id="z1"> <label for="z1">İlk başvuru</label>
<input type="radio" name="ziyaret" id="z2"> <label for="z2">Kontrol ziyareti</label>

<fieldset>
  <legend>Ziyaret türü</legend>
  <input type="radio" name="ziyaret" id="z1"> <label for="z1">İlk başvuru</label>
  <input type="radio" name="ziyaret" id="z2"> <label for="z2">Kontrol ziyareti</label>
</fieldset>

Kimsenin açıklamadığı katı biçim

<label for="kunye">Köpek kayıt künyesi</label>
<input id="kunye" name="kunye" pattern="[A-Z]{2}[0-9]{5}">

<label for="kunye">Köpek kayıt künyesi</label>
<p id="kunye-ipucu">İki büyük harf ve ardından beş rakam, örneğin AB12345.</p>
<input id="kunye" name="kunye" pattern="[A-Z]{2}[0-9]{5}" aria-describedby="kunye-ipucu">

Kod: SwiftUI ve Jetpack Compose

// SwiftUI
TextField("Parsel numarası", text: $parsel)   // yazınca etiket kaybolur

// SwiftUI
VStack(alignment: .leading) {
  Text("Parsel numarası")
  Text("Emlak vergisi bildiriminde yazar, örn. 12-345-678").font(.caption)
  TextField("12-345-678", text: $parsel)
    .accessibilityLabel("Parsel numarası")
}

// Jetpack Compose
OutlinedTextField(
  value = parsel, onValueChange = { parsel = it },
  placeholder = { Text("Parsel numarası") }
)

// Jetpack Compose
OutlinedTextField(
  value = parsel, onValueChange = { parsel = it },
  label = { Text("Parsel numarası") },
  supportingText = { Text("Emlak vergisi bildiriminde yazar, örn. 12-345-678") }
)

Nasıl denetlenir?

1. Sayfa normal kaydırılmışken her alana bakın. Ne gireceğini söyleyen görünür bir metin var mı?
2. Alana tıklayın ve yazmaya başlayın. Etiket görünür kalıyor mu?
3. Radyo düğmesi ve onay kutusu gruplarında seçenek etiketlerinin yanında ortak bir soru olup olmadığına bakın.
4. Kimsenin belirtmediği biçimleri, uzunluk sınırlarını ve zorunlu alanları arayın.
5. Araçlar: otomatik kurallar hiç etiketi olmayan alanları bulur. Yönergelerin yeterli olup olmadığını söyleyemez; bu yüzden formu tanımayan birine doldurtun.

Kamu formlarında görülen hatalar

• Tek etiket olarak yer tutucu metin.
• Biçim ipuçlarının gönderimden sonra, hata mesajında verilmesi.
• display:none ile gizlenen etiketler.
• Yalnızca üzerine gelince beliren bir araç ipucundaki yönergeler.

Yayına almadan önce

• Her girdinin yazarken de görünür kalan bir etiketi var.
• Olağandışı biçimler ve kısıtlar alandan önce belirtiliyor.
• Her radyo ve onay kutusu seçeneğinin kendi etiketi var; ortak soru için bir grup etiketi (fieldset ve legend) önerilir.

Kaynaklar

• Understanding SC 3.3.2: Labels or Instructions (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.