Suppose you want some text on your page that is read by screen readers, but not by sighted people - how do you do it?
There are a couple of good examples why you'd want to do this:
- The more common is a "Skip links" feature to allow screen readers to jump over a menu system (though there are better solutions to this problem)
- A better example is the need to voice something like this: "This list of people will refresh when the 'add person' button is clicked. Use the ALT+6 access key to re-read the list". It’s vital to the user of a screen reader, but pointless and confusing to a sighted person.
So how do you do it?
diveintoaccessibility.org: Use "display:none;"
This might have been good advice some time ago, but most screen readers skip over invisible text on the assumption that it is hidden for a reason. There are a few places where Dive Into Accessibility needs updating, which is not surprising since it was originally written back when the world was young, dinosaurs roamed the land, and when people still thought Netscape Navigator what a good thing.
W3C accessibility guidelines: "Don't do it"
It's not particularly clear what the W3C mean by this:
"Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (Level 1)"
Writing on "A List Apart", Joe Clark interprets the W3C like this:
"You can’t use offscreen positioning to add labels (e.g., to forms) that only some people, like users of assistive technology, can perceive. Everybody has to see them".
If he's right, the advice is bizarre – you'd be required to confuse sighted people by describing access keys. Joe does have a bit of an axe to grind though, so while many of his points have merit, I'm not sure he's right on his reading here. However the very fact that it's not clear to smart web professionals is a condemnation of the W3C ability to follow their own recommendations is making things clear to everyone including those with "cognitive limitations". There is something ironic in them using a phrase that is way too complex while telling people to keep things simple.
RNIB (UK Blind Institute): Use "top:-999em;"
This advice seems most reasonable to me. No visual browser will display text with this style for visual reasons (it’s off screen). This is good because the whole point in hiding the text is hide it from people that have no visual disability. Using top is better than using left, right or bottom because the other can cause scroll-bars in some circumstances.
Not that this technique is not without fault however. Sometimes partially-sighted people will read the web with styles turned off, so it's not always perfect.
What do you use?