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 |