时间戳

首页 > 解决方案 > 如何处理 aria-label 中的空格？

html - 如何处理 aria-label 中的空格？

问题描述

如何处理内部的额外空白aria-label？它是像在 HTML 中一样被忽略/修剪，还是最终会在屏幕阅读器中暂停？

<a href="blah" aria-label="    Go     to    my     site   ">...</a>

标签： htmlaccessibilitywai-ariascreen-readers

解决方案

我在带有 Chrome、Firefox、Opera、IE 和 Edge 的 Windows 上使用 NVDA 对此进行了测试。所有浏览器都忽略了空格并毫不犹豫地阅读“转到我的网站”。

虽然我不能肯定地说这种行为对于所有 AT 都是相同的，但我高度怀疑这将是由于HTML 5 规范建议浏览器设计其 HTML 解析引擎以删除连续空格。

另外，CSSwhite-space属性似乎也没有任何效果（至少在 NVDA 上）。

如果您希望获得一些特定的结果，您可能会对题为“为什么屏幕阅读器不总是阅读屏幕上的内容？”的 Deque 文章感兴趣？，其中有一些关于主要屏幕阅读器如何处理各种形式的标点符号的非常有用的参考资料。例如，如果您想在单词之间创建停顿，您可以使用逗号或句点，这将在不同平台上产生类似的结果。

作为警告，我建议您自己进行测试（在可能的情况下），使用多个浏览器、操作系统和 AT，以确认在撰写该文章后的 4-5 年内行为没有改变。

推荐阅读