CSS speak Property
How to use the speak CSS property to make the element render aurally. Read about the property and see values.
Note: The
speakproperty is obsolete. No mainstream browser implements it, and screen readers do not read it from CSS. Treat this page as reference for legacy code and use real accessibility techniques (semantic HTML, ARIA, thearia-hiddenattribute) instead.
The CSS speak property defines whether — and how — an element's text is rendered aurally: that is, spoken aloud by a speech synthesizer in an aural user agent (the kind of tool a screen-reader user relies on). It belongs to a family of "aural" / "speech" CSS features that were meant to style audio output the way ordinary CSS styles visual output.
This page explains what the property was supposed to do, every value it accepts, why it never shipped, and what to use today.
Why this property exists (and why it failed)
The idea behind speak was tidy: just as display: none hides an element from a visual page, speak: none would hide it from a spoken page, while spell-out would force a synthesizer to read a string one character at a time (useful for an acronym like "URL" or a serial number).
In practice the spec moved around — values were split between CSS 2.1 and the later CSS Speech Module — and no browser ever shipped it. Screen readers read the rendered DOM and accessibility tree, not your stylesheet, so they never honored speak either. That is why it is marked obsolete: it has no effect anywhere.
What to use instead
Because speak does nothing, reach for techniques that assistive technology actually respects:
- Hide content from everyone (including screen readers): use
display: noneor thehiddenHTML attribute. This is the real-world equivalent of the oldspeak: none. - Hide content visually but keep it for screen readers: a "visually hidden" / "sr-only" utility class (off-screen positioning), so an icon-only button can still announce a label.
- Hide decorative content from screen readers only:
aria-hidden="true"on the element. - Spell something out: there is no reliable CSS way; use clear text, an
abbrelement, or anaria-labelwritten the way you want it pronounced.
Values
The property accepts six keyword values plus the two CSS-wide keywords (initial, inherit). none, normal, and spell-out come from CSS 2.1; auto, never, and always come from the CSS Speech Module.
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2, CSS Speech Module |
| DOM Syntax | element.style.speak = "always"; |
Syntax
CSS speak syntax
speak: auto | normal | spell-out | none | never | always | initial | inherit;A minimal declaration looks like this (it will have no observable effect in any current browser):
.acronym {
speak: spell-out;
}Value reference
| Value | Description |
|---|---|
none | Prevents the element and its contents from being rendered aurally. |
normal | Uses language-dependent pronunciation rules for rendering an element and its children. |
spell-out | Spells the text one letter at a time, typically used for acronyms and abbreviations. |
auto | Resolves to a computed value of none when display is none, otherwise resolves to auto which yields a used value of normal. |
never | Prevents the element from being rendered aurally. |
always | The element is rendered aurally. |
initial | Makes the property use its default value. |
inherit | Inherits the property from its parent element. |
Browser Compatibility
No mainstream browser implements speak. The declaration is parsed but ignored everywhere, so it never reaches a screen reader.
| Browser | Support |
|---|---|
| Chrome | No |
| Firefox | No |
| Safari | No |
| Edge | No |
| Opera | No |
Related properties
display— the modern, supported way to remove an element from the page (and the accessibility tree) entirely.content— generated content that does get announced by screen readers, so use it with care.cursor— another presentational property, this one fully supported.