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

时间:2013-07-24 17:37:06

标签: html5 screen-readers wai-aria

很久以前,屏幕阅读器决定开始阅读锚标签中的所有内容< 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"添加到&lt; div&gt;

时会发生同样的问题

阻止屏幕阅读器阅读现在隐藏的内容的诀窍是什么?

我正在使用IE10&amp; Windows 8讲述人

1 个答案:

答案 0 :(得分:1)

您可以使用aria-hidden,但要小心谨慎。

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

  

作者可以谨慎地使用隐藏咏叹调来隐藏可见的渲染   来自辅助技术的内容,只有隐藏此行为的行为   内容旨在改善辅助用户的体验   删除冗余或无关内容的技术。作者   使用aria-hidden隐藏屏幕阅读器中的可见内容   确保相同或等同的含义和功能   接触辅助技术。