E-mail List Archives
Thread: Form error messages (asp.net 4)
Number of posts in this thread: 5 (In chronological order)
From: Angela French
Date: Thu, May 02 2013 5:44PM
Subject: Form error messages (asp.net 4)
No previous message | Next message →
We are having a discussion where I work about different ways to implement the display of form validation error messages so that they are accessible. We develop with asp.net 4 using Visual Studio 2010, which, if I understand correctly has limited support ARIA so that aria-described by or aria-alerts wouldn't be an option.
What is the most bomb-proof, most widely support means of displaying error messages that can be perceived by screen readers when in forms mode that we could implement given our environment? I'm assuming that only putting errors in the <label> tag or by using ARIA would meet this criteria, but am eager for other ideas we may not have thought of.
As always, I appreciate your input.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
http://www.checkoutacollege.com/
From: Paul J. Adam
Date: Thu, May 02 2013 5:59PM
Subject: Re: Form error messages (asp.net 4)
← Previous message | Next message →
If you're coding the asp.net forms by hand or at least tweaking the code by hand then any ARIA attributes would be possible. I understand the default drag and drop controls are not usually accessible.
If you're still limited to not using aria-describedby to programmatically associate the error messages with the invalid inputs then inserting them into the connected label would be your only other option to associate errors to inputs.
Inserting errors into the connected label is the bullet-proof method that would work on any user agents with no aria support.
My recommended approach is to send focus to the first invalid input after a bad form submit. If the error is associated with the input then the user will hear it.
For form validation I also recommend the use of HTML5 required an/or aria-required. I also recommend the jQuery Validation plugin with some tweaks to how it inserts the error messages.
I've given this presentation a number of times and will be doing it at AccessU as well, HTML5 & WAI-ARIA Forms with jQuery Validation, http://pauljadam.com/forma11y/.
Hope this helps :)
Paul J. Adam
Accessibility Evangelist
www.deque.com
On May 2, 2013, at 6:44 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> We are having a discussion where I work about different ways to implement the display of form validation error messages so that they are accessible. We develop with asp.net 4 using Visual Studio 2010, which, if I understand correctly has limited support ARIA so that aria-described by or aria-alerts wouldn't be an option.
>
> What is the most bomb-proof, most widely support means of displaying error messages that can be perceived by screen readers when in forms mode that we could implement given our environment? I'm assuming that only putting errors in the <label> tag or by using ARIA would meet this criteria, but am eager for other ideas we may not have thought of.
>
> As always, I appreciate your input.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> http://www.checkoutacollege.com/
>
> > >
From: Angela French
Date: Thu, May 02 2013 6:07PM
Subject: Re: Form error messages (asp.net 4)
← Previous message | Next message →
>Inserting errors into the connected label is the bullet-proof method that would
>work on any user agents with no aria support.
>
>
>
>Paul J. Adam
>Accessibility Evangelist
>www.deque.com
>
>
Thanks Paul.
I'm curious - I know that the html spec allows for two labels for an input tag. How do screen readers handle two labels associated with one element? Assuming my html coding is correct (I've never done two labels with one input), how would my example be heard?
<label for="firstname">First Name:</label><input type="text" id="firstname" /><label for="firstname">You forgot to enter your first name</label>
Angela French
From: Paul J. Adam
Date: Thu, May 02 2013 6:51PM
Subject: Re: Form error messages (asp.net 4)
← Previous message | Next message →
I don't recommend connecting 2 labels to 1 input. It worked in most browsers/AT but not all. I'd have to test them all again to remember which combinations failed.
The jQuery Validation plugin inserts an extra label by default so I had to tweak it to insert the error into the original label.
Paul J. Adam
Accessibility Evangelist
www.deque.com
On May 2, 2013, at 7:07 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> Inserting errors into the connected label is the bullet-proof method that would
>> work on any user agents with no aria support.
>>
>>
>>
>> Paul J. Adam
>> Accessibility Evangelist
>> www.deque.com
>>
>>
>
> Thanks Paul.
> I'm curious - I know that the html spec allows for two labels for an input tag. How do screen readers handle two labels associated with one element? Assuming my html coding is correct (I've never done two labels with one input), how would my example be heard?
>
> <label for="firstname">First Name:</label><input type="text" id="firstname" /><label for="firstname">You forgot to enter your first name</label>
>
> Angela French
>
>
>
> > >
From: Bryan Garaventa
Date: Thu, May 02 2013 7:47PM
Subject: Re: Form error messages (asp.net 4)
← Previous message | No next message
If it helps, there is an inline form field validation and dynamic help
tooltip demo at
http://whatsock.com/modules/form_validator_module/demo.htm
Which has been tested successfully using JAWS 12, 13, and 14 in IE 8 and 9
and Firefox, NVDA in IE and Firefox, and using Voiceover in iOS Safari.
----- Original Message -----
From: "Paul J. Adam" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, May 02, 2013 4:59 PM
Subject: Re: [WebAIM] Form error messages (asp.net 4)
> If you're coding the asp.net forms by hand or at least tweaking the code
> by hand then any ARIA attributes would be possible. I understand the
> default drag and drop controls are not usually accessible.
>
> If you're still limited to not using aria-describedby to programmatically
> associate the error messages with the invalid inputs then inserting them
> into the connected label would be your only other option to associate
> errors to inputs.
>
> Inserting errors into the connected label is the bullet-proof method that
> would work on any user agents with no aria support.
>
> My recommended approach is to send focus to the first invalid input after
> a bad form submit. If the error is associated with the input then the user
> will hear it.
>
> For form validation I also recommend the use of HTML5 required an/or
> aria-required. I also recommend the jQuery Validation plugin with some
> tweaks to how it inserts the error messages.
>
> I've given this presentation a number of times and will be doing it at
> AccessU as well, HTML5 & WAI-ARIA Forms with jQuery Validation,
> http://pauljadam.com/forma11y/.
>
> Hope this helps :)
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> On May 2, 2013, at 6:44 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
>> We are having a discussion where I work about different ways to implement
>> the display of form validation error messages so that they are
>> accessible. We develop with asp.net 4 using Visual Studio 2010, which,
>> if I understand correctly has limited support ARIA so that aria-described
>> by or aria-alerts wouldn't be an option.
>>
>> What is the most bomb-proof, most widely support means of displaying
>> error messages that can be perceived by screen readers when in forms mode
>> that we could implement given our environment? I'm assuming that only
>> putting errors in the <label> tag or by using ARIA would meet this
>> criteria, but am eager for other ideas we may not have thought of.
>>
>> As always, I appreciate your input.
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> http://www.checkoutacollege.com/
>>
>> >> >> >
> > >