我有一个选项列表，可以从中选择一个。出于所有意图和目的，HTML的<select>元素涵盖了这一点。由于我们需要不同的视觉呈现，因此我正在使用WAI ARIA role="listbox"。我不清楚如何使用aria-activedescendant，aria-selected和aria-checked。
关于焦点/活跃状态的问题：
aria-activedescendant指向当前有效的[role="option"]（具有＆＃34;虚拟焦点＆＃34;），我会使用[aria-selected]。我怎么能告诉选项元素本身它是活跃的（有＃34;虚拟焦点＆＃34;）来直观地表示它？ （毕竟，:focus在列表框中）[role="option"]可以有[aria-checked]和[aria-selected]。我想我需要[aria-selected]，但不要看我使用[aria-checked]的内容。aria-activedescendant可以引用它？关于keyboard interaction的问题：
有关验证的问题：
如果列表框中包含[aria-required="true"]，则必须执行某种验证。特别是如果选择（或选中）了一个选项。
blur足够吗？[aria-invalid="true"]外，我还需要做什么？答案 0 :(得分：4)
aria-checked确实更适用于非常密切相关的选项列表，其中包含可以打开或关闭的实际可见复选框。这在Windows世界中最常见。资源管理器可以设置为这样的伪多选模式，或者某些应用程序使用它来激活或停用一组帐户。在Mac上，您可以考虑Adium中的帐户列表，可以检查（活动）或不检查。选择将始终存在，并且可以选中或不选中其中一个或多个复选框。
aria-selected始终是指示选项的选定状态的正确选项。 E. g。当使用箭头键遍历列表时，aria-selected="true"会在项目之间移动，而其他人则必须获得aria-selected="false"。帕特里克说，你可以使用它来生成一些漂亮的CSS。
对于键盘交互：向上和向下箭头将选择一个项目，如果项目也是可检查的，则空格将切换当前所选项目的已选中或未选中状态。
在真正的多选中，例如html：select @ size＆gt; 1，multiselectable为true，交互将是：
这也是标准的Windows范例，例如，可以在Explorer的详细信息视图中观察到。
至于验证：onBlur就足够了，或者你可以通过选择/聚焦项目的变化动态地做到这一点，确保选择至少一个项目，或者你需要的任何验证。
aria-invalid="true"足以让屏幕阅读者知道，但是错误信息和可能的视觉指示对于每个人都知道什么是错的很好。
答案 1 :(得分：2)
我怎样才能告诉选项元素本身它是活动的（具有“虚拟焦点”）来直观地表示它？
通常，你要添加aria-selected =“true”然后制作一些使用属性选择器来处理它的CSS，例如： div [role = option] [aria-selected = true] {...}，还是动态添加css类？
我猜这更像是一个哲学问题。 aria-selected更接近匹配你所拥有的选择...但是再次（特别是对于多选小部件）你可以想象列表框实际上是一系列复选框，在这种情况下你会使用咏叹调 - 检查。任何一个都没有确定的对错（一旦你深入了解更复杂的ARIA小部件，你会发现很多东西）。
是否有一个技巧可以避免必须在每个选项上添加ID，以便它可以被aria-activedescendant引用
嗯...也许你可以通过脚本为页面加载动态生成所有选项的ID？或者 - 但没有经过测试 - 您可以使用类似“漫游”ID的内容，根据哪个选项处于活动状态（在相关选项中添加/删除ID）来移动选项。