For the sake of accessibility, it’s often desirable to show some extra text to screen readers which might not be applicable to traditional web browsers. One classic example is a Skip Navigation link preceding a long list of navigation options. (Because it can take a while for a screen reader to read through a long set of navigation options, users with screen readers may find it convenient to skip ahead to another section of the document.) So, while one good option would be to include a Skip Navigation link for all users, that may not fit in with your design.
In years prior, it was thought that you could just give that link a class and then set that class to display:none. And, on paper, that would work — that text should be hidden from browsers but viewable when CSS is turned off. The only problem is that the most popular screen reader, Jaws, doesn’t read display:none text, for some reason. So, that code has the effect of hiding the text both from ordinary browsers and screen readers.
However, the fellow at Standards-Schmandards.com (whose name I couldn’t find) has come up with a solution which he calls the Aural Text Class. Rather than setting the text to display:none, he punts it off the viewable area of the screen with position:absolute and left:-1000px:
.auraltext
{
position: absolute;
font-size: 0;
left: -1000px;
}
He calls it “.auraltext”, though I generally name my classes of this type “.accessibility”. Either way, it does the trick. And, you can prove it to yourself that it works; while Jaws may be prohibitively expensive for most developers, the Standards-Schmandards guy has also created a Jaws simulator extension for Firefox called Fangs. And, the developer already has access to a copy of Jaws, which allows him to verify the accuracy of his emulator.
Fangs doesn’t read the pages aloud but it does open a separate window with the words that a screen reader would speak (including spelling out all punctuation and numbers). I’ve found Fangs to be an incredible tool as it allows developers of any means to test their pages for accessibility in screen readers. I hope that it remains under development for a long time.
Eris showed me this post, and I have to say it’s an interesting technique. I actually came up with a similar version a few years back on my weblog that is pretty much the de facto image replacement method by the majority of web designers.
My method is easier to implement because it doesn’t rely on the parent element being absolutely or relatively positioned. Also, the entire goal behind image replacement is to have your element’s background image still visible for sighted viewers, with the text being moved away as to not impede the visual experience whilst still being read by the screenreader. So if you wish to
floatthe “Skip Navigation” links or image, it’s advantageous to use my method for it doesn’t limit your presentation choices.When you lament the fact that Jaws doesn’t read
display: none;text, that is because it is trying to give disabled users the user experience which closest emulates the sighted viewers experience, therefore, it reads and understands the CSS which makes certain elements visible or not. I don’t feel this is a downfall or bug in the software, but rather quite the opposite. I’d rather have disabled users “see” the site for exactly how it is — CSS and all — rather than have a dumbed down version of it read.And it even works in IE5/Mac. Thanks for bringing this up. My projects will run much smoother now!
Thank you for the kind words about Fangs. The Standards-schmandards guy’s name is Peter.