5

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

<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"到 <div>时会发生同样的问题

阻止屏幕阅读器阅读当今真正隐藏的内容的技巧是什么?

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

4

1 回答 1

1

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

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

仅当隐藏此内容的行为旨在通过删除冗余或无关内容来改善辅助技术用户的体验时,作者才可以谨慎使用 aria-hidden 来隐藏辅助技术中可见呈现的内容。使用 aria-hidden 向屏幕阅读器隐藏可见内容的作者必须确保将相同或等效的含义和功能暴露给辅助技术。

于 2013-07-24T18:11:12.683 回答