So, you think that your semantically correct website is accessible to everyone? Maybe you even created some extra hidden headings targeted at screen readers to clarify your site structure? Maybe you thought it was smart to use display:none to hide these elements from other visitors. After all, display:none is about the display of the element, right? Sorry to spoil your fun, but display:none will make an element invisible for the most widely used screeen reader too. In fact, display:none will make an element invisible to everyone apart from source-reading propellerheads. Enter the aural text class.
[Update 2004-10-25: After writing this article I found an almost identical approach at WebAIM.]
One can understand the difficulties facing makers of screen reading software. Few websites look the same and as we all know, the web is nowhere close to following modern standards. Creating software to linearize the information in a webpage that uses javascript, table layouts and image based menus is no easy task.
This is why I can understand why Jaws does not read any text within an element with a style attribute of display:none. If it would, all sites with dhtml-based drop-down navigation would take ages to listen to as Jaws would have to read the entire menu.
Why is this a problem?
Well, since you are here reading this my guess is that you, like me, are interested in accessibility. If that is the case you are probably interested in making sure your listening visitors enjoy your website as much as those with a regular browser. If you provide complex information structures or your site is more like an application you will find a need to provide special information for your listeners. This information should not be visible on a screen but still exist in the proper context within the rest of the information.
One exmaple is to provide a descriptive h2 heading for the content in the right column of this website. A listener could then get information that the content is the same for every page. If this information was not available a lsitener would have to listen to the right colum on a few pages before deciding that that content can probably be skipped.
A stab at a solution
Since we are fond of the pragmatic approach to accessibility and web standards, lets create a CSS class that let’s us:
- Hide the text from the screen without using display:none.
- Place the text in the proper context so that it makes sense.
- Keep the rest of the layout intact (i.e. the text should not occupy any screen space).
Let’s call this class “aural text”:
.auraltext
{
position: absolute;
font-size: 0;
left: -1000px;
}
It should be fairly obvious to everyone what this CSS class does. It makes sure the content is moved off the visible area of the screen.
So, do you have any areas for your website/application that you need to clarify?
Comments are closed.