WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role=alert > error messages in forms

for

From: Fischer, Johannes
Date: Nov 21, 2017 6:44AM

Hi,

I have found 2 things which could be changed on the Den Haag form:

1. Beside role="alert" put aria-atomic="true" on the live region to make sure that the screenreader not only reads the changes inside the live region but reads the complete live region when changing it.

2. I am not sure if at second submit anything is changed inside the live region. I didn't analyse the javascript of Den Haag website, but I checked the one from W3C website when the form is submitted:
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('<p>Please enter your first name.</p>');
}
if ($('#last').val() === '') {
$('#errors').append('<p>Please enter your last name.</p>');
}
if ($('#email').val() === '') {
$('#errors').append('<p>Please enter your email address.</p>');
}
});

In the second line the live region is emptied to make sure, something has changed inside the live region: .html('');
Then the content of the live region is filled by the append-function. You could use it for Den Haag form.

I hope it helps.

Best regards,

Johannes Fischer
BIKOSAX - IT Accessibility Service in Saxony
Accessible Websites - Test, Consulting, Training

Deutsche Zentralbücherei für Blinde (German Central Library for the Blind, DZB)
Gustav-Adolf-Straße 7, 04105 Leipzig, Germany
Tel.: +49(0)341 7113-162, Fax: +49(0)341 7113-125
E-Mail: <EMAIL REMOVED>
Internet: www.dzb.de

Follow DZB: www.facebook.com/dzb.de | www.twitter.com/punktschrift

-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag von Fernand van Olphen
Gesendet: Dienstag, 21. November 2017 13:45
An: ' <EMAIL REMOVED> '
Betreff: [WebAIM] Role=alert > error messages in forms

Hi everyone,

I have a question about role=alert and error messages.


- Go to: https://www.denhaag.nl/nl/formulier/aanmelden-nieuwsbrief-1.htm

- Try to Submit the form ("Aanmelden") , leaving all fields blank

- The error messages for the required fields are announced in NVDA. (The error messages have a role=alert)

- Submit the form again

- The error messages are NOT announced again.

Does anyone know why the error messages are only mentioned once, and how to fix this?

Because this example works just fine: https://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA19/aria-alert-validation.html

- Role=alert is also used for the error messages

- Submitting the form keeps announcing the error messages,
Regards,

Fernand van Olphen
Accessibility Advisor
Municipality of The Hague

De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer