WAI-ARIA 1.2

関係 ARIA 属性

要素間の関係性をアクセシビリティツリー上で表現するための属性です。DOM構造だけでは表現できない論理的な関係を定義します。

属性一覧

属性型説明使用例
aria-controlsID参照要素が制御する対象要素を指定します。ボタンがパネルの開閉を制御する場合などに使用します。
<button aria-controls="panel-1">開く</button>
<div id="panel-1">...</div>
aria-ownsID参照リストDOM上では親子関係にない要素を、アクセシビリティツリー上で子要素として関連付けます。
<ul aria-owns="external-item">
  <li>項目1</li>
</ul>
<li id="external-item">項目2</li>
aria-flowtoID参照リスト読み上げ順序のカスタマイズに使用します。DOMの順序とは異なる論理的な読み順を指定します。
<div aria-flowto="next-section">...</div>
aria-activedescendantID参照複合ウィジェット内でフォーカスを管理します。DOMフォーカスは親要素に保持しつつ、論理的にアクティブな子要素を示します。
<ul role="listbox" aria-activedescendant="opt-2">
  <li id="opt-2">選択肢2</li>
</ul>
aria-posinsetintegerセット内での要素の位置を示します。仮想スクロールなどで全アイテムがDOMにない場合に使用します。
<li aria-posinset="5" aria-setsize="100">
aria-setsizeintegerセット内の総アイテム数を示します。aria-posinset と組み合わせて使用します。
<li aria-setsize="100" aria-posinset="5">
aria-colcountintegerテーブルやグリッドの全列数を指定します。一部の列のみ表示している場合に使用します。
<table aria-colcount="15">
aria-rowcountintegerテーブルやグリッドの全行数を指定します。仮想スクロールで一部の行のみ表示している場合に使用します。
<table aria-rowcount="500">

ライブデモ

aria-controls のデモ

ボタンが制御するパネルをaria-controlsで関連付けます。支援技術はこの関係を利用してナビゲーションを提供します。

このパネルはボタンによって制御されています。aria-controls="controlled-panel"でボタンとこのパネルが関連付けられています。

<button aria-expanded="false"
        aria-controls="controlled-panel">
  パネルを開く
</button>
<div id="controlled-panel" role="region">
  ...制御対象のコンテンツ...
</div>

aria-owns のデモ

aria-ownsは、DOM上では親子関係にない要素を、アクセシビリティツリー上で親子として関連付けます。

DOM 構造（視覚的）

リスト親要素
項目 1
項目 2
項目 3（DOM上は別の親）

アクセシビリティツリー

リスト親要素
項目 1
項目 2
項目 3（リストの外）
<ul>
  <li>項目 1</li>
  <li>項目 2</li>
</ul>
<!-- 別の場所にある要素 -->
<li>項目 3</li>
<!-- ATではリストに含まれない -->
aria-activedescendantはコンボボックスやリストボックスなどの複合ウィジェットで、フォーカスを親要素に保ちつつ 論理的にアクティブな子要素を示す重要なパターンです。

参考リンク