我有以下标题
<h1>ADD MONEY</h1>
VoiceOver将其解读为
a-d-d货币
然而,如果我将文本改为小写,它将正确地读为“加钱”。你有什么意见建议?我已经尝试了使用aria-labelledby
没有运气!
发布于 2018-12-17 17:48:14
我建议开发人员避免试图在这种情况下控制屏幕阅读器。一些原因:
这里的一些答案建议使用CSS text-transform: uppercase
。这是一种很好的方法,但在不同的屏幕阅读器之间也有不一致之处。在理想的世界中,原始文本和文本转换都可以传递给辅助技术,为语音引擎提供更好的信息,同时也尊重用户的喜好。我们还没有到那里,但浏览器实现者正在讨论这个问题--请参阅Chromium跟踪器中的讨论,以获得更多的细节:尊重a11y树中的文本转换样式?
另一种建议的技术是使用小写aria-label
复制可见文本,但强制浏览器将小写版本传递给辅助技术。例如,<button aria-label="add money">ADD MONEY</button>
。在许多情况下,这可能运行得很好,但这是开发人员如何阻止用户首选项的一个例子。例如,希望屏幕阅读器改变大写大写的发音的用户会错过这里。屏幕阅读器的主要工作是传达屏幕上的内容,包括大写字母。在我看来,小写aria-label
技术与此不一致.
关于所有大写的讨论(在一个Drupal问题中)有一些有趣的贡献来自屏幕阅读器用户:核心主题中全大写文本的可读性问题。
发布于 2018-12-15 09:20:17
将标记保留为小写,但使用CSS仅通过text-transform
将文本更改为大写。
然后添加一个aria-label
of "add money"
。
h1 {
text-transform: uppercase;
}
<h1 aria-label="add money">add money</h1>
https://stackoverflow.com/questions/53780653
复制