WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role=alert > error messages in forms

for

From: Birkir R. Gunnarsson
Date: Nov 21, 2017 6:56AM

Good analysis. I think the problem is that nothing is actually updated
inside the alert element on second submit. A screen reader wil only
announce an alert if its content changes.
Usually I think it is a better strategy to use aria-describedby to
connect the error message with the invalid form field and then place
focus on the first form field.
(aria-errormessage is the new aria-describedby for errors, but I don't
think it's much supported yet..).



On 11/21/17, Fischer, Johannes < <EMAIL REMOVED> > wrote:
> 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
> > > > > > > > >


--
Work hard. Have fun. Make history.