如何使用 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）？
【问题讨论】：
标签： javascript html accessibility screen-readers wai-aria
您通常不需要告诉屏幕阅读器内容现在可见。使用aria-hidden 在实践中没有区别，所以我建议不要使用它。如果您希望屏幕阅读器宣布隐藏 div 的文本内容，您可以使用role=alert 或aria-live=polite（例如）。您可以将其用于您希望屏幕阅读器听到的更新内容，而无需移动到内容位置来发现它。例如，弹出消息不接收焦点，但包含在按下按钮等操作后与用户相关的文本信息。
更新：我与一位开发 ARIA 1.0 的人讨论过，他建议使用 HTML5 hidden 而不是 aria-hidden 作为隐藏内容的语义指示。将它与 CSS display:none 一起用于旧版浏览器。支持 HTML5 的浏览器 hidden 在用户代理样式表中使用 display:none 实现它。
【讨论】：
hidden 的时间不早于 IE11。
使用 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/
【讨论】：
表明该元素及其所有后代对于作者所实现的任何用户都是不可见或不可感知的。请参阅相关的 aria-disabled。
如果一个元素仅在某些用户操作后可见，作者必须将 aria-hidden 属性设置为 true。当元素出现时，作者必须将 aria-hidden 属性设置为 false 或删除该属性，表明该元素是可见的。一些辅助技术直接通过 DOM 访问 WAI-ARIA 信息，而不是通过浏览器支持的平台可访问性。 作者必须在不显示的内容上设置 aria-hidden="true"，无论用于隐藏它的机制如何。这允许辅助技术或用户代理正确跳过文档中的隐藏元素。
所以你的代码可以变成
$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');
【讨论】：
我创建了一个示例，展示了如何使用 role="alert" 在屏幕阅读器用户接近 textarea 元素的字符限制时通知他们，如果您想了解如何使用 alert 角色，它可能会有所帮助：
还有更多内容，但这里是产生警报的一小部分代码：
if (characterCount > myAlertTheshold) {
var newAlert = document.createElement("div"); /* using the native js because it's faster */
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
newAlert.setAttribute("class","sr-only");
var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
}
【讨论】：