The CSS Speech Module

You may be thinking that this is an idea for a future module of CSS but actually the CSS specification for this was already finished six years ago.

But why have you never heard about it?
Because (almost) no browser supported it and in the end it was retired by W3C a month ago on 2018–06–05.

History

On 2012–03–20 the CSS speech module reached CR (Candidate Recommendation) and remained in this state until it was retired just about one month ago before any of the most-used browsers implemented it.

But what was the idea behind the module?

The idea

The module aimed to assist people who are blind, visually-impaired or otherwise print-disabled by enabling websites to optimize their content aurally. This technology could also be used for other things like teaching kids how to read.

So now that you know about the goals of the CSS speech module let’s see some code!

Properties

voice-volume
With the voice-volume property you can control the volume.

Some valid values are silent, x-soft, soft, medium, loud or x-loud. But you can also use decibel if you’d like! The decibels represents the change (positive or negative) relative to the given keyword value (see enumeration above) or to the default value for the element.

h1
{
voice-volume: medium 6dB;
}

voice-balance
With voice-balance you can control the spatial distribution of audio output. You can use a number between -100 and 100 or any of the following values: left, center, right, leftwards, rightwards.

h1
{
voice-balance: left;
}

speak
The speak property determines whether or not to render text aurally.
You can either use auto, never or always. It’s important to know that the initial value of speak is auto and if the value is auto it will use the value of the display or visibility-property on the element. So if you set your element to display: none it will also set speak to the value never.

h1
{
speak: always;
}

speak-as
You can use speak-as to determine in what manner text gets rendered aurally, based upon a predefined list of possibilities.

Valid values are normal, spell-out, digits, literal-punctuation or no-punctuation. So you could use e.g. spell-out to spell the text one letter at a time or digits to speak numbers one digit at a time.

h1
{
speak-as: spell-out;
}

The aural formatting model

The CSS formatting model for aural media is based on a sequence of sounds and silences that occur within a nested context similar to the visual box model, which we name the aural “box” model.

The image above visualises the order of pause, cue and rest as well as their visual box model equivalents.

Voice characteristics

Example

h1, h2, h3, h4, h5, h6
{
voice-family: paul;
voice-stress: moderate;
cue-before: url(../audio/ping.wav);
voice-volume: medium 6dB;
}
p.heidi
{
voice-family: female;
voice-balance: left;
voice-pitch: high;
voice-volume: -6dB;
}
p.peter
{
voice-family: male;
voice-balance: right;
voice-rate: fast;
}
span.special
{
voice-volume: soft;
pause-after: strong;
}

...

<h1>I am Paul, and I speak headings.</h1>
<p class="heidi">Hello, I am Heidi.</p>
<p class="peter">
<span class="special">Can you hear me ?</span>
I am Peter.
</p>

Conclusion

I also have mixed opinions on whether the module was actually a good idea. It could help users who are blind or visually-impaired by optimizing the content for a better experience. But maybe these users actually find it more disturbing than helpful if you mess around with things like the speed of voice on your website because they are used to their personal settings of the screen reader.

What do you think about the idea and goals of the CSS speech module?
Let’s discuss it in the comments!

--

--

Freelance Web Developer and Indie App Developer. More about my work on https://joech.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store