ACSS: Aural Style Sheets

By Joe Burns

Use these to jump around or read it all...
[The Voice]
[Spatial Settings]
[Speak It!]

At the time of this writing (12/13/01), the CSS commands and properties included within this tutorial aren't supported by any browser. In fact, the concept of Aural Style Sheets (ACSS) is little more than a section of the CSS recommendation for CSS2 by the W3C. However, I believe it is such a stunningly good idea that it is only a matter of time before the browser world catches up with it and begins adding the commands to their DTDs.

The basic concept is that, with ACSS, disabled assistant browsers can "read" the text of a page to the person using the browser. Better yet, the ACSS commands allow you, the author, to set numerous "reads." For example, if your page is a question and answer format, you could have a female voice read the question and a male voice answer. You could have numbers read one by one like a phone number or all together as in, "10,354." You can control volume, spatial placement, and numerous other aspects regarding the sound of your site. In short, you will decide how your page will be read to the person visiting the page.

The commands work the same way as any other CSS command. The formats are equal. In this tutorial I'll offer the commands in a style block format. Just know that these commands may also be used in a true style sheet or inline style format. Both will work.

Let's take a look.

The Voice

Here's a sample Style block setting some voice characteristics:

<STYLE TYPE="text">

B {voice-family: male; speech-rate: fast; }
I {voice-family: female; speech-rate: medium;}


In the example above I'm thinking about setting up a question-and-answer format whereas a male voice will read the bolded questions. A female voice will read the italicized answers. I've also set the speed of the speech. Here are both of the Style Sheet commands in a little more detail.

ACSS: voice-family

The "voice-family" command offers two default voices, "male" and "female." However, it is also user dependant. If the user has a program installed that offers a voice, then you can call on it using this command. For example, the user has a voice on the computer that's named, "Bob." Where I have "male" above, you would use "Bob."

ACSS: speech-rate

The command "speech-rate" offers numerous levels of speed:
     x-slow: 80 words per minute.
     slow: 120 words per minute
     medium: 180 - 200 words per minute.
     fast: 300 words per minute.
     x-fast: 500 words per minute.
     faster: 40 words per minute added.
     slower: 40 words per minutes taken away.

ACSS: pitch, pitch-range, stress, richness

The four commands noted above would all act to enhance the voice. The command "pitch" sets the pitch, obviously. You man set it to any of the following: x-low, low, medium, high, x-high. Depending on the voice-family, the pitch of the voice will rise or fall thus, none of the properties carry any specific frequency level. It's hit and miss until you're happy with the sound.

The commands "pitch-range," "stress," and "richness" are all set with a number. The default is 50. You may choose any number between zero and 100. I would assume these commands are best reserved for inline Style Sheet commands so you may stress or punch up one word or a short phrase. I wouldn't think you'd want to stress the heck out of an entire speech.

Spatial Settings

Anyone who has listened to Pink Floyd in headphones fully understands the concept of the stereo spectrum. Setting a sound into a spatial realm is to set the voice somewhere in a stereo spectrum. This means that the voice will appear to be coming from the left or the right of the listener. Audio and music buffs might call this setting the sound left or right.

When I was in radio, I would often create two-voice commercials where one person was talking to another. I would set the two voices so that one was offset to the left and the other was offset to the right. That way, when the listeners heard the spot, the two people seemed to be facing one another talking across the listener.

Oh, I can lecture on this concept for hours.

To set a spatial attack using ACSS, you'll use the commands, "azimuth" and "elevation."

The command "azimuth" sets the left and right placement. Center is the default. Past that, try these: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards, and/or a specific degree setting between 1 and 360.

The command "elevation" sets the sound in what's known as the "tilt" range. Is the sound coming from above or below? I've never liked these settings in audio production but you may feel different. Try these settings: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, leftwards, rightwards, and/or a specific degree setting between -90 and +90

Here's an example of the commands using out example above:

<STYLE TYPE="text">

B {voice-family: male; speech-rate: fast; azimuth: center-left; elevation: +10}
I {voice-family: female; speech-rate: medium; azimuth: center-right; elevation: -5}


The commands above would suggest that the man is standing to the left of the listener. The woman is on the right. The elevation would suggest the man is taller than the listener and the woman is shorter.

Of course, none of this really matters unless the user has a sound system that can receive and reproduce these spatial settings.

Speak It!

The command "speak" allows you to set the system to either state the text using normal rules of speech, "normal," or to spell out each letter, "spell-out." Again, the later is best used as an inline command so that it would spell out initials or acronyms.

There are two sub-categories of "speak," "speak-punctuation" and "speak-numeral."

speak-punctuation: code will speak all punctuation.
speak-numeral: digits will read the numbers individually

That's That

There are a few other commands under the heading of ACSS, but they are very specific. If you wish to read more about them, see here. What I've given you above will get you through 95% of anything you wish to do with ACSS.

Again, ACSS is not in full use yet, but it's coming. I think it's a great idea and now you're ahead of the curve. You actually understand the language.

How about that?


[The Voice]
[Spatial Settings]
[Speak It!]

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date