ARIA: group 角色
group 角色用于标识一组用户界面对象，而这组对象不打算被辅助技术包含在页面摘要或目录中。
描述
group 文档结构角色最接近 HTML 的 <fieldset> 元素，用于标识一组用户界面对象，与 region 角色相比，这组对象不打算包含在页面的摘要或目录中。
group 角色应用于将具有相关功能的 UI 对象组合成一个逻辑集合，例如，在 tree 小部件中，子项构成层次结构中的同级集合，或者在 directory 中，具有相同容器的项的集合。
当 group 角色用于 list 的上下文中时，请将 group 的子项限制为 listitem 元素。在这种情况下，建议使用多个有序或无序列表，即 <ol> 或 <ul>，并带有嵌套的 <li> 子项。
当用于 listbox 的上下文中时，唯一允许的子项是 <option> 元素。在这种情况下，建议改用 <select>、<option> 和 <optgroup>。
Group 元素可以嵌套。
group 角色不应用于页面中的主要可感知部分。如果一个部分足够重要，应该包含在页面的目录中，请使用 region 角色或标准的 landmark 角色。
当该角色添加到元素时，浏览器将向辅助技术产品发送可访问的组事件，然后辅助技术产品可以通知用户。
示例
下面的 HTML 代码示例将 group 角色与 tree 视图一起使用。
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">Animals</span>
</div>
<div id="animalGroup" role="group">
<div id="birds" role="treeitem">
<span tabindex="-1">Birds</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">Cats</span>
</div>
<div id="catGroup" role="group">
<div id="siamese" role="treeitem">
<span tabindex="-1">Siamese</span>
</div>
<div id="tabby" role="treeitem">
<span tabindex="-1">Tabby</span>
</div>
</div>
</div>
</div>
以下示例将 group 角色与包含 menuitem 的下拉 menu 一起使用。
html
<div role="menu">
<ul role="group">
<li role="menuitem">Inbox</li>
<li role="menuitem">Archive</li>
<li role="menuitem">Trash</li>
</ul>
<ul role="group">
<li role="menuitem">Custom Folder 1</li>
<li role="menuitem">Custom Folder 2</li>
<li role="menuitem">Custom Folder 3</li>
</ul>
<ul role="group">
<li role="menuitem">New Folder</li>
</ul>
</div>
此菜单可以使用 <select> 和 <option> 元素构建。在这种情况下，group 角色将最类似于 <optgroup> 元素。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # group |