Bu kural ne anlama geliyor

WCAG 3.3.1, bir form doğrulama hatası oluştuğunda, sistemin hangi alanda hata olduğunu tanımlamasını ve hatayı metin olarak açıklamasını gerektirir. Yalnızca renk yeterli değildir — neyin yanlış gittiğini açıklayan bir metin mesajı olmalıdır.

Hata mesajı, ekran okuyucuların duyurabilmesi için ilgili alanla programatik olarak ilişkilendirilmelidir (aria-describedby, aria-errormessage veya yakınlık yoluyla).

Neden önemlidir

Görme engelli kullanıcılar kırmızı kenarlıkları veya hata simgelerini göremez. Renk körlüğü olan kullanıcılar kırmızı hata stilini normal stilden ayırt edemeyebilir. Açık hata metin açıklamaları tüm kullanıcıların hataları belirleyip düzeltmesini sağlar.

İlgili axe-core kuralları

Hata tanımlama için özel otomatik axe-core kuralı yoktur. Ancak label, select-name gibi kurallar form kontrollerinin hata ilişkilendirmesi için doğru etiketlendigini doğrulamaya yardımcı olur.

Nasıl test edilir

Geçersiz veya eksik verilerle form gönderin ve hata mesajlarının gorunduguny doğrulayın.
Hata mesajlarının metin olarak oldugunun kontrol edin (yalnızca renk veya simge değil).
Hatalarin alanlariyla iliskilendirildigini doğrulayın.
Ekran okuyucu ile alan odak aldığında hatalarin duyurulduğunuun doğrulayın.

Nasıl düzeltilir

Yanlış uygulama

<!-- Yalnızca renkle belirtilen hata -->
<label for="eposta">E-posta</label>
<input type="email" id="eposta" style="border-color: red" />

Doğru uygulama

<!-- Açık, ilişkilendirilmiş hata mesajı -->
<label for="eposta">E-posta</label>
<input type="email" id="eposta"
       aria-invalid="true"
       aria-describedby="eposta-hata" />
<p id="eposta-hata" class="error" role="alert">
  Lütfen geçerli bir e-posta adresi girin (örneğin ad@ornek.com).
</p>

Sık yapılan hatalar

Hataları belirtmek için yalnızca renge (kırmızı kenarliklar) guvenme.
Belirli alanları tanımlamadan ustte tek bir genel hata mesajı gösterme.
Hata mesajlarini alanlariyla programatik olarak iliskilendirmeme.
Neyin yanlış gittiğini veya nasıl duzeltilecegini açıklamayan hata mesajları kullanma.

3.3.1 Hata Tanımlama