The Aural Text Class

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:

  1. Hide the text from the screen without using display:none.
  2. Place the text in the proper context so that it makes sense.
  3. 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?

This entry was posted on Friday, October 8th, 2004 at 8:17 pm and is filed under Easy Listening. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments

  1. MiMaS says at 2004-12-02 14:12:

    Please also take a look at ScreenreaderVisibility on css-discuss wiki

  2. scotbot says at 2004-12-15 10:12:

    What about visibility:hidden? Will that hide the element from a screenreader, too?

  3. scotbot says at 2004-12-15 11:12:

    re visibility:hidden:

    Yes: this will be invisible to the readers, too. Best to use the aural class instead. Good work!

  4. Leigh D'Sylva says at 2005-01-11 20:01:

    Excellent article. I’ve just implemented this on a site I’m developing. I’m sure somewhere in this article is an answer for “image replacement” with regard to accessibility, but I can’t see it yet. Any thoughts of a tutorial on this?

  5. Thomas D. says at 2005-03-17 19:03:

    Great idea, certainly better than all others I’ve seen before.

    Just one thing kind of scares me looking at http://www.google.com in this context:

    (Quote) However, certain actions such as cloaking, writing text that can be seen by search engines but not by users (…) may result in permanent removal from our index.

  6. Rich says at 2005-07-11 21:07:

    Hmm, never thought about the google warning before (see previous comment). Has anoyone had experience with this, or can anyone vouch for google’s implementation of such a policy?

  7. Adrian L. says at 2005-07-22 17:07:

    I’d imagine that Google wouldn’t delist a site unless the technique was being used maliciously to alter results placement.

    Of course, I’m no Google expert.

  8. Dennis West says at 2005-10-21 21:10:

    Interesting Article.

    Responding to: “(Quote) However, certain actions such as cloaking, writing text that can be seen by search engines but not by users (…) may result in permanent removal from our index.”

    I’ve been wondering about how google treats text style with display:none because I’ve been using image replacement on some headlines and headers on my site. I did a search for “Dennis West Design Spokane Washington” which is the text that is hidden and replaced with my logo at the top of my page. Interestingly enough the second result showed that text in the excerpt that google put in my search results. That is text that doesn’t show up on my page but Google is indexing it. It’s a relief to me that that text IS being seen. Now if google is placing less importance on that text, I don’t know, but…

    Sorry if this was a bit off topic, but your article and the comments made me want to try that out.

    Thanks

  9. marc says at 2006-02-23 19:02:

    What are your thoughts of the map tag? http://www.w3.org/TR/WCAG10-HTML-TECHS/#group-bypass

    I notice that Fangs doesn’t indicate the map tag.

Peter Krantz, peter.krantz@giraffe.gmail.com (remove giraffe).