This article was written by Joshua Briley.
The web is alive… CSS and XHTML have been a hot topic over the last few years. Many websites are dedicated to showing its readers how to utilize valid markup — as recommended by the W3C — separating style from content, to create beautiful sites.
Of course, there are those who would debate the beauty inherent in most CSS sites. Let’s face it; there are still some limitations. It’s important that designers like Dave Shea, Dan Cederholm, and Eric Meyer are pushing the boundaries of these technologies every day. One thing rarely mentioned in CSS discussions is the topic of aural style sheets. It can be assumed that limited user agent support is the culprit for limited discussion on the topic, but rest assured, support is on the way. Aural style sheets can add more of a human element to audibly presented sites. No longer should visitors have to listen to mechanical, lifeless presentations. Below is a discussion on current user agents, linking aural styles to your documents, and utilizing several properties and values.
A common assumption is that aural style sheets are created to assist users with physical limitations. It should be known that accessibility techniques benefit a wider range of site visitors. To discuss all accessibility possibilities is outside the scope of this article. To learn more about the accessibility demographic, refer to the works of Jakob Nielsen. Imagine being in a vehicle, listening to your GPS program. Wouldn’t it be nice if street names were spoken louder and slower, making the names easier to understand? Wouldn’t it also be nice to select a voice that speaks in a frequency range that is comfortable to hear? With aural style sheets, these options are already a reality. There are a limited number of user agents currently supporting aural style sheets: Emacspeak, Fonix SpeakThis, and the Opera Browser (with “Voice” plug-in) are three agents that support this technology. Rest assured, this list is growing.
CSS 2 initially defines the media type for aural style sheets as “aural” — this will change in CSS3 to “speech.” Linking to an external style sheet would look something like:
<link rel="stylesheet" type="text/css" href="aural.css" media="aura" />
Nothing fancy about that, right? This looks like a typical style sheet link in the document head. Like typical screen media styles, the aural styles can also be applied as inline styles:
<h1 style="speak:normal">Spoken Heading</h1>
The next consideration is whether or not content within certain elements should be audible. The CSS property responsible for this action is “speak.” As seen above, the initial or default value for the speak property is normal. The other values are “none,” “spell-out,” and “inherit.” The functions of those values are very clear.
Other very useful properties and their values are listed below:
- Code: reads the punctuation used within the content
- none: eliminates the punctuation, leaving appropriate pauses
- inherit: takes on the value of the parent containing element
- digits: a string of numbers is spoken as a whole number (123 = one hundred twenty-three)
- continuous: numbers in a string are read successively (123 = one two three)
- inherit: see above property
- once: Reads the table header once for all corresponding cells
- always: Reads the table header before every cell is read
- inherit: see above
- x-slow: 80 wpm (Words Per Minute)
- slow: 120 wpm
- medium: 180 – 200 wpm
- fast: 300 wpm
- x-fast: 500 wpm
- faster: increases the speech rate used for the parent container by 40 wpm
- slower: decreases the speech rate used for the parent container by 40 wpm
- silent: no sound
These properties and values only scratch the surface of the CSS aural style sheet possibilities. Other possibilities include changing the voice of the user agent by altering pitch, stress (a way to define stress patterns associated with common parts of speech), richness (the brightness of a voice), pauses, etc. One of the more advanced features of aural style sheets is the ability to position the sound. That is right! Surround-sound style sheets. This can be extremely useful if applying more than one voice for a web page.
In its infancy, aural style sheets are already extremely advanced. As user agents step up and embrace this existing technology, the Internet will take another major leap in its evolution. The question is, how many developers will be ready to meet the standard?
For the full skinny on CSS aural style sheets, please visit the W3C’s CSS2 Aural Style Sheets page.
Update! — 2007.02.15
Thanks to a heads up from Jon Gibbins, and a test series he has written, it is best to add to this article that aural style sheets are not well supported. In other words, the information in this article shouldn’t be relied upon to do anything except add the aural equivalent to a presentational layer to a page for the small number of devices and software that do provide some level of support. Nothing more.