我似乎无法让 NVDA 屏幕阅读器与 jQuery 一起使用,将 HTML 插入到 DOM。
我需要我的应用程序满足可访问性标准(例如 WAI-ARIA),并通过 Ajax 回发将动态内容添加到我的页面。
这是我的代码,NVDA 没有读取...我错过了什么?
<html>
<head>
<script language="javascript" type="text/javascript">
function addText() {
document.getElementById("test").innerHTML = "some test";
}
</script>
</head>
<body>
<h2>NVDA</h2>
<div id="testarea">Some test area</div>
<div id="test" aria-describedby="testarea" aria-live="polite" aria-relevant="additions removals" role="region"></div><br />
<input type="button" value="click me" onclick="addText()" />
</body>
</html>
最佳答案
WCAG
以下是 WCAG 关于与内容更新相关的客户端脚本的建议:http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html
特别是到目前为止我发现
SCR21:《使用文档对象模型 (DOM) 的功能向页面添加内容》(请参阅 http://www.w3.org/TR/WCAG20-TECHS/SCR21.html)
SCR-26:《将动态内容插入紧随其触发元素之后的文档对象模型》(请参阅 http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html#SCR26 )
G75:“提供推迟任何内容更新的机制”(参见 http://www.w3.org/TR/WCAG20-TECHS/G75.html)
G76:“提供一种请求内容更新而不是自动更新的机制”(请参阅 http://www.w3.org/TR/WCAG20-TECHS/G76.html )
G186:《在网页中使用停止移动、闪烁或自动更新内容的控件》(请参阅 http://www.w3.org/TR/WCAG20-TECHS/G186.html)
咏叹调
关于 ARIA 角色,请查看 aria-live
、aria-relevant
、aria-atomic
和 alert
> 属性:
http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant
Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. See related aria-atomic.
http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden (如果ajax结果使页面的某些区域可见或隐藏)
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.
http://www.w3.org/TR/wai-aria/roles#alert
<小时/>Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes on the node containing the alert message. Alerts are specialized forms of the status role, which will be processed as an atomic live region.
其他资源
有关 NVDA 屏幕阅读器和 ajax 更新辅助功能以及其他相关资源的文章:
http://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions/
http://www.paciellogroup.com/blog/2008/02/ajax-and-screen-readers-content-access-issues/
http://ejohn.org/blog/ajax-accessibility/ (此处建议有关更新内容的实时区域的代码片段)
<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
aria-describedby="users-desc" id="users">
...
</ol>
关于html - 为什么 NVDA 读者无法读取我的 jquery.html() 和 jquery.append() 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9827449/