ARIA：group 角色
group 角色用于标识无需被辅助技术所包含的页面摘要或目录中的 UI 对象。
描述
group 文档结构角色最接近于 HTML 的 <fieldset> 元素，与 region 相比，它用于标识无需包含在页面摘要或目录中的 UI 对象。
group 角色应该用于各项之间能形成具有相关性功能的逻辑集合，例如在 tree 中的子元素，它们之间形成了一种层级关系，或在 directory 中具有相同容器的一组项目。
当在 list 的上下文中使用时，group 的子元素仅限 listitem 元素。此时，建议使用多个有序或无序列表（<ol> 或 <ul>），并嵌套 <li> 子元素。
当在 listbox 的上下文中使用时，唯一允许的子元素是 <option> 元素。在这种情况下，建议使用 <select>、<option> 和 <optgroup>。
group 元素可以嵌套使用。
group 角色不应用于页面的主要可感知部分。如果某个部分足够重要而需要包含在页面的目录中，应使用 region 角色或标准的地标角色。
当 group 角色添加到某个元素时，浏览器会向具有无障碍访问技术的产品发送一个可访问的 group event，这样便可通知用户。
示例
以下 HTML 代码在 tree 视图中使用了 group 角色：
html
<div id="tree1" role="tree" tabindex="-1">
<div
id="animals"
class="groupHeader"
role="presentation"
aria-owns="animalGroup"
aria-expanded="true">
<img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
<span role="treeitem" tabindex="0">动物</span>
</div>
<div id="animalGroup" role="group">
<div id="birds" role="treeitem">
<span tabindex="-1">鸟</span>
</div>
<div
id="cats"
class="groupHeader"
role="presentation"
aria-owns="catGroup"
aria-expanded="false">
<img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
<span role="treeitem" tabindex="0">猫</span>
</div>
<div id="catGroup" role="group">
<div id="siamese" role="treeitem">
<span tabindex="-1">暹罗猫</span>
</div>
<div id="tabby" role="treeitem">
<span tabindex="-1">虎斑猫</span>
</div>
</div>
</div>
</div>
以下示例在包含了 menuitem 的下拉菜单（menu）中使用了 group 角色：
html
<div role="menu">
<ul role="group">
<li role="menuitem">收件箱</li>
<li role="menuitem">归档</li>
<li role="menuitem">已删除</li>
</ul>
<ul role="group">
<li role="menuitem">自定义文件夹 1</li>
<li role="menuitem">自定义文件夹 2</li>
<li role="menuitem">自定义文件夹 3</li>
</ul>
<ul role="group">
<li role="menuitem">创建文件夹</li>
</ul>
</div>
此菜单也能使用 <select> 及 <option> 元素构造，此时 group 角色类似于 <optgroup> 元素。
规范
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # group |