TL;DR — CSS offers you properties for combining speech synthesis and prerecorded messages to allow users to listen to your content.
The speech module
The CSS speech module is for helping blind, visually-impaired, or people who cannot read written content. There are cases when people prefer hearing information rather than reading it as well.
Note: the aural style sheets have been deprecated. The speech module replaced them.
The CSS sound properties can make your website presentable in the aural dimension. The aural module works with speech synthesis and auditory icons. CSS aural properties let you control the pitch and rate of the speech, voices, the sound levels.
Note: in the future, azimuth CSS values might be supported, but not currently.
Creating the module
In this example, the speech synthesizer will play a sound effect and read the headers in a female voice:
h1, h2, h3, h4 {
voice-stress: moderate;
voice-family: female;
voice-rate: normal;
cue-before: url("rawr.au");
}
List of properties
There are many properties for managing the aural style sheets. For instance, you can set the CSS speak: never to prevent a specific element from being read. The CSS speak: none value does not exist.
| Property | Description | Values |
|---|---|---|
| voice-volume | Sets the vibration of the audio waveform and the volume level of audio cues | silent x-soft soft medium loud x-loud decibel number with dB |
| voice-balance | Sets whether the spoken voice is coming from the left or right side | <number> left center right leftwards rightwards |
| speak | Sets whether text needs to be rendered aurally | auto never always |
| speak-as | Indicates how the text is read | normal spell-out digits literal-punctuation no-punctuation |
| pause-before | Sets a silence for a specific amount of time before the speech synthesis rendition or the cue | <time> none x-weak weak medium x-strong |
| pause-after | Sets a silence for a specific amount of time after the speech synthesis rendition or the cue | <time> none x-weak weak medium x-strong |
| pause | A shorthand property for pause-before and pause-after | <time> none x-weak weak medium x-strong |
| rest-before | Sets a silence for a specific amount of time before the speech synthesis rendition | <time> none x-weak weak medium x-strong |
| rest-after | Sets a silence for a specific amount of time after the speech synthesis rendition | <time> none x-weak weak medium x-strong |
| rest | A shorthand for rest-before and rest-after | <time> none x-weak weak medium x-strong |
| cue-before | Sets auditory icons. For instance, prerecorded messages to be played before the selected element | <uri> <decibel> none |
| cue-after | Sets auditory icons. For instance, prerecorded messages to be played after the selected element | <uri> <decibel> none |
| cue | A shorthand for cue-before and cue-after | <uri> <decibel> none |
| voice-family | Sets how the text should be read. Multiple values can be added in case one of them fails | <name> <generic-voice> <age> <gender> <integer> preserve |
| voice-rate | Sets the rate for the text reading (per minute) | normal x-slow slow medium fast x-fast <percentage> |
| voice-pitch | Sets the baseline pitch of the speech output (based on the voice-family) | <frequency> absolute x-low low medium high x-high <semitones> <percentage> |
| voice-range | Sets the deviation from the average pitch | <frequency> x-low low medium high x-high <semitones> <percentage> |
| voice-stress | Sets the strength of emphasis which is signaled by the change of pitch, loudness, etc. | normal strong moderate none reduced |
| voice-duration | Sets the time in which the selected element should be read | auto <time> |