Ben Myers 提供了一些清晰的示例,说明 CSS 如何彻底改变某些屏幕阅读器宣布的内容。 例如,一些屏幕阅读器会看到 text-transform: uppercase;
在一个显示“添加”的按钮标签上,并将其读作缩写,“A.D.D.”
这些 CSS 干扰屏幕阅读器公告的案例最初令人震惊、困惑,甚至令人反感。 毕竟,它们似乎与我们对 CSS 的心理模型相冲突,这种模型很可能在我们开始学习网页开发时就被灌输给了我们:HTML 用于内容,而 CSS 用于视觉外观。 这是内容和表现的分离。 在这里,通过更改屏幕阅读器宣布的内容,感觉 CSS 正在侵犯内容领域。
更多证据表明我们必须实际测试事物。 我测试了上面的 示例 在 VoiceOver 中,果然,是“A.D.D.”