如何使用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

将内容标记为“role=”将导致它触发一个警告事件，当内容变得可见时，屏幕阅读器将对此做出响应：

<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 2

我创建了一个示例，展示如何使用role=" alert“来通知屏幕阅读器用户，当他们接近文本区域元素的字符限制时，如果您正在尝试理解如何使用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);
     }

http://codepen.io/chris-hore/pen/emXovR