Question

我似乎找不到任何资源或代码示例，我可以通过jquery将html插入dom或将html附加到dom来使屏幕阅读器工作（使用wai咏叹调）。 / p>

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

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>

Answer 1

<强> 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角色，请查看aria-live，aria-relevant，aria-atomic和alert属性：

http://www.w3.org/TR/wai-aria/states_and_properties#aria-live

表示将更新元素，并描述用户代理，辅助技术和用户可以从实时区域获得的更新类型。

http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant

指示哪些用户代理更改通知（添加，删除等）辅助技术将在实时区域内接收。见相关的aria-atomic。

http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic

根据与aria相关的属性定义的更改通知，指示辅助技术是否会呈现更改区域的全部或部分内容。

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden（如果ajax结果显示或隐藏了页面的某些区域）

表示作者实现的任何用户都看不到或看不到该元素及其所有后代。见相关的咏叹调。

http://www.w3.org/TR/wai-aria/roles#alert

警报用于传达消息以提醒用户。在音频警告的情况下，对于听力受损的用户来说，这是一种可接受的替代方案。警报角色在包含警报消息的节点上进行。警报是状态角色的特殊形式，将作为原子实时区域进行处理。

其他资源

有关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>

Answer 2

以下是chat using ARIA和explanations的工作示例。这两个页面都是法语（虽然前者应该与谷歌翻译很好地翻译，后者翻译得很好，我刚刚验证过）;脚本和资源都是英文的;）

wai aria和jquery.html（）以及jquery.append（）

2 个答案: