wai aria和jquery.html()以及jquery.append()

我似乎无法找到任何资源或代码示例的方式,我可以让屏幕阅读器使用 jquery工作(使用wai咏叹调)将html插入dom或将html附加到dom.

任何人都可以请指出一些我可以用作指南的有用资源,或者提供一些代码示例,我可以用它来开发我的应用程序以满足可访问性标准,并将动态内容添加到我的页面上ajax post-back？

TIA.

编辑(添加了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角色,请看一下咏叹调,咏叹调,咏叹调原子和警报属性：

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>

原文地址：https://www.jb51.cc/jquery/178245.html

wai aria和jquery.html()以及jquery.append()

解决方法

相关推荐