ARIA：radiogroup 角色

无线电组是描述一组相关radio选项的集合。radiogroup 是一种select列表，在任何给定时间只能选择一个条目或radio。

当使用 HTML 本机输入单选按钮，<input type="radio">时，当组中的每个输入单选按钮都具有相同的name时，这些单选按钮将被分组。一旦建立了一组同名输入单选按钮，选择该组中的任何输入单选按钮都会自动取消选择该组中当前选中的任何输入单选按钮。虽然这会将单选按钮关联在一起，但要将单选按钮组明确地公开为radiogroup，请设置 ARIA 角色。

建议使用同名 HTML 输入单选按钮创建无线电组，但是，如果您必须使用 ARIA 角色和属性而不是语义 HTML 表单控件，则自定义radio按钮可以并且应该像本机 HTML 单选输入按钮一样工作。

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

一些radiogroup实现使用所有按钮处于未选中状态来初始化集合。一旦radiogroup中的radio被选中，通常不可能返回到所有未选中状态。

radiogroup必须具有可访问的名称，方法是通过aria-labelledby引用的可见标签或使用aria-label指定的标签。如果元素提供了有关无线电组的其他信息，则这些元素将通过aria-describedby属性由radiogroup元素引用。

radio 角色

一组可选中按钮中的一个，位于radiogroup中，其中在任何给定时间只能选中一个按钮。

aria-labelledby / aria-label

radiogroup必须具有可访问的名称，方法是通过aria-labelledby引用的可见标签或使用aria-label指定的标签。

aria-describedby

对提供有关radiogroup的其他信息的元素的引用

aria-required

指示在提交表单之前，组中的一个radio必须设置aria-checked="true"。必需状态是在radiogroup元素上指定的，而不是在radio元素之一上指定的，这与使用 HTML 单选按钮时不同，在 HTML 单选按钮中，required属性直接设置在一个或多个单选<input>元素上。

aria-errormessage

标识为radiogroup提供错误消息的元素（如果有错误）。该消息在不相关时应隐藏。

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

Tab 和 Shift + Tab

将焦点移入和移出radiogroup。当焦点移入radiogroup时，如果单选按钮被选中，则焦点将设置在选中的按钮上。如果没有任何单选按钮被选中，则焦点将设置在组中的第一个单选按钮上。

空格

如果聚焦的单选按钮尚未选中，则选中它。

右箭头 和 下箭头

将焦点移动到组中的下一个单选按钮，取消选择先前聚焦的按钮，并选中新聚焦的按钮。如果焦点位于最后一个按钮上，则焦点将移动到第一个按钮。

左箭头 和 上箭头

将焦点移动到组中的上一个单选按钮，取消选择先前聚焦的按钮，并选中新聚焦的按钮。如果焦点位于第一个按钮上，则焦点将移动到最后一个按钮。

使用方向键在工具栏元素之间导航。当一个radiogroup嵌套在工具栏内时，用户需要能够在所有工具栏元素（包括单选按钮）之间导航，而无需更改选中的单选按钮。因此，当使用方向键在toolbar中的radiogroup中导航时，选中的按钮不会改变。相反，在toolbar内，空格键和回车键会选中获得焦点的radio按钮（如果该按钮尚未选中），而Tab键则用于在toolbar中进出焦点。

radiogroup的用户交互必须复制用户进入一组同名 HTML 单选按钮的用户交互。必须捕获 Tab 键、空格键和方向键的键盘事件。还必须捕获单选元素及其关联标签上的点击事件。此外，必须管理焦点。

虽然通常情况下，离开一个获得焦点的元素会将您带到 DOM 顺序中的下一个可聚焦元素，但使用方向键在单选按钮组中导航会使您保持在该组中，当在组中最后一个单选按钮上释放右箭头或下箭头时，焦点会移动到第一个单选按钮，当在组中第一个单选按钮上释放左箭头或上箭头时，焦点会移动到最后一个单选按钮。管理漫游tabindex是管理方向键事件的一种方法。

使用[aria-checked="true"]属性选择器来设置选中单选按钮的选中状态样式。

使用 CSS :hover 和 :focus伪类来设置视觉键盘焦点和悬停样式。焦点和悬停效果应同时包含单选按钮和标签，以便更容易感知正在选择哪个选项，并指示点击标签或按钮都会激活单选按钮。

使用非语义 ARIA 角色而不是语义 HTML 的radiogroup的基本设置如下所示

<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

<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 角色。

• HTML <fieldset>元素
• HTML <input type="radio">单选按钮元素
• ARIA radio角色
• aria-errormessage
• aria-invalid
• aria-readonly
• aria-required