javascript - 如何使用 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 的人讨论过，他建议使用 HTML5 hidden而不是 aria-hidden 作为内容被隐藏的语义指示。将它与 CSS display:none 一起用于旧版浏览器。支持 HTML5 hidden 的浏览器使用用户代理样式表中的 display:none 实现它。