トグルボタンを使ったメニューの開閉をaria-hiddenで統一したら楽になった

ナビゲーションメニューやタブパネルの切り替えによるアイテムの表示・非表示をaria-hiddenで統一したら管理がずいぶん楽になったので今後のために記録しておきます。

INDEX

aria-hiddenにいたった経緯

スマートフォンのハンバーガーメニューのように、ボタンクリックによるアイテムの表示切り替えはサイトのあちこちで使用しますが、コーディングは人によってまちまちです。

checkboxで切り替えることもできます（キーボード操作や音声操作に対応できないので非推奨）し、class名の付け外しで切り替えることもできます。

私の場合はbuttonロールを使って、[aria-pressed=”true”] + ○○　で作るケースがほとんどでした。

しかし例えばタブパネルでは [aria-selected]が適正（だと思っていますが違っていたらすみません）ですし、その都度ごちゃごちゃ書いていかなくてはならなくなります。

面倒くさいしどうにかならないかと思っていたところに「aria-hidden でオンオフを全部コントロールすれば楽になるのでは」と天啓を得ました。気づくのが遅いと言われても仕方がないと深く反省しています。

cssは

[aria-hidden="true"]{
  display: none;	
}
[aria-hidden="false"]{
	display: block;
}

のみ。

ただアイコンに使用しているsvgにもaria-hidden=”true”が入っているので、

*:not(svg)[aria-hidden="true"]{
  display: none;	
}

としました。

クリックやフォーカスに対応するボタンにaria-pressed属性とaria-controls属性をつけて、イベントが発生した要素のaria-controls（id）を取得し、そのidを持つ要素のaria-hidden値を変更すればOKです。

<button type="button" aria-pressed="false" aria-controls="demo">Btn</button>

<div id="demo" aria-hidden="true">
qwertyuiop
</div>

これでアイテムの表示・非表示は全てaria-hiddenで制御できるので、いちいちdisplayプロパティを書く必要もなくなりました。

下は簡単に作ったサンプルです。Javascriptはとりあえず動けばいいやと雑に書いたのであまり参考にしないでください。