如何处理 WAI ARIA 角色="listbox"
how to handle WAI ARIA role="listbox"
我有一个选项列表，您可以从中选择一个。对于所有意图和目的，HTML 的 <select> 元素涵盖了这一点。由于我们需要不同的视觉呈现方式，因此我考虑使用 WAI ARIA role="listbox"。我不清楚如何使用 aria-activedescendant、aria-selected 和 aria-checked。
关于 focus/active 状态的问题：
- 如果我在列表框中使用
aria-activedescendant 指向当前活动的 [role="option"]（有 "virtual focus"），我会使用 [aria-selected]。我最好如何告诉选项元素本身它是活动的（有 "virtual focus"）以直观地表示它？ （毕竟 :focus 在列表框中）
- 一个
[role="option"]可以有[aria-checked]和[aria-selected]。我想我需要 [aria-selected] 但看不到我会用 [aria-checked] 做什么。
- 有没有什么技巧可以避免将 ID 简单地放在每个选项上以便它可以被
aria-activedescendant 引用？
关于keyboard interaction的问题：
- "Checkbox - Space toggles checkboxes, if the list items are checkable" - 我如何确定它们是可检查的还是可选择的？
关于验证的问题：
如果列表框有 [aria-required="true"]，则必须执行某种验证。特别是如果已选择（或选中）一个选项。
- 我什么时候触发验证？
blur 够了吗？
- 无效时，除了在列表框上设置
[aria-invalid="true"]，我还要做些什么？
How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually?
通常，您会添加 aria-selected="true"，然后使用属性 selectors 制作一些 CSS 来处理它，例如div[role=option][aria-selected=true] { ... }，或者动态添加一个css class？
[aria-checked] and [aria-selected]
我想这更像是一个哲学问题。 aria-selected 更接近于 select 所拥有的内容......但是话又说回来（特别是对于 multi-select 小部件）你可以想象列表框实际上是一个系列复选框，在这种情况下，您将使用 aria-checked。两者都没有明确的对错（一旦你 div 进入更复杂的 ARIA 小部件，你会发现很多东西）。
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant
嗯...或许您可以通过脚本为页面加载的所有选项动态生成 ID？或者 - 但未经测试 - 你可以有类似 "roving" ID 的东西，它根据激活的选项在选项周围移动（adding/removing 相关选项的 ID）。
aria-checked 确实更像是一个非常密切相关的选项列表，带有可以打开或关闭的实际可见复选框。这在 Windows 世界中最为常见。 Explorer 可以设置为这种伪多 select 模式，或者某些应用程序使用它来激活或停用一组帐户。在 Mac 上，你可以想到 Adium 中的帐户列表，可以检查（活动）或不检查。 selection 将始终存在，并且可以选中或不选中它们的一个或多个复选框。
aria-selected 始终是指示选项 selected 状态的正确选项。例如当使用箭头键遍历列表时，aria-selected="true" 从一个项目移动到另一个项目，而其他人则必须得到 aria-selected="false"。正如帕特里克所说，您还可以使用它来生成一些漂亮的 CSS.
至于键盘交互：向上和向下箭头将 select 一个项目，如果项目也是可检查的，space 将切换当前 [=58] 的已检查或未检查状态=]编辑项目。
在真正的 multi-select 中，例如 html:select @size>1，并且 multiselectable 为真，交互将是：
- 方向键select单个项目。
- Ctrl+箭头键可以将焦点从一个项目移动到另一个项目，但还不能 select 那个项目。
- Ctrl+Space 将 select 项目。
- Shift+up 和 down 箭头将 select 连续的项目。
这又是标准的 Windows 范例，例如，可以在资源管理器的详细信息视图中观察到。
至于验证：onBlur 就足够了，或者您可以通过更改 selection/focused 项目动态地进行验证，确保至少有一个项目被 selected，或任何验证你需要。
aria-invalid="true" 足以让屏幕阅读器知道，但错误消息和可能的视觉指示会让每个人都知道出了什么问题。
我有一个选项列表，您可以从中选择一个。对于所有意图和目的，HTML 的 <select> 元素涵盖了这一点。由于我们需要不同的视觉呈现方式，因此我考虑使用 WAI ARIA role="listbox"。我不清楚如何使用 aria-activedescendant、aria-selected 和 aria-checked。
关于 focus/active 状态的问题：
- 如果我在列表框中使用
aria-activedescendant指向当前活动的[role="option"]（有 "virtual focus"），我会使用[aria-selected]。我最好如何告诉选项元素本身它是活动的（有 "virtual focus"）以直观地表示它？ （毕竟:focus在列表框中） - 一个
[role="option"]可以有[aria-checked]和[aria-selected]。我想我需要[aria-selected]但看不到我会用[aria-checked]做什么。 - 有没有什么技巧可以避免将 ID 简单地放在每个选项上以便它可以被
aria-activedescendant引用？
关于keyboard interaction的问题：
- "Checkbox - Space toggles checkboxes, if the list items are checkable" - 我如何确定它们是可检查的还是可选择的？
关于验证的问题：
如果列表框有 [aria-required="true"]，则必须执行某种验证。特别是如果已选择（或选中）一个选项。
- 我什么时候触发验证？
blur够了吗？ - 无效时，除了在列表框上设置
[aria-invalid="true"]，我还要做些什么？
How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually?
通常，您会添加 aria-selected="true"，然后使用属性 selectors 制作一些 CSS 来处理它，例如div[role=option][aria-selected=true] { ... }，或者动态添加一个css class？
[aria-checked] and [aria-selected]
我想这更像是一个哲学问题。 aria-selected 更接近于 select 所拥有的内容......但是话又说回来（特别是对于 multi-select 小部件）你可以想象列表框实际上是一个系列复选框，在这种情况下，您将使用 aria-checked。两者都没有明确的对错（一旦你 div 进入更复杂的 ARIA 小部件，你会发现很多东西）。
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant
嗯...或许您可以通过脚本为页面加载的所有选项动态生成 ID？或者 - 但未经测试 - 你可以有类似 "roving" ID 的东西，它根据激活的选项在选项周围移动（adding/removing 相关选项的 ID）。
aria-checked 确实更像是一个非常密切相关的选项列表，带有可以打开或关闭的实际可见复选框。这在 Windows 世界中最为常见。 Explorer 可以设置为这种伪多 select 模式，或者某些应用程序使用它来激活或停用一组帐户。在 Mac 上，你可以想到 Adium 中的帐户列表，可以检查（活动）或不检查。 selection 将始终存在，并且可以选中或不选中它们的一个或多个复选框。
aria-selected 始终是指示选项 selected 状态的正确选项。例如当使用箭头键遍历列表时，aria-selected="true" 从一个项目移动到另一个项目，而其他人则必须得到 aria-selected="false"。正如帕特里克所说，您还可以使用它来生成一些漂亮的 CSS.
至于键盘交互：向上和向下箭头将 select 一个项目，如果项目也是可检查的，space 将切换当前 [=58] 的已检查或未检查状态=]编辑项目。
在真正的 multi-select 中，例如 html:select @size>1，并且 multiselectable 为真，交互将是：
- 方向键select单个项目。
- Ctrl+箭头键可以将焦点从一个项目移动到另一个项目，但还不能 select 那个项目。
- Ctrl+Space 将 select 项目。
- Shift+up 和 down 箭头将 select 连续的项目。
这又是标准的 Windows 范例，例如，可以在资源管理器的详细信息视图中观察到。
至于验证：onBlur 就足够了，或者您可以通过更改 selection/focused 项目动态地进行验证，确保至少有一个项目被 selected，或任何验证你需要。
aria-invalid="true" 足以让屏幕阅读器知道，但错误消息和可能的视觉指示会让每个人都知道出了什么问题。