CSS Aural Style Sheets

A website that reads out the content to you is something very real and doable in today’s time.

Aural Style Sheets are the special type of CSS style sheets that can help the user listen to the website information instead of them reading it on their own. This is possible by two key features:

  • Speech Synthesis
  • Sound Effects

The aural styling of the web-pages can be very helpful in multiple situations like:

  • Easy usage by visually impaired as the content practically reads itself out loud
  • Reading information in a unknown script (for e.g. a language that the user understand but cannot read)
  • Differently abled users who have difficulty in reading (apart from visual impairment)
  • Home or Personal Entertainment (for e.g. story reading
  • Reading stuff while travelling. For instance, listening to the newspapers clips while driving a car.
  • Situations where printed material is not available

The main feature that makes the aural presentation of the website data possible, is a special program called the ‘Screen Reader’.

For getting the website data to read itself out, the aural style first converts the web-page content into plain text. This plain text is then sent to the screen reader program that helps in the reading part.

Here’s a list of some useful Aural properties:

  • azimuth: It gives the origin direction for the sound. You can program the sound to appear to be coming from left, right, behind, center etc.
  • pause: Helps setting pause before or after reading an element’s content.
  • speak: Helps you pick and choose the content that you want to be read out. You can also set it to spelling-out the content instead of speaking the words.
  • volume: The speaking volume can be altered using this property.
  • stress: You can stress upon a certain part of the speech using this property. With the help of correct combinations of volume and stress properties, you can make the content read naturally.