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 |