-
Notifications
You must be signed in to change notification settings - Fork 33
Support for speak-as property to control aural presentation #114
Description
Description
All browsers should support the CSS 'speak-as' property that allows authors to determine the aural presentation of content; e.g., how a screen reader should read it. For example, by setting the value 'digits' for a number, it will be read one digit at a time.
Specification
CSS Speech Module (speak-as property)
Tests
There are currently no web-platform-tests (on https://wpt.fyi) for the feature. I've manually tested the feature in Firefox, Chrome and Safari with the screen readers NVDA, VoiceOver and TalkBack. Only the combinations VoiceOver/Safari and VoiceOver/TalkBack on iOS worked.
Rationale
Numbers, abbreviations and equations can pose a challenge for screen reader users. Using the speak-as CSS property, authors could determine how text should be read to improve the user experience for screen reader users.
There are hundreds of relating questions on StackOverflow (I only include a few below) as well as several dev blog posts:
- https://stackoverflow.com/questions/60984996/screen-readers-not-reading-numbers-as-individual-digits
- https://stackoverflow.com/questions/60435580/force-screen-reader-to-read-numbers-as-individual-digits
- https://stackoverflow.com/questions/34090270/can-you-force-a-screen-reader-to-read-numbers-as-individual-digits/34092024
- https://css-tricks.com/lets-talk-speech-css/
- https://css-tricks.com/almanac/properties/s/speak/
- https://blog.joech.io/css-speech-module
- https://oidaisdes.org/spell-it-out-screen-reader.en/
At the moment, there are possible workarounds available to developers, where they use CSS and/or ARIA attributes to enforce a certain pronunciation. But these workarounds are insufficient and create severe accessibilty problems. Also, screen reader user should retain control over how content is pronounced (e.g. via verbosity settings).