accessibility - 如何处理 WAI ARIA 角色 ="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 引用？ ?

关于 keyboard interaction的问题:

“复选框 - 空格切换复选框，如果列表项是可检查的” - 我如何确定它们是可检查的还是可选择的？

关于验证的问题:

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

我什么时候触发验证？在 blur充足的？

无效时，除了设置[aria-invalid="true"]之外我还需要做什么？在列表框中？

Answer 1

aria-checked确实更像是一个非常密切相关的选项列表，其中包含可以打开或关闭的实际可见复选框。这在 Windows 世界中最为常见。 Explorer 可以设置为这种伪多选模式，或者一些应用程序使用它来激活或停用一组帐户。在 Mac 上，您可以想到 Adium 中的帐户列表，可以选中(事件)或不选中。选择将始终存在，并且可以选中或不选中其中一个或多个复选框。
aria-selected始终是指示选项的选定状态的正确选项。例如使用箭头键遍历列表时，aria-selected="true"从一个项目移动到另一个项目，而其他人则必须得到 aria-selected="false" .正如帕特里克所说，你也可以使用它来生成一些漂亮的 CSS。

至于键盘交互:向上和向下箭头将选择一个项目，如果项目也是可勾选的，空格将切换当前所选项目的勾选或未勾选状态。

在真正的多选中，例如 html:select @size>1，并且 multiselectable 为真，交互将是:

箭头键选择单个项目。

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

Ctrl+Space 将选择该项目。

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

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

至于验证: onBlur就足够了，或者您可以通过更改选择/重点项目来动态执行此操作，确保至少选择了一项，或您需要的任何验证。
aria-invalid="true"足以让屏幕阅读器知道，但错误消息和可能的视觉指示会让每个人都知道出了什么问题。