如何使用WAI-ARIA是一个div是现在可见的通知屏幕阅读器(How to notify scre

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

Answer 1:

你不一般需要告诉屏幕阅读器的内容现在是可见的。使用aria-hidden使得实际上没有什么区别，所以我不会使用它建议。如果你想隐藏的div的文字内容由您可以使用屏幕阅读器宣布role=alert或aria-live=polite （例如）。你会用这个，你想要屏幕阅读器来听，而无需移动到内容的位置，发现它更新的内容。例如，不接收焦点，但弹出消息包含一个动作，例如按下按钮之后是与用户相关的文本信息。

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

Answer 2:

标记与角色内容=“警告”将导致其起火，屏幕阅读器将变为可见时响应警报事件：

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

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

当＃内容变得可见这将提醒用户。

ARIA隐藏时，有你想从屏幕阅读器隐藏着什么应该被使用，但它展示给视力正常的用户。但是请小心使用。在这里看到更多： http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 3:

使用ARIA隐藏

指示由作者实施的元素及其所有的后代是不可见或感知到的任何用户。请参阅相关的咏叹调禁用。
如果一个元素后，一些用户操作时才能看到，作者必须设置咏叹调隐藏属性为true。 当呈现的元素，作者必须设置咏叹调隐藏属性设置为false或删除属性，表明该元素是可见的 。一些辅助技术访问WAI-ARIA信息通过浏览器直接通过DOM而不是通过平台支持无障碍。 作者必须设置ARIA隐藏=“true”，从而不显示的内容，不管用来隐藏它的机制。 这允许辅助技术或用户代理正确地跳过文档中的隐藏要素。

所以你的代码可能成为

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

Answer 4:

我创建显示出一个样品如何，你可以使用角色=“警告”通知屏幕阅读器的用户，当他们接近textarea元素的字符的限制，如果你想了解如何使用警示作用，它可以帮助：

还有更多，但这里的产生警报的代码的一小部分：

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

文章来源: How to notify screen readers using WAI-ARIA that a div is now visible