我有一个选项列表，可以从中选择。出于所有意图和目的，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"]之外，我还需要做什么？
aria-checked确实更像是一个非常密切相关的选项列表，这些选项带有可以打开或关闭的实际可见复选框。这在Windows世界中最常见。资源管理器可以设置为此类伪多选模式，或者某些应用使用它来激活或停用一组帐户。在Mac上，您可以想到Adium中的帐户列表，可以选中（活动）或不选中。选择将始终存在，并且可以选中或不选中一个或多个复选框。
aria-selected始终是指示选项的选定状态的正确选择。 例如，当使用箭头键遍历列表时，aria-selected="true"从一个项目移动到另一个项目，而其他项目必须aria-selected="false"。正如 Patrick 所说，你也可以使用它来生成一些漂亮的 CSS。
至于键盘交互：向上和向下箭头将选择一个项目，如果项目也是可检查的，则空格将切换当前所选项目的选中或未选中状态。
在真正的多选中，如 html：select @size>1，并且多选为真，交互将是：
- 箭头键选择单个项目。
- 按 Ctrl+箭头键会将焦点从一个项目移动到另一个项目，但尚未选择该项目。
- 按 Ctrl+空格键将选择该项。
- Shift+向上和向下箭头将选择连续的项目。
这同样是标准的Windows范例，例如，可以在资源管理器的"详细信息"视图中观察到。
至于验证：onBlur就足够了，或者您可以通过更改选择/焦点项目来动态地执行此操作，确保至少选择一个项目，或者您需要的任何验证。
aria-invalid="true"足以让屏幕阅读器知道，但错误消息和可能的视觉指示会让每个人都知道出了什么问题。
我如何最好地告诉选项元素本身它是活动的（具有"虚拟焦点"）以直观地表示它？
通常，你会添加aria-selected="true"，然后使用属性选择器制作一些CSS来处理它，例如div[role=option][aria-selected=true] { ... }，或者动态添加一个css类？
[咏叹调检查]和[咏叹调选择]
我想这更像是一个哲学问题。 咏叹调选择更匹配你与选择...但话又说回来（特别是对于多选小部件），你可以想象列表框实际上是一系列复选框，在这种情况下，你会使用 ARIA-CHECKED。任何一个都没有明确的对错（一旦你深入研究更复杂的 ARIA 小部件，你会发现很多）。
有没有一个技巧可以避免在每个选项上都放置 ID，以便它可以被 aria-active 后代引用
嗯。。。也许您可以通过脚本为页面加载时的所有选项动态生成 ID？或者 - 但未经测试 - 你可以有一个类似"漫游"ID的东西，它会根据哪个选项处于活动状态（将ID添加/删除到相关选项）在选项周围移动。