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

HTML/CSS

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

スポンサーリンク

aria-hiddenにいたった経緯

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

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

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

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

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

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はとりあえず動けばいいやと雑に書いたのであまり参考にしないでください。

See the Pen aria-hidden toggle by Takashi Abe (@TakeshiAbe) on CodePen.

ミフネWEB
タイトルとURLをコピーしました