WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: styling usable accessible error messages in form fields

for

From: YOUNGV5@nationwide.com
Date: Jul 26, 2011 12:24PM


I agree with Lucy, the first invalid input field should be focused in many
cases. This is the approach I take:

Error message at top:
- Add ARIA role alert
- Add ARIA live assertive

In-line error message:
- Focus first "errored" input
- Place inside "errored" input label
- Add ARIA invalid true on "errored" input
- (continue to use ARIA required true/false)

Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | <EMAIL REMOVED>




From:
Lucy Greco < <EMAIL REMOVED> >
To:
WebAIM Discussion List < <EMAIL REMOVED> >
Date:
07/26/2011 02:17 PM
Subject:
Re: [WebAIM] styling usable accessible error messages in form fields
Sent by:
<EMAIL REMOVED>



Hi:
I like the focus to be given to the first problem field and then the
page title to have some information about other problems and number of the
problems. The one thing that would be really nice but I have never seen it
done write is if all but the problem fields be disabled so that the user
only tabs to the fields that need fixing


Lucy Greco
Assistive Technology Specialist
Disabled Student's Program UC Berkeley
(510) 643-7591
http://attlc.berkeley.edu
http://webaccess.berkeley.edu


-----Original Message-----
From: <EMAIL REMOVED> [
mailto: <EMAIL REMOVED> ] On Behalf Of Nancy Johnson
Sent: Tuesday, July 26, 2011 11:00 AM
To: WebAIM Discussion List
Subject: [WebAIM] styling usable accessible error messages in form fields

Hi,

I apologize if this is a repeat topic, but I have been asked to design
some error messages for pages that have between 10 and 20 inputs.

They need to be 508... At this point I don't know the back-end technology,
but have looked at webaim.org/contact where the error messages display in
a group before the inputs, but also Google's where they display just
below... I've also seen them just to the right of the input...

How important to the screen reader user to group them at the top as
webaim.org/contact page does?

Thanks in advance,

Nancy Johnson