20

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

4

4 回答 4

34

您通常不需要告诉屏幕阅读器内容现在可见。使用aria-hidden在实践中没有区别，所以我建议不要使用它。如果您希望屏幕阅读器宣布隐藏 div 的文本内容，您可以使用role=alert或aria-live=polite（例如）。您可以将其用于您希望屏幕阅读器听到的更新内容，而无需移动到内容位置来发现它。例如，弹出消息不接收焦点，但包含在按下按钮等操作后与用户相关的文本信息。

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

于 2012-04-27T13:38:55.793 回答
10

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

于 2012-10-04T19:02:55.013 回答
9

使用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');
于 2012-04-27T11:47:17.223 回答
3

我创建了一个示例，展示了如何使用 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);
     }

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

于 2015-04-08T01:14:36.930 回答