group

何时使用

对于表单控件分组，应使用带有 <legend> 的 <fieldset>。原生元素提供分组语义、可视边框（样式可自定义）以及 legend 关联。

role="group" 适用于以下场景：

• 包裹一组相关但非表单的控件（如日期选择器的三个下拉框、一排图标开关）。
• 在树形控件、树状视图或表格中，需要标记某一层级的子元素形成逻辑分组。
• 需要创建一个不作为地标暴露的分组 — 与 role="region" 的区别详见此说明。

分组在用途不明显时，应当拥有无障碍名称（aria-label 或 aria-labelledby）。若无名称，屏幕阅读器会忽略该角色，分组也就失去意义。

常见错误

• role="group" 未提供无障碍名称。屏幕阅读器忽略该角色；分组不可见。
• 在 <fieldset> + <legend> 可以胜任的场景下使用 role="group"。优先使用原生元素。
• 混淆 role="group" 与 role="region"。Region 是地标，会出现在地标导航中；group 则不会。
• 将界面中每个 UI 区块都标记为分组。应谨慎使用 — 过多分组会稀释每个分组的价值。
• 在 role="tablist" 的包裹元素上使用 role="group"。此做法冗余；tablist 本身已是分组结构。

示例

<!-- 表单控件的推荐写法 -->
<fieldset>
  <legend>Date of birth</legend>
  <label>Day <input type="text" inputmode="numeric"></label>
  <label>Month <input type="text" inputmode="numeric"></label>
  <label>Year <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- 非表单分组 -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Rate this article</span>
  <button type="button" aria-label="1 star">★</button>
  <button type="button" aria-label="2 stars">★★</button>
</div>