aria-controls

グローバルなaria-controls 属性は、この属性が設定されている要素によってコンテンツまたは存在が制御される要素を識別します。

解説

コンボボックス、タブ、ボタンなどの対話可能なウィジェットまたは要素を使用して、ドキュメントまたはアプリケーション内の別の要素またはコンポーネントを調整または変更する場合、aria-controls 属性を使用して、対応する要素を制御する要素にプログラムで関連付けることができます。aria-controls 属性は、影響を受ける動作を開始するインタラクションの種類に関係なく、この属性が設定されている要素によってコンテンツまたは存在が制御される要素を識別します。

combobox 要素には、ポップアップとして機能する要素を参照するaria-controls の値が設定されています。ポップアップが表示されている場合にのみaria-controls を設定する必要がありますが、表示されていない要素を参照することも有効であり、プログラムが簡単になります。

その他のコントロールの例は次のとおりです:

アコーディオンウィジェットの、関連付けられているパネルコンテンツの表示・非表示を切り替えるボタン部分。各ボタンは、呼び出し元のコントロールに関連付けられているコンテンツを含む要素の ID を参照するaria-controls を指定する場合があります。
ロールがscrollbar の要素: スクロールバーが制御している要素の ID を参照するaria-controls 属性が必要です。
それぞれ異なるタブパネルを表示するタブのグループ:role="tab" の各要素には、関連付けられているtabpanel を参照するaria-controls 属性があります。

例

このタブの例では、各タブが 1 つのタブパネルを制御します:

html

<div>  <div role="tablist" aria-label="Sample Tabs">    <span      role="tab"      aria-selected="true"      aria-controls="panel-1"           tabindex="0">      First Tab    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-2"           tabindex="-1">      Second Tab    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-3"           tabindex="-1">      Third Tab    </span>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-1">    <p>Content for the first panel</p>  </div>  <div       role="tabpanel"    tabindex="0"    aria-labelledby="tab-2"   >    <p>Content for the second panel</p>  </div>  <div       role="tabpanel"    tabindex="0"    aria-labelledby="tab-3"   >    <p>Content for the third panel</p>  </div></div>

メモ:ARIA は要素のアクセシビリティツリーのみを変更し、支援技術がコンテンツをユーザーに提示する方法を識別します。ARIA は暗黙的な機能やスタイルを変更しません。