トグルボタンを使ったメニューの開閉を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-expanded、 aria-selected等にはもれなく aria-controls属性があるので、イベントが発生した要素のaria-controlsの値（id）を取得し、そのidを持つ要素のaria-hidden値を変更すればOKです。

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

下は簡単に作ったサンプルです。Javascriptはとりあえず読み書きできるレベルなので、あまり参考にしないでください。