masuP.netmasuP.netaria-expandedのよくある間違い公開2018/10/24更新2018/10/24カテゴリーAccessibilityHTMLWAI-ARIAの中で、コンテンツが展開されているかどうかの状態を表すaria-expandedは、WAI-ARIAの中でもよく使われている属性のうちの一つ[注1]ですが、誤った使い方をみかけることも少なくありません。私自身も間違った理解のまま使用していた時期もありました。Archiveそこでaria-expandedのよく見かける間違いと、仕様に基づいた正しい使い方をまとめました。要素、または要素が制御する別のグループ化要素が、現在展開されるまたは折りたたまれるかどうかを示す。要素そのものが隠れているかどうかを示すaria-hiddenとは異なります。アコーディオンUIのマークアップの場合、aria-expandedは、折りたたまれて非表示になるアコーディオンパネルの要素に付与するのではなく、その親要素か、展開を制御する要素に付与するべきです。</section></div>間違い:展開する要素を所有していない場合に制御するコンテンツを明示していない間違いその1の正しい使用例として提示した「展開を制御する要素に付与する例」のように、aria-expandedが付与された要素が展開されうる要素を所有していない場合は、制御するコンテンツを明示する必要があります。aria-expanded属性をもつ要素が要素'によって所有'されない別のグループ化コンテナの展開を制御する場合、著者はaria-controls属性を使用することによってコンテナを参照すべきである。https://momdo.github.io/wai-aria-1.1/#aria-expandedこの場合の所有しているという状態は仕様の中の重要な用語でも定義されていますが、次のいずれかです。特別な理由が無く素直にマークアップできるのであればDOM子孫として持てますが、複雑なレイヤーが重なり合う動画プレイヤー上のメニューや画面のスクロール位置によって展開位置を変更するようなメニューについては、DOM的に離れた箇所に展開されうる要素を置くケースがあります。YouTubeの動画プレイヤー上の設定メニューそのような場合はaria-controlsで展開を制御する要素を明示する、もしくは展開されうるコンテンツを所有する必要があります。id="tab1">展開されるコンテンツ</div>aria-ownsとaria-controlsのどちらを使うかどうかは、特別な制約がない場合においてDOM構造的に所有する形でも違和感がないかどうか、から考えるのが自然なように思います。この際は要素のコンテンツモデルに関して気にする必要はないように思います。<button>の中にXXは置けないなどまたは、aria-ownsで参照される要素は、他の要素のaria-ownsから参照されないことを保証しないといけないので、複数のトリガーから展開をコントロールされることが考えられる場合はaria-controlsが適していると考えられるでしょう。コンテンツの展開は、インタラクティブなユーザーインターフェースとしては頻出かつ基本的なものになりますので、きちんと仕様を読み理解して抑えたいですね。