如何使用WAI-ARIA创建完全可访问的嵌套下拉列表？

几天前，我开始在Internet上搜索有关WAI-ARIA的教程和文档，了解几乎所有类型的AJAX请求。

我习惯于使用jQuery和AJAX编写嵌套下拉列表。它工作得很好，但不是本机可访问的。例如，我们需要使用特定于WAI-ARIA的标记来启用所有类型的动态内容(如AJAX)的辅助功能。

我的一个要求如下：

• 假设我有一个State下拉列表，它使用onChange事件更新一个Region下拉列表。如何使用WAI-ARIA和jQuery与屏幕阅读器交互，以便告诉用户区域下拉列表已更新？

---

解决方案

我的2c是咏叹调控件可能更适合这里。

您在此处描述的用户界面听起来与您在在线购买产品时经常找到的国家/国家/地区选项非常相似。典型的模式是：

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

这里需要注意的几件事：

• 我在每个SELECT的开头使用‘PLACEHOLDER’选项条目。这有两个好处。首先，它提供了关于用户应该如何使用UI的补充文档--如果他们最终以某种方式首先查看了第二个字段，它会将他们定向到第一个字段。其次，它避免了用户意外地选择了一个缺省值：您的代码可以检查缺省的‘Select...’是提交的值，并提醒用户选择一个实际值。此外，它还向用户隐藏了内容选项正在更改的事实。

  /li>

• 这里的主要问题是，这两个选择之间的关系应该从表单或页面的上下文中清晰可见。无论看到与否，遇到这样的表单的用户都不需要被明确告知SELECT状态的内容已经更改，因为他们会从表单设计和上下文中预料到这一点。人们知道，州是特定于一个国家的(例如，德国没有"加利福尼亚")，县也是如此，所以人们已经对这些如何运作有了期望。

使用aria-live在这里不太合适。它实际上是为异步更新的页面区域设计的，否则用户必须不断轮询、来回阅读以扫描更改。聊天面板可能是一个经典的例子：当消息从另一端的某人出现时，您希望屏幕阅读器在消息出现时将其读出，而不必手动寻找它。相比之下，这里的用户界面更具同步性；当国家/地区发生变化时，会在那里填充状态，然后(*)，这是预期的行为。

ARIA确实有一个aria-controls="ids..."属性，这似乎更适合：规范说它用于当一个控件影响另一个控件的可见性或内容时，这似乎描述了这里正在发生的事情。我现在还不知道是否有屏幕阅读器支持这一点，或者当它出现时他们会读到什么--我可能会研究一下这一点，然后再更新这个答案。但在任何情况下，前面的要点都适用，表单的行为和语义无论如何都应该在没有这一点的情况下显而易见。

--

(*)仍然存在一个问题，如果您异步更新内容-例如。通过AJAX而不是从已加载到页面上的数组中获取国家/地区列表，那么在选择国家/地区和结果可用于下一次选择之间可能会有延迟。ARIA-LIVE在这里感觉不像是正确的解决方案，因为您不想读出新内容，您只想让用户知道SELECT现在可以使用了。