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.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Fernand van Olphen
Sent: Tuesday, November 21, 2017 7:45 AM
To: ' = EMAIL ADDRESS REMOVED = ' < = EMAIL ADDRESS REMOVED = >
Subject: [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 The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
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