Form Hataları İçin ARIA Nasıl Yapılandırılır
Çoğu form, gören kullanıcılar için iyi çalışır ancak yardımcı teknoloji kullanan kişiler için yetersiz kalır. Gören bir kullanıcı kırmızı bir kenarlık ve bir hata mesajı görür. Bir ekran okuyucu kullanıcısı ise genellikle hiçbir şey duymaz.
Bunu iki ARIA özniteliği ve küçük bir canlı bölge (live region) ile düzeltebilirsiniz. Bu değişiklik 50 satırdan az kod gerektirir.
Hatalarınızı giriş alanlarınıza (input) şu şekilde bağlayabilirsiniz:
- aria-describedby kullanın Giriş alanının hata öğesine işaret etmesi gerekir. Giriş alanınıza aria-describedby ekleyin ve değerini hata div öğenizin ID'sine ayarlayın.
Örnek:
- Input ID: email-input
- Error ID: email-error
- Code: aria-describedby="email-error"
Bu, kullanıcı giriş alanına odaklandığında ekran okuyucuya hata mesajını okumasını söyler. Yardım metniniz de varsa birden fazla ID ekleyebilirsiniz.
- aria-invalid kullanın Bu öznitelik, kullanıcıya girişin hatalı olduğunu bildirir. Bir hata oluştuğunda aria-invalid değerini true yapın. Hata giderildiğinde ise false olarak ayarlayın.
Yaygın bir hata, bir kapsayıcı (wrapper) div öğesini kırmızı renkle biçimlendirip aria-invalid özniteliğini sadece input öğesine eklemektir. Bu durum bir uyumsuzluk yaratır. Görsel stillerinizin ve ARIA özniteliklerinizin aynı öğeyi hedeflediğinden emin olun.
- Bir canlı bölge (live region) ekleyin Kullanıcı hala yazarken bir hata ortaya çıkarsa, bunu fark etmeyebilir. Hata div öğenizde aria-live="polite" kullanın.
- aria-live="polite", ekran okuyucuya hatayı doğal bir duraksama sırasında duyurmasını söyler.
- Acil bir durum olmadıkça "assertive" kullanmayın. Form hataları acil durum değildir.
- Asenkron doğrulamayı yönetin Arka planda bir kullanıcı adı veya adres kontrol ediyorsanız, kullanıcıların sistemin çalıştığını bilmesi gerekir.
- Yöntem A: Kontrol çalışırken input üzerinde aria-busy="true" kullanın.
- Yöntem B: "Kullanıcı adı doğrulanıyor..." gibi durum güncellemelerini duyurmak için gizli bir canlı bölge kullanın.
Yöntem B, farklı ekran okuyucularda daha güvenilirdir.
Test yapmak zorunludur. Otomatik araçlar yardımcıdır ancak manuel testlerin yerini tutamazlar. Windows'ta NVDA veya macOS'ta VoiceOver kullanın.
Test kontrol listeniz:
- Alana Tab ile girin. Etiket duyurulmalıdır.
- Geçersiz bir değer girin. Hata duyurulmalıdır.
- Tekrar alana Tab ile dönün. Etiket, hata ile birlikte duyurulmalıdır.
- Hatayı düzeltin. Hata mesajı kaybolmalıdır.