CSS 可以影响屏幕阅读器

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度!

Ben Myers 提供了一些清晰的示例,说明 CSS 如何彻底改变某些屏幕阅读器宣布的内容。 例如,一些屏幕阅读器会看到 text-transform: uppercase; 在一个显示“添加”的按钮标签上,并将其读作缩写,“A.D.D.”

这些 CSS 干扰屏幕阅读器公告的案例最初令人震惊、困惑,甚至令人反感。 毕竟,它们似乎与我们对 CSS 的心理模型相冲突,这种模型很可能在我们开始学习网页开发时就被灌输给了我们:HTML 用于内容,而 CSS 用于视觉外观。 这是内容和表现的分离。 在这里,通过更改屏幕阅读器宣布的内容,感觉 CSS 正在侵犯内容领域。

更多证据表明我们必须实际测试事物。 我测试了上面的 示例 在 VoiceOver 中,果然,是“A.D.D.”

直接链接 →