html - 为什么 NVDA 读者无法读取我的 jquery.html() 和 jquery.append() 代码?

标签 html jquery accessibility wai-aria nvda

我似乎无法让 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

特别是到目前为止我发现

<小时/>

咏叹调

关于 ARIA 角色,请查看 aria-livearia-relevantaria-atomicalert > 属性:

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/

相关文章:

accessibility - 覆盖 mathjax 可访问性蓝框功能

html - 工具提示的定位元素

python - 如何使用 python 和来自 html 标签值下的 html 标签的漂亮汤解析 html 文件?

javascript - 使用 Ajax 仅检索数据库中的数据之间如何更好地从 html 结构中的数据库检索数据?

php -  上传到数据库的 html 代码中的字符

javascript - jQuery |我可以根据图像的平均颜色运行特定的代码吗?

jquery - 如果列宽小于免费 jqgrid 中的标题,如何显示排序顺序

jquery - 选择所有具有文本类型的输入元素,具有匹配的数据属性值

.net - AutomationProperties.Name VS x :Name

c# - 在大型 html 文档中为图像添加缺少的 alt 标签的最有效方法