group ロールの使用

説明

このテクニックは、group ロールを使用する方法を示し、ブラウザーと支援技術に与える影響について説明します。

group ロールは、region とは対照的に、目次やページの要約に含まれないように意図された一連のユーザーインターフェイスオブジェクトを識別するために使用されます（スクリプトや支援技術によって動的に作成される構造のような）。グループ（group）はページ上で主要な知覚可能なセクションと見なされるべきではありません。このロールが要素に追加されると、ブラウザーは、アクセス可能なグループイベントを支援技術製品に送り、支援技術製品はそれをユーザーに通知することができます。

グループは、階層内の兄弟の集合を形成するツリーウィジェット内の子供や、ディレクトリー内に同じコンテナーを持つ項目の集合のような、関連する機能を持つ項目の論理的集合を形成するために使用されるべきです。ただし、グループがリストのコンテキストで使用される場合、作者はその子をlistitem 要素に制限する必要があります。グループ要素はネストすることができます。

支援技術によるグループの適切な取り扱いは、それが提供されるコンテキストによって決まります。

作者がページの目次に含まれることを保証するためにセクションが重要であると考える場合は、そのセクションにregion ロールまたは標準的なランドマークロールを割り当てるべきです。

ユーザーエージェントと支援技術への影響

group ロールが要素に追加されるか、またはそのような要素が可視になると、ユーザーエージェントは以下を行うべきです。

オペレーティングシステムのアクセシビリティ API でgroup ロールを持つものとして要素を公開します。
オペレーティングシステムのアクセシビリティ API をサポートしている場合は、アクセス可能なグループイベントを発生させます。

支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。

スクリーンリーダーは、フォーカスが最初にその中のコントロールに着くとグループをアナウンスし、もしaria-describedby が設定されていれば、その説明が読み上げられます。これに続いて、フォーカスされたコントロールをアナウンスすることができます。
スクリーン拡大鏡でグループが拡大されることがあります。

メモ:支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。

例

例 1: HTML ツリービューでの group ロールの使用

以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。

html

<div role="tree" tabindex="-1">  <div          role="presentation"    aria-owns="animalGroup"    aria-expanded="true">    <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />    <span role="treeitem" tabindex="0">動物</span>  </div>  <div role="group">    <div role="treeitem">      <span tabindex="-1">鳥</span>    </div>    <div                role="presentation"      aria-owns="catGroup"      aria-expanded="false">      <img role="presentation" tabindex="-1" src="images/treeContracted.gif" />      <span role="treeitem" tabindex="0">猫</span>    </div>    <div role="group">      <div role="treeitem">        <span tabindex="-1">シャム猫</span>      </div>      <div role="treeitem">        <span tabindex="-1">虎猫</span>      </div>    </div>  </div></div>

例 2: HTML ドロップダウンメニューでの group ロールの使用

以下のスニペットは、HTML ソースコードに group ロールを直接追加する方法を示しています。

html

<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>