1. Technology

Aural Style Sheets

Making Your Web Pages Speak


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 website 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 is exactly what it seems — the loudness of the speech. You can define the loudness with the volume property using one of the following values:

  • 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.


The speak property specifies whether text will be rendered audibly. You can define it in several ways:

  • 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.


The pausing properties define the amount of time to pause before or after the elements content. This makes your text much easier to understand.

  • pause-before
    The amount of time to pause before reading the content.
  • pause-after
    This is, of course, the amount to pause after reading the content. 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. Write it with pause-before first, a space, and then pause-after.


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

  • cue-before
    Define auditory icons, or sounds that are played before the element. You specify either the URI to a sound element or “none.”
  • cue-after
    Define auditory icons, or sounds that are played after the element. You specify either the URI to a sound element or “none.”
  • cue
    This is a shorthand version of both cue-before and cue-after. Write cue-before, a space, and then 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.

©2014 About.com. All rights reserved.