javascript 如何使用 WAI-ARIA 通知屏幕阅读器 div 现在可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10349987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to notify screen readers using WAI-ARIA that a div is now visible
提问by finnsson
How do you notify screen readers using WAI-ARIA that a div is now visible?
你如何使用 WAI-ARIA 通知屏幕阅读器一个 div 现在可见？
If we got the html
如果我们得到了 html
<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>
and then we
然后我们
$('#foo').hide();
$('#bar').show();
how do we notify screen readers that they should notify the user about the now visible div (or possibly automatically focus on the now visible div)?
我们如何通知屏幕阅读器他们应该通知用户现在可见的 div（或者可能自动关注现在可见的 div）？
回答by Steve Faulkner
You do not need generally to tell screen readers that content is now visible. Use of aria-hiddenmakes no difference in practice, so I would suggest not using it. If you want the text content of the hidden div to be announced by a screen reader you may use role=alertor aria-live=polite(for example). You would use this for updated content that you want a screen reader to hear without having to move to the content location to discover it. For example a pop up message that does not receive focus, but contains text information that is relevant to a user after an action such as pressing a button.
您通常不需要告诉屏幕阅读器内容现在可见。使用aria-hidden在实践中没有区别，所以我建议不要使用它。如果您希望屏幕阅读器显示隐藏 div 的文本内容，您可以使用role=alert或aria-live=polite（例如）。您可以将其用于希望屏幕阅读器听到的更新内容，而无需移动到内容位置来发现它。例如，一条没有获得焦点的弹出消息，但包含在用户执行诸如按下按钮之类的操作后与用户相关的文本信息。
update:I discussed with one of the people who developed ARIA 1.0, he suggested using HTML5 hiddeninstead of aria-hiddenas a semantic indication that content is hidden. use it in conjunction with CSS display:nonefor older browsers. Browsers that support HTML5 hiddenimplement it using display:nonein the user agent style sheet.
更新：我与一位开发 ARIA 1.0 的人讨论过，他建议使用HTML5hidden而不是aria-hidden作为隐藏内容的语义指示。将它与display:none旧浏览器的CSS 结合使用。支持 HTML5 的浏览器hidden使用display:none用户代理样式表来实现它。
回答by Rich Caloggero
Tagging the content with role="alert" will cause it to fire an alert event which screen readers will respond to when it becomes visible:
用 role="alert" 标记内容将导致它触发一个警报事件，当它变得可见时屏幕阅读器将响应：
<div id="content" role="alert">
...
</div>
$("#content").show();
This would alert the user when #content becomes visible.
当#content 变得可见时，这会提醒用户。
aria-hidden should be used when there is something you want to hide from the screen reader, but show it to sighted users. Use with care however. See here for more: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
当您想对屏幕阅读器隐藏某些内容但向视力正常的用户显示时，应使用 aria-hidden。不过要小心使用。请参阅此处了解更多信息：http: //www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
回答by Fabrizio Calderan
Use aria-hidden
Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.
If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUST set the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIA information directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.
表示元素及其所有后代对于作者实现的任何用户都是不可见或不可感知的。请参阅相关的 aria-disabled。
如果某个元素仅在某些用户操作后可见，则作者必须将 aria-hidden 属性设置为 true。当元素出现时，作者必须将 aria-hidden 属性设置为 false 或删除该属性，表明该元素是可见的。一些辅助技术直接通过 DOM 访问 WAI-ARIA 信息，而不是通过浏览器支持的平台可访问性。作者必须在未显示的内容上设置 aria-hidden="true"，无论用于隐藏它的机制如何。这允许辅助技术或用户代理正确跳过文档中的隐藏元素。
so your code could become
所以你的代码可以变成
$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');
回答by Chris Hore
I created a sample showing how you could using role="alert" to notify screen reader users when they are approaching the character limit of a textarea element, if you are trying to understand how to use the alert role, it may help:
我创建了一个示例，展示了如何使用 role="alert" 在屏幕阅读器用户接近 textarea 元素的字符限制时通知他们，如果您想了解如何使用警报角色，它可能会有所帮助：
There's more to it, but here's the small part of the code which produces the 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);
}
