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

问题描述

如何通知使用WAI-ARIA的屏幕阅读器，div现在可见？

如果我们得到了html

 < div id =foo>目前的主要内容< / div> 
< div id =barstyle =display：none;>隐藏内容< / div> 
  

然后我们

  $（ '＃富'）隐藏（）; 
 $（'＃bar'）。show（）; 
  

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

解决方案

您通常不需要告诉屏幕阅读器内容现在可见。使用 aria-hidden 在练习中没有任何区别，所以我建议不要使用它。如果你想让屏幕阅读器发布隐藏div的文本内容，你可以使用 role = alert 或者 aria-live = polite （例如）。您可以使用它来获取您希望屏幕阅读器听到的更新内容，而无需移动到内容位置以发现它。例如，弹出式消息不会收到焦点，但会包含与用户相关的文本信息，例如按下按钮之后。



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

How do you notify screen readers using WAI-ARIA that a div is now visible?

If we got the html

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

and then we

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

how do we notify screen readers that they should notify the user about the now visible div (or possibly automatically focus on the now visible div)?

解决方案

You do not need generally to tell screen readers that content is now visible. Use of aria-hidden makes no difference in practice, so I would suggest not using it. If you want the text content of the hidden div to be announced by a screen reader you may use role=alert or aria-live=polite (for example). You would use this for updated content that you want a screen reader to hear without having to move to the content location to discover it. For example a pop up message that does not receive focus, but contains text information that is relevant to a user after an action such as pressing a button.

update: I discussed with one of the people who developed ARIA 1.0, he suggested using HTML5 hidden instead of aria-hidden as a semantic indication that content is hidden. use it in conjunction with CSS display:none for older browsers. Browsers that support HTML5 hidden implement it using display:none in the user agent style sheet.

这篇关于如何使用WAI-ARIA通知屏幕阅读器现在可以看到div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！