Accessibility Field Notes

We often see sites where the site author has attempted to hide elements from sighted users by making use of the display:none style property.

Unfortunately, screenreaders interpret CSS (cascading style sheets).

As a result, assigning this style to an element removes it completely from the document flow for any user agent that interprets CSS, and that includes screenreader users. Note that visibility:hidden has exactly the same effect – screen readers ignore any element with this property.

So what should you do to provide information only to screenreader users? Well, firstly you should consider whether it’s really not relevant to users using other browsers. If this is clearly the case (its instructions on an interface for JAWS users, for example), then there are several alternatives.

1. Use the title attribute. We’d avoid this one. In our experience most screenreader users don;t bother listening to title info unless they are both a sophisticated user of their software and patient enough to bother.
2. Use tiny text coloured to match the background. Avoid this. This method is too abused by spammers and Google frowns on it.
3. Use tiny text in a colour similar to the background. Still avoid. Do you think Google can’t do sums?
4. Use tiny text in a colour different to the background. Yes, but looks messy.
5. Any cloaking method that overlays text with another element. Avoid most of these. Again, abused by spammers so risks being penalised by Google.
6. Use position: absolute to position off-screen. This is our preferred solution. Note that you should position a long way offscreen, and it should be off to the left. Shift them in any other direction and you risk losing them on some software (Window Eyes, for one). Internet Explorer (IE) also gets confused by this method unless carefully implemented. Don’t place lists of links offscreen (IE loses the first item on an occasional basis), and make sure you use both top and left both when positioning offscreen and when bringing it back on (when a link recieves document focus, for example).

This entry was posted on Wednesday, 8th August 2007 at 3:22 pm. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.