如何处理 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 可以引用它？

关于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"。正如 Patrick 所说，您还可以使用它来生成一些漂亮的 CSS。

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

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

• 箭头键选择单个项目。
• Ctrl+箭头键将焦点从一个项目移动到另一个项目，但还没有选择该项目。
• Ctrl+Space 将选择该项目。
• Shift+up 和 down 箭头将选择连续的项目。

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

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

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

Answer 2

如何最好地告诉选项元素本身它是活动的（具有“虚拟焦点”）以直观地表示它？

通常，您会添加 aria-selected="true"，然后使用属性选择器制作一些 CSS 来处理它，例如div[role=option][aria-selected=true] { ... }，还是动态添加一个css类？

[aria-checked] 和 [aria-selected]

我猜这更像是一个哲学问题。 aria-selected 更接近于您使用 select 所拥有的内容......但是再一次（特别是对于多选小部件），您可以想象列表框实际上是一系列复选框，在这种情况下，您将使用 aria-检查。两者都没有明确的对错（一旦您深入研究更复杂的 ARIA 小部件，您会发现很多东西）。

有没有一个技巧可以避免在每个选项上简单地添加 ID，以便 aria-activedescendant 可以引用它

嗯...也许您可以通过脚本为页面加载的所有选项动态生成 ID？或者 - 但未经测试 - 您可能有类似“漫游”ID 的东西，它根据哪个选项在选项中移动（将 ID 添加/删除到相关选项）。