E-mail List Archives
Thread: styling usable accessible error messages in form fields
Number of posts in this thread: 3 (In chronological order)
From: Nancy Johnson
Date: Tue, Jul 26 2011 12:03PM
Subject: styling usable accessible error messages in form fields
No previous message | Next message →
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
From: Lucy Greco
Date: Tue, Jul 26 2011 12:18PM
Subject: Re: styling usable accessible error messages in form fields
← Previous message | Next message →
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
From: YOUNGV5
Date: Tue, Jul 26 2011 12:24PM
Subject: Re: styling usable accessible error messages in form fields
← Previous message | No next message
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 ADDRESS REMOVED =
From:
Lucy Greco < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
07/26/2011 02:17 PM
Subject:
Re: [WebAIM] styling usable accessible error messages in form fields
Sent by:
= EMAIL ADDRESS 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