There was a question on the Voiceover list recently about links just being read out as ‘link’ on a particular site: freeverse. It turned out to be due to an image replacement technique.
Each text link in the top navigation is replaced with a background image:
If you remove the styles, you get a standard list of links, which you would have thought would be accessible:
However, try the site in Voiceover and it just reads out “link” for each. The top navigation is in a list, each item contains a link, and each link contains a span with the text in it, e.g:
<li><a href="/" id="home" title="Home"> <span>Home</span> </a></li>
That span is given the CSS: display: none;, so Safari doesn’t display it, and Voiceover doesn’t read it. You can try a cut-down test case.
JAWs generally does the same for items with display: none;, but must be falling back to the title in this case. (Someone reported that it worked fine in JAWs).
How to hide text
If you are going to hide text that you intend to be read out for screen readers, then it is best to move it rather than set it not to display (or not be visible, another CSS property). Something like this would currently work:
position: absolute; left: -999em;
If they made that simple change, it would work fine. I say “currently” because display:none; used to work, but some screen reader vendors decided that if you can’t see it, it shouldn’t be read out. That doesn’t make much sense for sites designed with accessibilty in mind, but few sites are accessible at the moment, and screen reader vendors have to design for the more common cases.
See Mezzoblue for an overview of image replacement techniques.
Personally, I think if you are going to use an image, just use a foreground image (with alt text). However, the text in their images is rather small, so would adversely affect those with mild to moderate visual impairments who require some ‘zooming’ without a full magnifier.
Aural style sheets
For those thinking you should use a media style sheet aimed at screen readers to make sure the text is read out, I knocked up another quick test case, and Voiceover doesn’t appear to recognise aural style sheets.
ul#menu li a{
display:block;
text-indent:-3000em;
background:url(uri);
width:Npx; height:Npx;
}
Yep, that is the Phark method from the Mezzoblue article.
Basically it is the ‘display’ and ‘visibility’ properties that cause things to be hidden, so using position or text-indent does not hide text from screen readers. (However, it still doesn’t help those with CSS but no images, or the moderately visually impaired.)