WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: hide decorative characters from screen readers

for

From: YOUNGV5@nationwide.com
Date: Aug 12, 2011 6:51AM


Léonie, I believe Yves was inquiring about situations where the content is
visible, but hidden from screen reader users. The solutions at
http://www.nomensa.com/blog/2011/hiding-content/ either hides content from
both users or just hides content from visual users. I believe the
solution is to use role="presentation"

Example:

<span role="presentation">|</span>

Of course, this is a new technique. If you are looking for more of a
current universal solution possibly do the following:

Use an in-line image that is a bit larger than what you need and has empty
alt (alt=""). Then, incorporate some progressive techniques that allow
the image to scale.

Hope this points you in the right direction.

Cheers.





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




From:
Léonie Watson < <EMAIL REMOVED> >
To:
"'WebAIM Discussion List'" < <EMAIL REMOVED> >
Date:
08/12/2011 08:38 AM
Subject:
Re: [WebAIM] hide decorative characters from screen readers
Sent by:
<EMAIL REMOVED>



Yves Serrano wrote:
"We can hide decorative images with the empty alt attribute from the
screen
reader is there a solution for decorative characters?"

The following article looks at the different techniques
you can use
for hiding content from sight (as well as from everybody). Hope it helps.
http://www.nomensa.com/blog/2011/hiding-content/


Léonie.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Yves Serrano
Sent: 12 August 2011 09:38
To: <EMAIL REMOVED>
Subject: [WebAIM] hide decorative characters from screen readers

Hi

Often you have a character as navigation separator in horizontal
navigation
list.
I use for example "-" or "|". The screen readers reads this characters
even
if I build them with pseudo css content (JAWS).
I could use images as <li> background, but then I lose the ability of
scaling via css, by changing the font size.
It also matches the text better if I don't use an image.

We can hide decorative images with the empty alt attribute from the screen
reader is there a solution for decorative characters?

Don't found anything. Am I the only one who does it find unpleasing when
the
screen reader reads them?

regards yves