E-mail List Archives
Thread: Role=alert > error messages in forms
Number of posts in this thread: 6 (In chronological order)
From: Fernand van Olphen
Date: Tue, Nov 21 2017 5:44AM
Subject: Role=alert > error messages in forms
No previous message | Next message →
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
From: Fischer, Johannes
Date: Tue, Nov 21 2017 6:44AM
Subject: Re: Role=alert > error messages in forms
← Previous message | Next message →
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 ADDRESS REMOVED =
Internet: www.dzb.de
Follow DZB: www.facebook.com/dzb.de | www.twitter.com/punktschrift
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] Im Auftrag von Fernand van Olphen
Gesendet: Dienstag, 21. November 2017 13:45
An: ' = EMAIL ADDRESS 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
From: Lovely, Brian
Date: Tue, Nov 21 2017 6:52AM
Subject: Re: Role=alert > error messages in forms
← Previous message | Next message →
Role="alert" only reacts to change. If you have it on an empty div, and change the content of that div by injecting a text string, it will alert. However, if the contents of the div do not change, it will not alert again.
This is why I prefer using aria-describedby for form errors. Each error container has a unique ID, and each associated input has aria-describedby set to a space-delimited list of IDs. Ideally, when the user attempts to submit the form, the developer has coded it to place focus on the first (in code order) in-error input. Then the user can tab from input to input searching for errors, and the error message(s) will announce each time an in-error input receives focus. Even if focus isn't handled on submit, the user can still tab through the form listening for errors.
From: Birkir R. Gunnarsson
Date: Tue, Nov 21 2017 6:56AM
Subject: Re: Role=alert > error messages in forms
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> Internet: www.dzb.de
>
> Follow DZB: www.facebook.com/dzb.de | www.twitter.com/punktschrift
>
> -----Ursprüngliche Nachricht-----
> Von: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] Im Auftrag
> von Fernand van Olphen
> Gesendet: Dienstag, 21. November 2017 13:45
> An: ' = EMAIL ADDRESS 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.
From: Fernand van Olphen
Date: Wed, Nov 22 2017 3:32AM
Subject: Re: Role=alert > error messages in forms
← Previous message | Next message →
@Johannes:
Thanks for your remarks. Especially your remark about the emptying of the live region is very helpful!
@Brian, @Birkir:
Aria-describedby: will consider that in the future. Thanks guys!
Kind regards,
Fernand
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
From: Graham Armfield
Date: Wed, Nov 22 2017 11:37AM
Subject: Re: Role=alert > error messages in forms
← Previous message | No next message
One caution with using multiple error items all with role="alert"...
If you cause multiple role="alert" messages to be triggered all at once
(say, validating on submit) users may get to only hear one of the messages,
along with some stuttering in some screen readers - eg NVDA. This would
appear to be as each subsequent role="alert" message supersedes the
previous one.
I haven't tested this with multiple aria-live="polite" messages, but I
guess that in theory, they all should be read out one after the other.
Regards
Graham Armfield