Sorun: Hata mesajı yalnızca ekranda görünüyor
İstemci tarafı doğrulamada hata metnini kırmızı renkle göstermek, ekran okuyucu kullanan ziyaretçiler için yeterli değildir. Mesajı ilgili alana bağlayıp değişikliği bir aria-live bölgesinde duyurmak gerekir. Aşağıdaki küçük örnek, e-posta alanını kontrol eder ve güvenli biçimde metin ekler.
HTML ve JavaScript örneği
Neden bu yapı kullanılmalı?
1. Alanı boş bırakıp gönderin. Hata görünmeli, odak e-posta alanına dönmeli ve alan geçersiz olarak işaretlenmelidir.
2. gibi geçersiz bir değer yazıp tekrar gönderin. Uygun hata mesajı görünmelidir.
3. Geçerli bir adres yazıp gönderin. Hata temizlenmeli ve durum mesajı duyurulmalıdır.
4. Klavye ile yalnızca Tab ve Enter kullanarak formu deneyin. Renk dışında hata metninin de anlaşılabildiğini kontrol edin.
5. Tarayıcının geliştirici araçlarında hata metninin kullanıcı girdisiyle HTML olarak çalışmadığını doğrulayın.
Sunucu tarafı doğrulama yine yapılmalıdır; bu örnek yalnızca kullanıcıya erken ve erişilebilir geri bildirim sağlamak içindir.
İstemci tarafı doğrulamada hata metnini kırmızı renkle göstermek, ekran okuyucu kullanan ziyaretçiler için yeterli değildir. Mesajı ilgili alana bağlayıp değişikliği bir aria-live bölgesinde duyurmak gerekir. Aşağıdaki küçük örnek, e-posta alanını kontrol eder ve güvenli biçimde metin ekler.
HTML ve JavaScript örneği
<form id="contact-form" novalidate>
<label for="email">E-posta adresi</label>
<input id="email" name="email" type="email"
aria-describedby="email-error" autocomplete="email">
<p id="email-error" class="error" role="alert"></p>
<button type="submit">Gönder</button>
<p id="form-status" role="status" aria-live="polite"></p>
</form>
<script>
const form = document.querySelector('#contact-form');
const email = document.querySelector('#email');
const emailError = document.querySelector('#email-error');
const formStatus = document.querySelector('#form-status');
function showEmailError(message) {
emailError.textContent = message;
email.setAttribute('aria-invalid', 'true');
}
function clearEmailError() {
emailError.textContent = '';
email.removeAttribute('aria-invalid');
}
form.addEventListener('submit', (event) => {
event.preventDefault();
clearEmailError();
formStatus.textContent = '';
if (!email.value.trim()) {
showEmailError('E-posta adresi zorunludur.');
email.focus();
return;
}
if (!email.validity.valid) {
showEmailError('Geçerli bir e-posta adresi yazın.');
email.focus();
return;
}
formStatus.textContent = 'Form gönderilmeye hazır.';
});
email.addEventListener('input', clearEmailError);
</script>
Neden bu yapı kullanılmalı?
- label alanın ne amaçla kullanıldığını açıklar.
- aria-describedby hata metnini e-posta alanıyla ilişkilendirir.
- aria-invalid alanın mevcut değerinin geçersiz olduğunu belirtir.
- role="alert" hata oluştuğunda mesajın yardımcı teknolojilere duyurulmasını sağlar.
- Mesajlar textContent ile eklenir; kullanıcı girdisi HTML olarak yorumlanmadığı için gereksiz HTML enjeksiyonu riski azaltılır.
1. Alanı boş bırakıp gönderin. Hata görünmeli, odak e-posta alanına dönmeli ve alan geçersiz olarak işaretlenmelidir.
2.
ornek3. Geçerli bir adres yazıp gönderin. Hata temizlenmeli ve durum mesajı duyurulmalıdır.
4. Klavye ile yalnızca Tab ve Enter kullanarak formu deneyin. Renk dışında hata metninin de anlaşılabildiğini kontrol edin.
5. Tarayıcının geliştirici araçlarında hata metninin kullanıcı girdisiyle HTML olarak çalışmadığını doğrulayın.
Sunucu tarafı doğrulama yine yapılmalıdır; bu örnek yalnızca kullanıcıya erken ve erişilebilir geri bildirim sağlamak içindir.