CSS Reference Aural

Key Aural Properties

speak: always | none | normal;

voice-family: male | female | child;

speech-rate: slow | medium | fast;

volume: silent | soft | medium | loud;

🔹 Speech Properties

speech-rate: slow slows down the speech rate for important announcements, improving comprehension. Values range from x-slow to x-fast, or specific words-per-minute numbers. Use this for critical instructions, legal disclaimers, or complex terms that need careful listening. Adjusting the rate can make spoken content more accessible to users with cognitive disabilities or those listening in noisy environments. Note that support is very limited across browsers and screen readers, so consider this an enhancement rather than a core accessibility feature.

/* Speech control properties */
.heading {
    speak: always;
    voice-family: male;
    speech-rate: medium;
    volume: medium;
    pitch: medium;
    pitch-range: 50;
}

.quiet-text {
    speak: none; /* Won't be read aloud */
}

.important {
    speak: always;
    speech-rate: slow;
    volume: loud;
    stress: 50;
}

🔹 Voice Characteristics

richness adjusts the smoothness or harshness of the voice, with values from 0 (smooth, soft) to 100 (rough, penetrating). A smoother voice (richness: 0) might be used for calming content, while a richer voice (richness: 80) could convey authority or urgency. Like other speech properties, its effectiveness is limited by inconsistent support across platforms. For critical auditory cues, prefer established methods like volume, pacing, and clear language, rather than depending on stylistic voice modifications.

/* Voice customization */
.narrator {
    voice-family: "David", male;
    pitch: low;
    pitch-range: 20;
    richness: 80;
}

.character-dialogue {
    voice-family: female;
    pitch: high;
    pitch-range: 60;
    speech-rate: fast;
}

.robot-voice {
    voice-family: "Robot", male;
    pitch: x-low;
    pitch-range: 0;
    richness: 0;
}

🔹 Pause and Cue Properties

Pause and cue values are specified in time units: seconds (s) or milliseconds (ms), such as pause-before: 1s; or pause-after: 200ms;. These units allow precise control over auditory timing. For example, a longer pause (1.5s) might precede a major section, while a short pause (200ms) separates list items. Consistent use of timing can create a predictable listening rhythm. Despite the precise specification, practical application is hampered by lack of support in mainstream screen readers, limiting these properties to theoretical or experimental use.

/* Pause and cue control */
.section-break {
    pause-before: 2s;
    pause-after: 1s;
}

.list-item {
    cue-before: url("beep.wav");
    pause-after: 0.5s;
}

.chapter-title {
    pause-before: 3s;
    cue-before: url("chime.wav");
    pause-after: 2s;
    cue-after: url("chime.wav");
}

🔹 Modern Accessibility Alternative

The .sr-only (or screen-reader only) class hides content visually but keeps it available for assistive technologies. It uses CSS like position: absolute; clip: rect(0 0 0 0); to remove elements from the visual flow while keeping them in the DOM. Use this for additional context, form instructions, or hidden headings that improve navigation for screen reader users. Never hide interactive elements this way. This technique is a cornerstone of accessible design, ensuring information is available to all users regardless of how they access the content.

<div aria-live="polite" aria-label="Important announcement">
    <p>Your form has been submitted successfully.</p>
</div>

<button aria-describedby="help-text">Submit</button>
<div id="help-text" class="sr-only">
    This will submit your form data
</div>

<img src="chart.png" alt="Sales increased 25% this quarter">

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}