WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A simple beginner's question

for

From: Birkir R. Gunnarsson
Date: May 23, 2016 5:41AM

aria-describedby is the best technique in my experience to relate
error messages to form fields
If your error checking happens when user submits the form you:
1. use aria-describedby to associate error message with form fields and
2. Move focus to the first form field with an associated error message.

Thing to keep in mind:
The target of aria-describedby is announced by screen readers even
when you hide it using display: none. This is by design and can be
useful, but is different from how html works in general.
Make sure you only add aria-describedby to the form field when the
error message is visible on the screen
Remove it when error message is no longer visible.


On 5/23/16, Léonie Watson < <EMAIL REMOVED> > wrote:
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ]
>> On Behalf Of Mike Barlow
>> Sent: 22 May 2016 21:47
>> And as for using ARIA to inform a user that an error has occurred on an
>> input
>> field, I'd use the ARIA "role=alert" (or even aria-live=assertive) as
>> shown in
>> the W3C page on identifying errors - https://www.w3.org/TR/WCAG20-
>> TECHS/ARIA19.html
>>
> This technique does not associate an error message with a particular form
> field, it only notifies the user when an error has occurred. It also
> requires client side form validation, so may not be suitable for Alexander's
> purposes.
>
> Imagine a form with several fields. You move focus away from one field and
> an error occurs, this causes an error message to be injected into the live
> region and your screen reader announces it. You move focus back to the field
> in question, but there is no error message associated with the field - so no
> way to remind yourself of the error that needs correcting.
>
> The live region uses ARIA to do something that isn't possible in HTML, but
> it's only useful when it complements something that can (and probably
> should) be done in HTML.
>
> Léonie.
>
> --
> @LeonieWatson tink.uk Carpe diem
>
>
>
> > > > >


--
Work hard. Have fun. Make history.