The CSS Speech Module

h1
{
voice-volume: medium 6dB;
}
h1
{
voice-balance: left;
}
h1
{
speak: always;
}
h1
{
speak-as: spell-out;
}

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.

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>

--

--

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