如何使用WAI-ARIA通知屏幕阅读器现在可以看到div

Question

如何使用WAI-ARIA通知屏幕阅读器现在可以看到div？

如果我们得到了HTML

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

然后我们

$('#foo').hide();
$('#bar').show();

我们如何通知屏幕阅读器他们应该通知用户现在可见的div(或者可能自动关注现在可见的div)？

Answer 1

您通常不需要告诉屏幕阅读器现在可以看到内容.使用aria-hidden在实践中没有区别,所以我建议不要使用它.如果您希望屏幕阅读器宣布隐藏div的文本内容,您可以使用role=alert或aria-live=polite(例如).您可以将此用于您希望屏幕阅读器听到的更新内容,而无需移动到内容位置来发现它.例如,弹出消息不接收焦点,但包含在诸如按下按钮之类的动作之后与用户相关的文本信息.

更新:我与开发ARIA 1.0的人讨论过,他建议使用HTML5hidden而不是aria-hidden隐藏内容的语义指示.与display:none旧版浏览器的CSS结合使用.支持HTML5的浏览器在用户代理样式表中hidden实现它display:none.

Answer 2

使用role ="alert"标记内容将导致它触发一个警报事件,屏幕阅读器将在其可见时响应:

<div id="content" role="alert">
...
</div>

$("#content").show();

当#content变得可见时,这将提醒用户.

当您想要从屏幕阅读器中隐藏某些内容时,应使用aria-hidden,但应向有视力的用户显示.但要小心使用.有关更多信息,请参阅此处:http: //www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 3

使用咏叹调隐藏

表示作者实现的元素及其所有后代对于任何用户都不可见或不可感知.见相关的咏叹调.

如果元素仅在某些用户操作后可见,则作者必须将aria-hidden属性设置为true.当元素出现时,作者必须将aria-hidden属性设置为false或删除属性,指示元素是可见的.一些辅助技术直接通过DOM访问WAI-ARIA信息,而不是通过浏览器支持的平台可访问性.无论用于隐藏它的机制如何,作者必须在未显示的内容上设置aria-hidden ="true".这允许辅助技术或用户代理正确地跳过文档中的隐藏元素.

所以你的代码可能会成为

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');