惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
WordPress大学
WordPress大学
博客园 - 三生石上(FineUI控件)
H
Help Net Security
小众软件
小众软件
The Cloudflare Blog
人人都是产品经理
人人都是产品经理
Apple Machine Learning Research
Apple Machine Learning Research
S
SegmentFault 最新的问题
Last Week in AI
Last Week in AI
爱范儿
爱范儿
量子位
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
博客园 - 【当耐特】
V
Visual Studio Blog
大猫的无限游戏
大猫的无限游戏
博客园_首页
Jina AI
Jina AI
D
Docker
博客园 - 司徒正美
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Microsoft Security Blog
Microsoft Security Blog
阮一峰的网络日志
阮一峰的网络日志

Matthias Ott

Hello Again, World This, Still Not for Everyone The Shape of Friction WeissKlang L1 – Punching Above Its Weight Continvoucly Morged Value Webspace Invaders To Affinity and Beyond The Mystery of Storytelling Amateurs! Echoes of Connection Linear() Is Not (That) Linear View Transitions: The Smooth Parts Adding AVIF and WebP Support to My Craft CMS Site Challenge Acoustic Room Treatment and Building Sound Panels, Part 1: Planning Play On Overshoot The HTML Output Element Listening Closely Compressed Fluid Typography The Lifeblood of the Web What Could Go Wrong? That’s My Rank Making Space CSS :is() :where() the Magic Happens Visual Regression Testing for External URLs With Playwright Jane Goodall’s Famous Last Words European Tech Alternatives 🇪🇺 Independent Type Foundry Advent Calendar – Day 24: NaN Independent Type Foundry Advent Calendar – Day 23: Typotheque
CSS Speech Module Level 1 · Matthias Ott
Matthias Ott · 2023-02-18 · via Matthias Ott

As I noted yesterday, screen readers don’t convey the semantics of many HTML elements like strong or em.

When I shared my post on Mastodon, Stéphane Deschamps chimed in and pointed to an promising candidate recommendation fresh from the press that might give authors much more control over how screen readers handle their content: CSS Speech Module Level 1.

Please bear in mind that this is still only a so-called W3C Candidate Recommendation Draft. This means that it is not a standard (yet), nothing of this is available in any browser as of today, and a lot of things might still change before any browser implements any of those features.

Still, it is worth to have a first look at what is being discussed at the W3C. And because the process is quite open these days, you can also provide feedback if you want.

Reading through the document, you’ll encounter a few really exciting properties that might one day find their way into CSS.

Auditory Styles #

The voice-volume property, for example, allows authors to control the volume level of the speech synthesizer with keywords like ‘x-soft’, ‘soft’, ‘medium’, ‘loud’, ‘x-loud’ – or adjust the volume by a certain decibel value.

With the speak property, you’ll be able to declare whether or not a piece of text should be read at all using keywords like ‘auto’, ‘never’, or ‘always’.

Where it gets really interesting is the speak-as property. With the ‘spell-out’ keyword, text will be spelled one letter at a time. ‘digits’ will make the screen reader speak numbers one digit at a time. And with ‘literal-punctuation’ or ‘no-punctuation’, you can control whether or not semicolons, braces, and so on are named aloud. Really useful, not only for product, brand, or band names.

There are many more interesting properties that let you insert pauses, for example, or playback auditory cues before or after an element. And you will even be able to adjust voice characteristics like age or gender with the voice-family property and the voice-rate at which voice is spoken in words per minute.

Overall, this looks like a really exciting new draft of a document of which the first version, as I realized, was published more than ten years ago. It is great to see that editors like Léonie Watson and Elika Etemad (fantasai) are now working on this again. Let’s hope that this time, also with the growing awareness for accessibility in Corporate America and the EU, enough momentum can be gained so that many of those properties make it into browsers as soon as possible.

~

17 Webmentions

6 Reposts

9 Likes

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.