A Look Into Speech Support in CSS3

By Vipul Patel

The speech module of CSS, available at http://www.w3.org/TR/css3-speech , describes the various properties that allows web content developers to declare the rendering of web documents via speech synthesis.

In addition to this, the specification also defines optional audio cue which can be used in web documents.


The CSS3 speech properties support controlling the pitch and rate of sound, as well as sound levels. In addition, they also support Text To Speech voices. By working together with visual properties, these speech properties provide a rich presentation experience to the readers browsing the content.

The CSS3 Speech Module introduces a new "box model" for the aural dimension.

User agents with text to speech capability can be targeted

  • By specifying the "speech" media type using the media attribute of the link element,
  • Using the @media at-rule,
  • Within an @import statement.


Let us take a look at the various speech related CSS3 properties



This property is used to control the amplitude (volume) of the audio which will be generated by the text to speech engine. It can also be used to adjust the relative volume level of audio cues of a selected element.

       Valid values are:

  • silent - This value means no sound is generated
  • x-soft/soft/medium/loud/x-loud - These values represent monotonically increasing volume levels (implementation depends on the user agent). The default value of voice-volume is "medium".
  • <decibel> - Any number followed by "dB".



This property specifies the balance (spatial distribution) of the audio output, relative to the listener's position. The valid range is from -100 to 100.

     Valid values are:

     <number> - Any number between -100 and 100 with 0 representing center point.

  • left- This is equal to -100, will push audio output on the left side only.
  • right - This is equal to 100, and will push audio output on the right side only.
  • center - This is equal to 0.
  • leftwards - For an inherited "voice-balance" value, this moves the sounds to the left by 20, for a maximum of -100.
  • rightwards - For an inherited "voice-balance" value, this moves the sounds to the right by 20, for a maximum of 100.



This property determines whether text can be rendered aurally or not.

     Valid values are:

  • auto - When 'display' property is set as 'none', this is imputed as 'none'; otherwise, it is imputed as 'normal'.
  • none - This blocks the element to not have any effect in the aural dimension
  • normal - This causes the element to be rendered aurally.



This property determines how the text is rendered aurally.

     Valid values are:

  • normal - This specifies to use language-dependent pronunciation for rendering the content.
  • spell-out - This specifies the each letter be spelt out by the user agent.
  • digits - This specifies the user agent to speak numbers one digit at a time.
  • literal-punctuation - This specifies that punctuation be named out aloud
  • no-punctuation - This specifies that punctuation is not rendered.



These properties specify a silence before/after the speech synthesis of the selected element. These properties can be represented in short-hand using "pause" property.

     Valid values are:

  • <time> - A non-negative value that described the pause in absolute time limits.
  • None - no wait period
  • x-weak/weak/medium/strong/x-strong - User agent defined pause .



These properties specify a silence of a specific duration before/after speech synthesis of the selected element. These properties can be represented in short-hand using "rest" property.

Valid values are the same as the "pause-before" and "pause-after" property.



These properties specify pre-recorded items to be played before/after the selected element.

It takes in a <URI> and a <decibel> value. It can be represented in short-hand using the "cue" property.



In this article, we learned about the various speech related properties which are specifies in the CSS3 speech module. This module is currently at the "Candidate Recommendation" stage.

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508




  • 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