如何处理WAI ARIA role ="listbox"

Question

我有一个选项列表,可以从中选择一个.出于所有意图和目的,HTML的<select>元素涵盖了这一点.由于我们需要不同的视觉呈现,我正在考虑使用WAI ARIA role ="listbox".我不清楚如何使用aria-activedescendant,aria-selected和aria-checked.

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

• 如果我aria-activedescendant在列表框上使用指向[role="option"]当前处于活动状态(具有"虚拟焦点"),我会使用[aria-selected].我怎么能告诉选项元素本身它是活动的(具有"虚拟焦点")来直观地表示它？(:focus毕竟是在列表框上)
• 一个[role="option"]可以拥有[aria-checked]和[aria-selected].我想我需要[aria-selected]但却看不到我用[aria-checked]的东西.
• 是否有一个技巧,以避免必须在每个选项上放置ID,以便它可以被引用aria-activedescendant？

有关键盘交互的问题:

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

有关验证的问题:

如果列表框具有[aria-required="true"]某种必须执行的验证.特别是如果选择(或选中)了一个选项.

• 我何时触发验证？是blur足够了吗？
• 如果无效,除了[aria-invalid="true"]在列表框上设置外,我还需要做什么？

Answer 1

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

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

至于键盘交互：上下箭头将选择一个项目，并且如果这些项目也是可检查的，则空格将切换当前所选项目的选中或未选中状态。

在真正的多重选择（例如html：select @size> 1）中，并且multiselectable为true时，交互将为：

• 箭头键选择单个项目。
• Ctrl+方向键会将焦点从一个项目移到另一个项目，但尚未选择该项目。
• Ctrl+ Space将选择项目。
• Shift+ up和down箭头将选择连续的项目。

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

至于验证：onBlur已经足够，或者您可以通过更改选择/重点项目来动态地进行验证，请确保至少选择了一项，或者您需要进行任何验证。

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