1. Home
  2. Computing & Technology
  3. Web Design / HTML

More from About.com

Aural Style Sheets

Making Your Web Pages Speak

By Jennifer Kyrnin, About.com

Aural Style Sheets are a part of CSS level 2. They allow blind or visually impaired people to use the Web in a similar fashion to sighted customers. It combines speech synthesis and "auditory icons". When your Web site is equipped with Aural Style Sheets, it will be more accessible to screen readers. Plus, if your site is audible, it can be used in other locations such as in an automobile, home entertainment, and assisting people who are learning to read.

Aural properties are specified in a three dimensional physical space, like surround sound. They are also specified in time (before, during and after the sound). Finally you can also define the volume and style of the synthesized speech.

Volume
Volume is exactly what it seems - the loudness of the speech.

  • number
    This is any number between 0 and 100. 0 is the minimum audible volume and 100 is the maximum comfortable level.
  • percentage
    This is a value relative to the inherited value.
  • silent
    No sound whatsoever.
  • x-soft
    This is the same as 0.
  • soft
    This is the same as 25.
  • medium
    This is the same as 50.
  • loud
    This is the same as 75.
  • x-loud
    This is the same as 100.

Speak
This specifies whether text will be rendered audibly.

  • none
    This will suppress the aural rendering so that element will require no time to render.
  • normal
    This will render the audio with standard pronounciation rules.
  • spell-out
    This spells out the text letter by letter.

Pausing
These properties define the amount of time to pause before or after the elements content.

  • pause-before
  • pause-after
    These indicate the time either in absolute numbers (seconds or miliseconds) or in a percentage of the speech-rate.
  • pause
    This is a shorthand version of both pause-before and pause-after.

Cueing
Cueing allows you to add auditory icons both before and after your elements.

  • cue-before
  • cue-after
    These define auditory icons, or sounds that are played either before or after the element. You specify either the URI to a sound element or "none".
  • cue
    This is a shorthand version fo both cue-before and cue-after.

Mixing Properties
You can even specify sounds to play as a background while the element is spoken. The property is "play-during" and it uses the following values:

  • uri
    This is the URI of the sound to play.
  • mix
    This means that the sound at the URI and the sound of the element are mixed together.
  • repeat
    This keyword tells the style to repeat until the element is complete. Otherwise the sound will run once and then stop.
  • auto
    This keyword tells the browser that the sound of the parent element should continue to play.
  • none
    And this keyword means that there is silence.
  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design Articles A-H
  6. Web Design/HTML Articles A
  7. Aural Style Sheets

©2008 About.com, a part of The New York Times Company.

All rights reserved.