前几天，我已经开始在网上约WAI-ARIA教程和文档几乎任何类型的AJAX请求的寻觅。
我习惯了编码使用jQuery和AJAX嵌套的下拉列表。 它工作得很好，但不是本机访问。 我们需要使用WAI-ARIA特定的标记为“启用”无障碍于各种动态的东西如AJAX的，例如。
我的一个要求是：比方说，我有一个国家下拉式选单，使用更新onchange事件的区域下拉菜单。 我如何使用WAI-ARIA和jQuery为了告诉大家，区域下拉列表中已经更新了用户的屏幕阅读器互动？
任何的想法？
非常感谢！
Answer 1:
我2C是咏叹调，控制可能是一个更适合这里。
你所描述这里的UI听起来非常相似的国家/国家选择在网上购买产品时，你经常会发现。 这些是典型的图案：
<label for="country">Country:</label>
<select id="country" aria-controls="state">
<option value="">Select a country...</option>
<option value="Andorra">Andorra</option>
<option value="Belgium">Belgium</option>
...
</select>
<br>
<label for="state">State:</label>
<select id="state">
<option value="">(Select a country first)</option>
... options here populated when country changes ...
</select>
一对夫妇的事情这里要注意：
我使用的是在每一个选择的开始“占位”选项条目。 这有两个好处。 首先，它提供了有关用户如何使用UI增强文档 - 如果他们以某种方式结束了在第二场第一看，它会指引他们到第一个。 其次，它避免了用户不小心选择默认值：你的代码可以检查是否默认“选择......”是提交，并提醒用户选择一个实际值的一个。 而且，另外，它隐藏的内容选项从用户改变的事实。
这里主要的事情，不过，就是这两个选择之间的关系应该是从形式或页面上下文清楚。 近视与否，谁遇到这样的形式也不会需要明确一个用户告诉记者，国家选择的内容发生了变化，因为他们会期望从外形设计，并从上下文。 人们都知道，美国是具体到一个国家（有没有“加利福尼亚”在德国为例），同样与县，所以已经有如何将这些工作的期望。
使用aria-live不觉得这是适当的在这里。 这是真正目的是在网页上的某些更新异步 ，并且用户否则必须连续轮询，读来回扫描的变化。 聊天面板也许是经典的例子：当从别人在另一端出现一则消息，你想要的屏幕阅读器出现时读出信息，而不必手动去打猎吧。 相比之下，这里的用户界面更是同步的; 当国家发生变化，状态被填充那里，然后（*），它的预期行为。
ARIA确实有一个aria-controls="ids..."属性，这似乎是更好的选择：规范表示，它用于当一个控制影响的另一知名度或内容，这似乎说明这里发生了什么。 我不知道不加思索任何屏幕阅读器是否支持此又或者他们会读什么出它的存在时 - 我会考虑这一点，并在以后更新这个答案。 但在任何情况下，从早期主要的应用点，窗体的行为和语义应该没有这种明显进不去。
-
（*）目前仍然是，如果你异步更新内容的问题 - 如。 通过通过AJAX，而不是从一个已经加载的页面上的阵列得到县列表，然后有可能是选择国家，结果变得可用于在未来选择使用之间的延迟。 ARIA活不觉得自己是正确的解决方案在这里，因为你不想读出新的内容，你只想让用户知道选择是现在就可以使用。
Answer 2:
对于这种使用情况，我想补充aria-live和aria-atomic属性，示例代码：
<select id="foo" aria-live="assertive" aria-atomic="true">
<option value="nw">Northwest</option>
<option value="ne">Northeast</option>
<option value="se">Southeast</option>
<option value="sw">Southwest</option>
</select>
我认为assertive是对正确的价值aria-live属性，但polite可能反而是适当的。 该aria-atomic的属性是有告诉浏览器/ AT该区域必须作为一个整体时，有一个变化。 您也可以考虑使用aria-disabled: true的选择开始，然后切换到false你用的状态来选择相关的值更新它。
编辑
好了，我已经做了使用NVDA和IE9和Firefox 13.01一些测试。 我没有可用的时刻JAWS，所以这将会是巨大的，如果有人能与JAWS测试页面。 VoiceOver会据我所知没有支持刚刚与镀铬+画外音在10.7（狮子）测试和配音似乎的确有支持的aria性能又aria-live 。
测试页面可以在这里找到 。
我用模拟数据加载到选择的区域（使用对象）的简单脚本：
var options = [],
regions = {
'nw': 'Northwest',
'ne': 'Northeast',
'se': 'Southeast',
'sw': 'Southwest'
}
$(document).ready(function() {
$.each(regions, function(key, value) {
options.push('<option value="'+ key +'">'+ value +'</option>');
});
$('.block').on('change, focusout', '.states', function() {
$(this).parent().children('.regions')
.attr({'disabled': false, 'aria-disabled': false})
.html(options.join(''));
});
window.setTimeout(
function() {
$('#speak').text('assertive!');
},
3000
);
});
与此打了一下后，一些观察（当然，我不是专家，当谈到屏幕阅读器，所以如果我错过了一些东西让我知道）...
使用HTML
disabled直到状态选择的重点是从属性的，不建议你真的不想要加载的区域数据和自相关的区域选择是在事件的内容时禁用Tab键到下一控制，当它被跳过（你可以在下面的录音听到这个。）奇怪的是，火狐宣布该地区的价值选择，即使它不关注它。我看到之间的行为没有什么区别
polite和assertive，或者在本例中这个问题没有aria-live属性。 我认为，这两个FF13和IE9有支持aria-live，但从最后的，但代码（$('#speak')...）看来，IE9不？也许延迟到通过AJAX模拟负荷将增加一件好事。
你可以听录音： IE9 ， 火狐13
文章来源: How to create fully accessible nested dropdown lists using WAI-ARIA?
