ARIA：radiogroup 角色

描述

Radio groups 是描述一组相关 radio 选项的集合。radiogroup 是一种 select 列表，一次只能选中一个条目或 radio。

使用 HTML 原生的 radio 按钮 <input type="radio"> 时，通过为组中的每个 input radio 按钮设置相同的 name 来对其进行分组。一旦一组同名的 input radio 按钮建立，选中该组中的任何一个 input radio 按钮都会自动取消选中同一组中当前已选中的任何 input radio 按钮。虽然这会将 radio 按钮关联在一起，但要明确地将 radio 按钮分组公开为 radiogroup，请设置 ARIA 角色。

建议使用同名的 HTML input radio 按钮创建 radio 组，但是，如果必须使用 ARIA 角色和属性而不是语义 HTML 表单控件，则自定义 radio 按钮可以并且应该像原生 HTML radio input 按钮一样工作。

使用非语义元素作为 radio 按钮时，您必须确保用户一次只能从组中选择一个 radio 按钮。当组中的一个项目被选中时，将其 aria-checked 属性设置为 true，则先前被选中的项目将变为未选中状态，其 aria-checked 属性变为 false。aria-checked 属性设置在关联的 radio 角色上，而不是设置在 radiogroup 本身。

某些 radiogroup 实现会以所有按钮都处于未选中状态来初始化该组。一旦 radiogroup 中的 radio 被选中，通常就无法返回到全未选中状态。

radiogroup 必须具有可访问的名称，可以通过由 aria-labelledby 引用的可见标签，或者通过使用 aria-label 指定的标签。如果元素提供了有关 radio 组的附加信息，则这些元素将由 radiogroup 元素通过 aria-describedby 属性引用。

关联的 WAI-ARIA 角色、状态和属性

radio 角色: radiogroup 中的一组可选中按钮之一，其中一次只能选中一个按钮。
aria-labelledby / aria-label: radiogroup 必须具有可访问的名称，可以通过由 aria-labelledby 引用的可见标签，或者通过使用 aria-label 指定的标签。
aria-describedby: 引用为 radiogroup 提供附加信息的元素
aria-required: 指示组内的某个 radio 必须设置 aria-checked="true" 才能提交表单。required 状态指定在 radiogroup 元素上，而不是在 radio 元素之一上，这与使用 HTML radio 按钮不同，后者将 required 属性直接设置在一个或多个 radio <input> 元素上。
aria-errormessage: 标识在 radiogroup 中出现错误时提供错误消息的元素。在不相关时，该消息应隐藏。

键盘交互

对于 radiogroup（而不是 toolbar）中的 radio 按钮，必须支持以下键盘交互

Tab 和 Shift + Tab: 将焦点移入和移出 radiogroup。当焦点移入 radiogroup 时，如果某个 radio 按钮已选中，则焦点会设置在已选中的按钮上。如果没有任何 radio 按钮被选中，则焦点会设置在组中的第一个 radio 按钮上。
空格: 如果当前聚焦的 radio 按钮尚未选中，则选中它。
右箭头键 和 下箭头键: 将焦点移到组中的下一个 radio 按钮，取消选中先前聚焦的按钮，然后选中新聚焦的按钮。如果焦点在最后一个按钮上，焦点将移到第一个按钮。
左箭头键 和 上箭头键: 将焦点移到组中的上一个 radio 按钮，取消选中先前聚焦的按钮，然后选中新聚焦的按钮。如果焦点在第一个按钮上，焦点将移到最后一个按钮。

箭头键用于在工具栏中的元素之间导航。当 radiogroup 嵌套在工具栏内时，用户需要能够在不更改选中哪个 radio 按钮的情况下，在所有工具栏元素（包括 radio 按钮）之间导航。因此，当使用箭头键在 toolbar 中的 radiogroup 中导航时，选中的按钮不会改变。相反，在工具栏内时，空格键 和 回车键 会选中当前聚焦的 radio 按钮（如果尚未选中），而 Tab 键则将焦点移入和移出 toolbar。

<div role="radiogroup" aria-labelledby="question">
  <div id="question">Which is the best color?</div>
  <div id="radioGroup">
    <p>
      <span
        id="colorOption_0"
        tabindex="0"
        role="radio"
        aria-checked="false"
        aria-labelledby="purple"></span>
      <span id="purple">Purple</span>
    </p>
    <p>
      <span
        id="colorOption_1"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="aubergine"></span>
      <span id="aubergine">Aubergine</span>
    </p>
    <p>
      <span
        id="colorOption_2"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="magenta"></span>
      <span id="magenta">Magenta</span>
    </p>
    <p>
      <span
        id="colorOption_3"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="all"></span>
      <span id="all">All of the above</span>
    </p>
  </div>
</div>

本应使用语义 HTML 来编写此内容，而这不需要 CSS 或 JavaScript

html

<fieldset>
  <legend>Which is the best color?</legend>
  <p>
    <input name="colorOption" type="radio" id="purple" />
    <label for="purple">Purple</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="aubergine" />
    <label for="aubergine">Aubergine</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="magenta" />
    <label for="magenta">Magenta</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="all" />
    <label for="all">All of the above</label>
  </p>
</fieldset>

在此 <fieldset> 示例中，虽然 role="radiogroup" 不是必需的，但为了将此分组明确宣布为 radiogroup，请包含 ARIA 角色。