CSS Reference Aural
Aural CSS was an early attempt to style how a page sounds when read aloud — speech rate, pitch, voice. Most properties have been dropped or are no longer implemented by browsers, but the goal lives on in speech APIs and screen-reader best practices.
Historical aural properties
| Property | Was supposed to | Today's reality |
|---|---|---|
voice-family | Choose a speech voice. | Use the Web Speech API instead. |
speech-rate | Words per minute. | User configures it in the screen reader. |
pitch / volume | Pitch / volume of speech. | Screen reader handles it. |
pause-before / pause-after | Silence around elements. | — |
cue-before / cue-after | Brief sound before/after content. | — |
Modern alternatives
- Semantic HTML — landmarks (
nav,main,aside) and headings give screen readers structure for free. - ARIA —
aria-label,aria-describedby,aria-livehandle the cases HTML can't. - Web Speech API — programmatic speech synthesis from JavaScript.
Note: Aural CSS is in the spec but effectively deprecated. Don't ship it to production — use the alternatives above.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Reference Aural</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
For modern accessible audio, use the…
Answer: Web
API
A browser API for talking.
Discussion
Loading…