speak-as
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The speak-as CSS property is used to define how HTML content is spoken. The one to three enumerated key terms determine the manner by which elements and text get rendered by aural technologies, such as screen readers and digital assistants.
This property applies to all content, including pseudo-elements, with the exception ::marker pseudo-elements constructed via a @counter-style with a defined speak-as descriptor, which takes precedence over any inherited speak-as property value.
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 |
Syntax
.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.