ADA ve metinle form hata mesajları

İnsanlara neyin ters gittiğini sözcüklerle söyleyin

Kırmızı çerçeveyle ve açıklamasız dönen bir form birçok kişiyi çaresiz bırakır: görme engelli biri bir şeyin başarısız olduğunu fark etmeyebilir, renk körü biri çerçeveyi göremeyebilir, herkes neyin yanlış olduğundan emin olmayabilir. WCAG 2.1, 3.3.1 başarı ölçütü, bir girdi hatası otomatik algılanırsa hatalı öğenin belirlenmesini ve hatanın kullanıcıya metinle açıklanmasını ister.

"Girdi hatası", hem boş bırakılmış zorunlu bilgiyi hem de yanlış biçimdeki ya da izin verilen değerlerin dışındaki bilgiyi kapsar. Mesajı nasıl göstereceğiniz size kalmış: alanın yanında satır içi, üstte bir özette ya da bir uyarıda. Renk ve simgeler metni destekleyebilir ama onun yerini alamaz. Sayfa bir değeri otomatik değiştirirse, örneğin bir sayıyı sınırlarsa, kullanıcıya bu da metinle bildirilmelidir.

Bu ölçütün bittiği yer

Hatanın nasıl düzeltileceğini söylemek 3.3.3’e aittir; ancak tek mesaj çoğu zaman ikisini de karşılar. Mesajın alanla programatik ilişkilendirilmesi büyük ölçüde 1.3.1 ve 4.1.2 gibi diğer ölçütlerin konusudur. Bu sayfa, hatanın hiç belirlenip belirlenmediğini ve metinle açıklanıp açıklanmadığını ele alır.

ADA açısından formların önemi

DOJ’un web erişilebilirliği rehberi, erişilemeyen formları, eksik hata uyarıları dahil, yaygın engeller arasında sayar. Bir sürücü belgesi randevusu, okul kayıt dosyası ya da ilçe sağlık merkezi randevusunda yalnızca görsel olan bir hata, vatandaşın temel bir hizmeti kendi başına tamamlayamaması demektir. Daha fazlası için yaygın engeller sayfasına bakın.

Web örüntüleri: yalnızca renkli hatalar, özetler, dinamik denetimler

Tek sinyal olarak çerçeve rengi

<label for="cocuk-dogum">Çocuğun doğum tarihi</label>
<input id="cocuk-dogum" class="alan gecersiz">
<style>.gecersiz { border: 2px solid #d00; }</style>

<label for="cocuk-dogum">Çocuğun doğum tarihi</label>
<input id="cocuk-dogum" aria-invalid="true" aria-describedby="cocuk-dogum-hata">
<p id="cocuk-dogum-hata" class="hata">
  Çocuğun doğum tarihi: bir tarih girin, örneğin 17.04.2018.
</p>

Her sorunu adıyla sayan özet

<div class="hata-kutusu">Lütfen işaretli alanları düzeltin.</div>

<div role="alert" class="hata-kutusu">
  <h2>2 sorun bulundu</h2>
  <ul>
    <li><a href="#veli">Veli adı: bir ad girin</a></li>
    <li><a href="#okul-posta">Posta kodu: 5 hane girin</a></li>
  </ul>
</div>

Sessizce değiştirilen değer

// 8’in üzerindeki kişi sayısı sessizce 8 yapılıyor
if (kisi.value > 8) kisi.value = 8;

if (kisi.value > 8) {
  kisi.value = 8;
  kisiNotu.textContent = "Kişi sayısı 8 olarak değiştirildi; bir alan için üst sınır budur.";
}

Mobil örüntüler: SwiftUI ve Jetpack Compose

// SwiftUI
TextField("Posta kodu", text: $posta)
  .overlay(RoundedRectangle(cornerRadius: 6)
    .stroke(postaGecersiz ? Color.red : Color.gray))

// SwiftUI
VStack(alignment: .leading) {
  TextField("Posta kodu", text: $posta)
  if postaGecersiz {
    Text("Posta kodu: 5 hane girin.")
      .foregroundColor(.red)
      .accessibilityLabel("Hata. Posta kodu: 5 hane girin.")
  }
}

// Jetpack Compose
OutlinedTextField(
  value = posta, onValueChange = { posta = it },
  label = { Text("Posta kodu") },
  isError = postaGecersiz          // yalnızca kırmızı çerçeve
)

// Jetpack Compose
OutlinedTextField(
  value = posta, onValueChange = { posta = it },
  label = { Text("Posta kodu") },
  isError = postaGecersiz,
  supportingText = { if (postaGecersiz) Text("Posta kodu: 5 hane girin.") },
  modifier = Modifier.semantics { if (postaGecersiz) error("5 hane girin") }
)

Hata mesajları için test turu

1. Her formu boş gönderin, sonra her seferinde yalnızca bir alana yanlış değer girerek gönderin.
2. Her hata için, alanı adlandıran ve neyin yanlış olduğunu söyleyen bir metin mesajının çıktığını kontrol edin.
3. Rengi kapatın (gri tonlama ya da zorunlu renkler ayarı) ve tekrar deneyin. Mesaj hâlâ orada olmalı.
4. Ekran okuyucuyla yanlış bir değer gönderin ve hatanın aranmadan duyurulduğunu doğrulayın.
5. Araçlar: otomatik denetleyiciler aria-invalid ve bağlantılı açıklamaların varlığını doğrulayabilir ama mesajın anlamlı olup olmadığını söyleyemez. Mesajları okuyun.

Denetimlerde görülen hatalar

• Tek işaret olarak renk, simge ya da sallanma animasyonu.
• Alanı adlandırmayan "Bir sorun oluştu" gibi genel bir banner.
• Mesajı alandan uzağa, bağlantı veya ilişki olmadan koymak.
• Girdiyi sessizce düzeltmek ya da kırpmak.

Yayına almadan önce

• Her hata, hangi öğenin başarısız olduğunu ve neyin yanlış olduğunu metinle söylüyor.
• Mesaj yalnızca renkle iletilmiyor.
• Bir değerde yapılan her otomatik değişiklik de metinle belirtiliyor.

Kaynaklar

• Understanding SC 3.3.1: Error 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.