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实现它。

Answer 2

使用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/

Answer 3

使用aria-hidden

表示作者实现的任何用户都看不到或看不到该元素及其所有后代。见相关的咏叹调。

如果元素仅在某些用户操作后可见，则作者必须将aria-hidden属性设置为true。当呈现元素时，作者必须将aria-hidden属性设置为false或删除属性，指示元素是可见的。一些辅助技术直接通过DOM访问WAI-ARIA信息，而不是通过浏览器支持的平台可访问性。 作者必须在未显示的内容上设置aria-hidden =“true”，无论用于隐藏它的机制如何。这允许辅助技术或用户代理正确跳过文档中的隐藏元素。

所以你的代码可以成为

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

Answer 4

我创建了一个示例，展示了如何使用role =＆＃34; alert＆＃34;在接近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

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

4 个答案: