WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: how to make use of asterisks accessible

for

From: Paul J. Adam
Date: Nov 9, 2012 2:23PM

I have some feedback on the use of * to indicate required form fields.

I wrote a blog post a while back discussing this. http://www.deque.com/accessible-client-side-form-validation-html5-wai-aria

Here's the excerpt:

By default NVDA will not speak an asterisk * as “star”. VoiceOver & JAWS both say “star”. NVDA users can adjust their Symbol Pronunciation settings to force * to be spoken by setting the Level to “some” but not all users are aware of this feature and will usually be running on default settings. By placing the aria-required=”true” attribute on all required fields NVDA will now announce they are required at the default settings. VoiceOver and JAWS will speak the star and the required attribute.

aria-required=”true”

The easiest enhancement is to add the aria-required=”true” attribute to all required fields in your form.


Paul J. Adam
Accessibility Evangelist
Deque Systems
<EMAIL REMOVED>
www.PaulJAdam.com
@pauljadam on Twitter

On Nov 9, 2012, at 3:09 PM, "Iaffaldano, Michelangelo" < <EMAIL REMOVED> > wrote:

> Is it still OK to mark required form fields with an asterisk at the end of the label string? I have seen various demos that complicate that technique but I am not sure about the benefits to the end users.
>
> Michelangelo
>
> -----Original Message-----
> From: Bim Egan [mailto: <EMAIL REMOVED> ]
> Sent: November 9, 2012 12:32 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] how to make use of asterisks accessible
>
> Hi,
>
> To Angela: my feeling is that there are too many asterisks. For people without sight, it's difficult to determine whether the * is at the start or
> end of a line. Don't know if it's just because of the limitations of text
> email, but to me it sounded as though everything was related, and there was no point at which it was clear what explained the *'s. Try using headings and list structure, and add the word "Note" to the explanation paragraph and suddenly it makes a lot more sense.
> Suggestion:
>
> <h3> PERS/TRS participants, or those with no retirement plan:</h3> <ul> <li>
> $17,000 - If you are under age 50
> </li>
> <li>
> $22,500* - If you are age 50 or over
> </li></ul>
>
> <h3> State Board Retirement Plan participants: </h3> <ul> <li>
> $17,000 - If you are under age 50
> </li>
> <li>
> $22,500* - If you are age 50 or over.
> </li></ul>
>
> * Note: The VIP maximum contribution amount shown above includes the Age 50 "Catch-up Contribution" of $5,500 as described in the "Catch-up Contributions" section below.
>
>
> To John: using images to represent asterisks may cause issues for some users. depending on the browser and screen reader in use, some screen readers don't pick them up, even when they are within explicit labels. This may be a screen reader bug, and it would be wrong to tell developers not to do something because of a software bug, but it's as well to be aware that this practice may cause problems. Best is to keep it simple and use the text * instead.
>
> Cheers,
>
> Bim
>
> > >