ARIA: group ロール
group ロールは、支援技術によってページの概要や目次に含まれないことを意図している、一連のユーザーインターフェイスオブジェクトを識別するものです。
解説
HTML の <fieldset> 要素と最も密接に関連する group 文書構造ロールは、一連のユーザーインターフェースオブジェクトを識別するために使用されます。これは、region と比較して、ページの概要や目次には記載しないことを意図していないものです。
group ロールを使用しましょう。アイテムの関連する機能を形成するために使用します。tree ウィジェット内の子要素が階層内で兄弟要素の集合を形成する場合や、directory 内の同じコンテナーを持つアイテムの集合などです。
list のコンテキストで group を使用する場合は、group の子要素を listitem 要素に制限してください。この場合、ネストされた <li> 子要素を持つ、複数の順序付きリストまたは順序なしリスト（<ol> または <ul>）を使用することを推奨します。
listbox のコンテキストで使用する場合、許可される子要素は <option> 要素のみです。この場合、代わりに <select>、<option>、<optgroup> を使用することを推奨します。
group の要素は入れ子にすることができます。
group ロールは、ページ内の主要な識別可能なセクションには使用しないでください。そのセクションが、ページの目次に記載するほど重要なものである場合は、region ロール、または標準のランドマークロールを使用してください。
要素にロールが追加されると、ブラウザーは支援技術製品に対してアクセシビリティ・グループ・イベントを送信し、支援技術製品はそれに基づいてユーザーに通知を行うことが可能です。
例
下記 HTML サンプルコードでは、tree ビューで group ロールを使用しています。
<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"
alt="" />
<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"
alt="" />
<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>
次の例では、group ロールを使用し、menu のドロップダウンメニューに menuitem が含まれています。
<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> 要素に最も近いものとなります。
仕様書
| 仕様書 |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # group |