如何处理WAI ARIA角色=“列表框”； [英] how to handle WAI ARIA role="listbox"

问题描述

我有一个选项列表，可以从中选择一个。 HTML的< select> 元素涵盖了所有目的。由于我们需要不同的视觉演示，因此我正在考虑使用 WAI ARIA角色=列表框 。我不清楚如何使用 aria-activedescendant ， aria-selected 和 aria-已选中。

I have a list of options from which one can be selected. For all intents and purposes HTML's <select> element covers this. Since we need a different visual presentation, I'm looking at using WAI ARIA role="listbox". I'm unclear on how to use aria-activedescendant, aria-selected and aria-checked.

关于焦点/活动状态的问题：

Questions regarding focus/active state:

• 如果我在列表框中使用 aria-activedescendant 指向 [role = option] 当前处于活动状态（具有虚拟焦点），我将使用 [aria-selected] 。我如何最好地告诉选项元素本身是活跃的（具有虚拟焦点）以可视方式表示它？ （毕竟，：focus 在列表框中）


• 一个 [role = option] 可以具有 [aria-checked] 和 [aria-selected] 。我想我需要 [aria-selected] ，但看不到我要使用的 [aria-checked]


• 是否有一个技巧可以避免仅在每个选项上都添加ID，以便 aria-activedescendant 可以引用它？

• If I use aria-activedescendant on the listbox to point to the [role="option"] that is currently active (has "virtual focus"), I would use [aria-selected]. How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually? (:focus is on the listbox, after all)
• an [role="option"] can have [aria-checked] and [aria-selected]. I guess I need [aria-selected] but don't see what I'd use [aria-checked] for.
• Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant?

关于键盘交互：

• 复选框-如果列表项是可检查的，则空格切换复选框 -如何确定它们是否可检查或可选？

关于验证的问题：

如果列表框具有 [aria-required = true] ，则必须执行某种验证。

If the listbox has [aria-required="true"] some sort of validation has to be performed. specifically if an option has been selected (or checked).

• 何时触发验证？是 blur 就足够了吗？


• 无效时，除了设置 [aria-invalid = true] 在列表框中吗？

• when do I trigger the validation? is on blur sufficient?
• when invalid, what do I have to do besides setting [aria-invalid="true"] on the listbox?

推荐答案

<实际上，对于code> aria-checked 而言，它实际上是更多与密切相关的选项列表相关的选项，这些选项带有可以打开或关闭的实际可见复选框。这在Windows世界中最常见。可以将资源管理器设置为这种伪多选模式，或者某些应用程序可以使用它来激活或停用一组帐户。在Mac上，您可以想到Adium中的帐户列表，可以检查（活动）或不检查。选择将始终存在，并且可以选中或不选中其一个或多个复选框。

aria-checked is indeed more something for a list of very closely related options with actual visible checkboxes that can be toggled on or off. This is most common in the Windows world. Explorer can be set to such a pseudo multi-select mode, or some apps use that to activate or deactivate a set of accounts. On the Mac, you can think of the list of accounts in Adium, which can be either checked (active) or not. A selection will always be there, and one or more of their checkboxes can be checked or not.

aria-selected 始终是指示选项的选定状态的正确选项。例如当使用箭头键遍历列表时， aria-selected = true 在项目之间移动，而其他项目则必须获得 aria-selected = false 。正如Patrick所说，您可以使用它来生成一些漂亮的CSS。

aria-selected is always the right one to indicate the selected state of an option. E. g. when traversing the list with the arrow keys, aria-selected="true" moves from item to item, while the others must then get aria-selected="false". As Patrick said, you can use this to also generate some nice looking CSS.

对于键盘交互：上下箭头会选择一个项目，如果这些项目是

As for keyboard interaction: arrows up and down will select an item, and if the items are checkable, too, space will toggle the checked or unchecked state of the currently selected item.

在真正的多重选择中，例如html：select @size> 1，然后如果multiselectable为true，则交互将是：

In a true multi-select, like html:select @size>1, and multiselectable being true, the interaction would be:

• 箭头键选择单个项目。


• < kbd> Ctrl +箭头键会将焦点从一个项目移到另一个项目，但尚未选择该项目。


• Ctrl + Space 将选择该项目。


• Shift + 上和下箭头将选择连续的项目

• Arrow keys select a single item.
• Ctrl+Arrow keys would move focus from item to item, but not select the item yet.
• Ctrl+Space would select the item.
• Shift+up and down arrows would select contiguous items.

例如，这又是标准Windows范例，可以在资源管理器的详细信息视图中观察到。

This is, again, standard Windows paradigm, can be observed in Explorer in Details view, for example.

至于验证： onBlur 就足够了，或者您可以通过选择selec来动态地做到这一点。位置/重点项目，请确保至少选择一项，或者您需要进行任何验证。

As for validation: onBlur is sufficient, or you could dynamically do it via changes in selection/focused item, make sure at least one item is selected, or whatever validation you need.

aria-invalid = true 足以让屏幕阅读器知道，但是错误消息以及可能的视觉指示都将使每个人都知道出了什么问题。

aria-invalid="true" is sufficient for screen readers to know, but an error message and possibly a visual indication would be nice for everyone to know what's wrong.

这篇关于如何处理WAI ARIA角色=“列表框”；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！