How to use Aural CSS?

Question

1. I've read one place that aural stylesheets are no longer in use? Is there something that has replaced them? I'm sure something is being used to make things easier for those who are visually impaired?

2. If aural CSS is in use still, is there a way to specify what should be said in a specific place, similar to using "alt" for images? For instance, I'm using an iconfont for my logo. I'd like to be able to have the user hear the name of my company, but because it's just done with a span, there's no place in that particular span that indicates the words (I'm assuming here that the system reads the words displayed on the screen, and not all the code with it, so obviously this works better if there's actual text to read). Maybe include a content: 'whatever text you want' is added somehow?

The gist is that I'm working on a site about opera for a client, and the client would like for the content to be accessible to everyone. And obviously someone with visual impairment is going to be especially wanting to hear things.

Answer 1

1. Is there a replacement for aural?

Aural stylesheets have indeed been deprecated as of CSS3. Major browsers such as Firefox removed the implementation a while ago. There is still a speech media included, but I haven't seen any implementations so far (it just seems to be a proposal at this point).

Many people with visual impairments use screen readers and to a lesser degree refreshable braille displays to view the content, so you usually don't have to worry about a direct implementation of speech. Important points for that to work are:

• People have to be able to navigate through your content using the tab key
• All relevant rich content such as images etc. need to have a text equivalent.
• Your html should be semantic (have a look at the aria attributes)

2. How can you make icon fonts (and other non-legible items) accessible?

In this article on bulletproof accessible font icons they propose a pretty good solution:

Since the characters don't have any direct semantic meaning, you could include them in the :before pseudoclass of your span:

.logo:before {
    font-family: YourIconFontFamily;
    content: "★";
}

And then include the company name directly in the span:

<span class="logo">Your company<span>