ARIA：组角色
group 角色标识一组用户界面对象，这些对象不打算被辅助技术包含在页面摘要或目录中。
描述
group 文档结构角色与 HTML 的 <fieldset> 元素最为相关，用于标识一组用户界面对象，与 region 相比，不打算将其包含在页面的摘要或目录中。
group 角色应用于形成具有相关功能的逻辑项目集合，例如，tree 小部件中的子级构成层次结构中的兄弟姐妹集合，或者在 directory 中具有相同容器的项目集合。
当 group 用于 list 的上下文中时，将 group 的子级限制为 listitem 元素。在这种情况下，建议使用多个有序或无序列表，<ol> 或 <ul>，以及嵌套的 <li> 子级。
在 listbox 的上下文中使用时，唯一允许的子级是 <option> 元素。在这种情况下，建议使用 <select>、<option> 和 <optgroup> 代替。
Group 元素可以嵌套。
group 角色不应用于页面的主要可感知部分。如果一个部分很重要，应该包含在页面的目录中，请使用 region 角色或标准的 地标角色。
当角色添加到元素时，浏览器将向辅助技术产品发送一个可访问的组事件，然后辅助技术产品可以通知用户。
示例
下面的 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 |