speak-as
The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
speak-as Experimental | | | | 11.1 | | 11.3 |
digits Experimental | | | | 11.1 | | 11.3 |
literal-punctuation Experimental | | | | 11.1 | | 11.3 |
no-punctuation Experimental | | | | 11.1 | | 11.3 |
normal Experimental | | | | 11.1 | | 11.3 |
spell-out Experimental | | | | 11.1 | | 11.3 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.phone-number {
speak-as: digits;
}
.code {
speak-as: literal-punctuation;
}Live demo
Use cases
Refine text rhythm
Use speak-as to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply speak-as when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test speak-as in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features