屏幕阅读器阅读锚标签或角色 =“对话框”中的所有内容

Question

很久以前，屏幕阅读器决定开始阅读锚标记 中的所有内容作为一项功能。这允许在上下文在视觉上很明显但对屏幕阅读器不明确的情况下，链接可以很短。
然后，开发人员可以编写类似于此行的内容来让屏幕阅读器阅读所有​​内容：

<a href="#">More<span style="display: none;"> information about XYZ</span></a>

但是，在 HTML5 中，锚标记变得“透明”，并允许在其中包含更广泛的元素。 http://dev.w3.org/html5/markup/a.html#a
这个新的链接功能非常棒，因为我们真的可以用正确的语义封装整个可点击对象。
不幸的是，读取隐藏在链接中的所有内容的功能现在正在咬我们：

<li><a href="#"> [ complicated markup ] </a></li>

在上面的标记中，使用任何隐藏的内容都会被屏幕阅读器朗读。
当您将属性 role="dialog" 添加到

时，也会发生同样的问题

阻止屏幕阅读器阅读当今真正隐藏的内容的诀窍是什么？

我正在使用 IE10 和 Windows 8 讲述人

【问题讨论】：

• 请注意屏幕阅读器（无论如何大多数）不会在带有display: none的元素中朗读文本。

Answer 1

您可以使用aria-hidden，但请谨慎使用。

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

作者可以谨慎使用 aria-hidden 隐藏可见渲染 仅在隐藏此行为的情况下来自辅助技术的内容 内容旨在改善辅助用户的体验 通过删除冗余或无关内容的技术。作者 必须使用 aria-hidden 隐藏屏幕阅读器的可见内容 确保相同或等效的含义和功能是 接触辅助技术。