これはメモです

それ以上でもそれ以下でもないのです

aria-expandedの紐付けについて

HTML

最近ハンバーガーメニューを実装する時などにaria-*属性を使用することがあり、下記のように記述していた。

<div class="hamburger">
  <button type="button" aria-expanded="false" aria-controls="js_menu">ボタン</button>
  <div id="js_menu" aria-hidden="true">
    <!-- ここにメニューが入る -->
  </div>
</div>

気を付ける部分として、

  1. aria-expanded属性は開閉を制御する要素（つまりbutton）につける
  2. aria-contorls属性で制御する要素とされる要素の紐付けを行う

このように考えていたのだが、1.に関してはそうとも限らないらしい。

上記コードのような、ボタンとメニューが共通の祖先要素を持つなら、その要素にaria-expandedを付与することもできる。

<div class="hamburger" aria-expanded="false">
  <button type="button" aria-controls="js_menu">ボタン</button>
  <div id="js_menu" aria-hidden="true">
    <!-- ここにメニューが入る -->
  </div>
</div>

新しい発見があって奥深いという気持ち。

参考