如何使用WAI-ARIA创建完全可访问的嵌套下拉列表？ [英] How to create fully accessible nested dropdown lists using WAI-ARIA?

问题描述

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

A few days ago, I have started searching on the Internet for tutorials and documentation about WAI-ARIA for just about any kind of AJAX requests.

使用jQuery和AJAX对嵌套的下拉列表进行编码。它工作得很好，但是本机不可访问。例如，我们需要使用WAI-ARIA特定的标签来启用诸如AJAX之类的所有动态内容的可访问性。

I am used to coding nested dropdown lists using jQuery and AJAX. It works pretty well but is not natively accessible. We need to use WAI-ARIA specific tags to "enable" accessibility for all kind of dynamic stuffs like AJAX, for instance.

我的要求之一是： b $ b假设我有一个State下拉列表，该列表使用onchange事件更新了Region下拉列表。我该如何使用WAI-ARIA和jQuery与屏幕阅读器进行交互，以告诉用户区域下拉列表已更新？

One of my requirement is the following: Let's say I have a State dropdown that updates a Region dropdown using the onchange event. How can I interact with the screen reader using WAI-ARIA and jQuery in order to tell the user that the Region dropdown list has been updated?

任何想法吗？

非常感谢！

推荐答案

我的2c是aria-controls可能是

My 2c is that aria-controls may be a better fit here.

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

The UI you are describing here sounds very similar to the Country/State selects that you often find when purchasing a product online. A typical pattern for these is:

<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的增强文档-如果他们最终以某种方式最终查看了第二个字段，它将把他们定向到第一个字段。其次，它避免了用户意外选择默认值：您的代码可以检查默认的选择...是否为已提交的默认值，并提醒用户选择实际值。而且，它还隐藏了内容选项正在由用户更改的事实。

• I'm using 'placeholder' option entries at the start of each select. This has two benefits. First, it provides reinforcement documentation about how the user should use the UI - if they somehow end up looking at the second field first, it will direct them to the first one. Secondly, it avoids the user accidentally selecting a default value: your code can check if the default 'Select...' is the one submitted and remind the user to pick an actual value. And, additionally, it hides the fact that the contents options are changing from the user.

不过，这里的主要是，这两者之间的关系选择内容应在表单或页面的上下文中清楚显示。不论是否发现视线，都无需明确告知遇到此类表单的用户状态选择的内容已更改，因为他们会期望表单设计和上下文中的内容有所更改。人们知道州是特定于一个国家的（例如，在德国没有加利福尼亚州），与县类似，因此已经对这些州的工作方式有所期待。

The main thing here, though, is that the relationship between these two selects should be clear from context in the form or page. Sighted or not, a user who encounters a form like this won't need to be explicitly told that the contents of the state select have changed, because they'll expect that from the form design, and from the context. People know that states are specific to a country (there's no "California" in Germany, for example), similarly with counties, so there's already an expectation of how these work.

使用 aria-live 在这里感觉不合适。它实际上是为页面上异步更新的区域设计的，否则用户将不得不连续轮询，来回读取，扫描更改。聊天面板也许是经典的例子：当另一端某人出现一条消息时，您希望屏幕阅读器在出现该消息时读出该消息，而不必手动寻找它。相比之下，此处的UI更同步；当国家/地区更改时，将在州中填充州，然后（*），这是预期的行为。

Use of aria-live doesn't feel like it's appropriate here. It's really designed for areas of the page that update asynchronously, and which the user would otherwise have to poll continuously, reading back and forth, to scan for changes. Chat panels are perhaps the classic example: when a message appears from someone on the other end, you want the screenreader to read out the message when it appears, and not have to manually go hunting for it. By contrast, the UI here is more synchronous; when the country changes, the states are populated there and then(*), it's expected behavior.

ARIA确实有 aria-controls = ids ... 属性，这似乎是更合适的方法：该规范说，它用于一个控件影响另一个控件的可见性或内容时，它似乎可以描述此处发生的情况。我暂时不知道是否有任何屏幕阅读器支持此功能，或者它们出现时会读出什么内容-我可能会对此进行调查，并在以后更新此答案。但是无论如何，不​​管怎么说，前面的要点都适用，表单的行为和语义无论如何都应该是显而易见的。

ARIA does have an aria-controls="ids..." attribute, which seems to be a better fit: the spec says it's used for when one control affects the visibility or contents of another, which seems to describe what's happening here. I don't know offhand whether any screenreaders support this yet or what they would read out when its present - I may look into this and update this answer later. But in any case, the main point from earlier applies, the form's behavior and semantics should be apparent without this anyhow.

-

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

(*) There's still an issue that if you update the content asynchronously - eg. by getting the list of counties via ajax rather than from an array that's already loaded on the page, then there could be a delay between selecting the country and the results becoming available for use in the next select. aria-live doesn't feel like the right solution here again, since you don't want to read out the new content, you just want to let the user know that the select is now ready for use.

这篇关于如何使用WAI-ARIA创建完全可访问的嵌套下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！