WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: how to make use of asterisks accessible

for

Number of posts in this thread: 8 (In chronological order)

From: Angela French
Date: Thu, Nov 08 2012 4:35PM
Subject: how to make use of asterisks accessible
No previous message | Next message →

Hello,
I have a web page I'm building that uses some asterisks to supply additional information. I'm wondering if I should move the supplemental information to the bottom of the page and link to it like one might do with footnotes, or is it understandable if it soon follows the use of the first asterisk?

Here is my context (pasted from a Word document).


* PERS/TRS participants, or those with no retirement plan:
* $17,000 - If you are under age 50
* $22,500* - If you are age 50 or over
* State Board Retirement Plan participants:
* $17,000 - If you are under age 50
* $22,500* - If you are age 50 or over.
*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.
Thank you,

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/

From: Lucy Greco
Date: Thu, Nov 08 2012 5:19PM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

hello:
I and many screen reader users turn off punctuation so i have no idea
ware you put the * so i would vote for the footnote


On 11/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I have a web page I'm building that uses some asterisks to supply additional
> information. I'm wondering if I should move the supplemental information to
> the bottom of the page and link to it like one might do with footnotes, or
> is it understandable if it soon follows the use of the first asterisk?
>
> Here is my context (pasted from a Word document).
>
>
> * PERS/TRS participants, or those with no retirement plan:
> * $17,000 - If you are under age 50
> * $22,500* - If you are age 50 or over
> * State Board Retirement Plan participants:
> * $17,000 - If you are under age 50
> * $22,500* - If you are age 50 or over.
> *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.
> Thank you,
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > > >


--
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008
http://webaccess.berkeley.edu

From: Angela French
Date: Thu, Nov 08 2012 5:22PM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

An asterisk is punctuation? I had no idea. I still see forms that use an asterisk to identify required fields on form elements.
I decided the block of content was poorly written and received permission to edit it.



>

From: Lucy Greco
Date: Thu, Nov 08 2012 5:42PM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

i would not say don't use them to indicate required fields but use
offscreen text as well. you need to still use * because it is a
recognized simple and people with ld find it helpfull

On 11/8/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> An asterisk is punctuation? I had no idea. I still see forms that use an
> asterisk to identify required fields on form elements.
> I decided the block of content was poorly written and received permission
> to edit it.
>
>
>
>>

From: John E Brandt
Date: Fri, Nov 09 2012 9:39AM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

I have seen some developers approach this by using an image (<img>) of an
asterisk and then using the ALT description and Title to inform the screen
reader (and others) that there is more information available about this
particular item. The image is also clickable and links to the additional
information. But using an actual link and anchor on the page for more
information is also a valid approach as long as the link content makes sense
when read out of context (i.e., NOT "click here" or "more info", but rather
"Use this link for more information about .....").

In polls/survey's in SurveyGizmo, if you identify an item as "required" they
use the image approach and the ALT indicates "this item is required" with no
additional link.

~j

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

From: Bim Egan
Date: Fri, Nov 09 2012 10:32AM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

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
----- Original Message -----
From: "John E Brandt" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 09, 2012 4:39 PM
Subject: Re: [WebAIM] how to make use of asterisks accessible


I have seen some developers approach this by using an image (<img>) of an
asterisk and then using the ALT description and Title to inform the screen
reader (and others) that there is more information available about this
particular item. The image is also clickable and links to the additional
information. But using an actual link and anchor on the page for more
information is also a valid approach as long as the link content makes sense
when read out of context (i.e., NOT "click here" or "more info", but rather
"Use this link for more information about .....").

In polls/survey's in SurveyGizmo, if you identify an item as "required" they
use the image approach and the ALT indicates "this item is required" with no
additional link.

~j

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

From: Iaffaldano, Michelangelo
Date: Fri, Nov 09 2012 2:09PM
Subject: Re: how to make use of asterisks accessible
← Previous message | Next message →

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

From: Paul J. Adam
Date: Fri, Nov 09 2012 2:23PM
Subject: Re: how to make use of asterisks accessible
← Previous message | No next message

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 ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Nov 9, 2012, at 3:09 PM, "Iaffaldano, Michelangelo" < = EMAIL ADDRESS 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
>
>