ナビゲーションメニューやタブパネルの切り替えによるアイテムの表示・非表示を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-expanded、 aria-selected等にはもれなく aria-controls属性があるので、イベントが発生した要素のaria-controlsの値(id)を取得し、そのidを持つ要素のaria-hidden値を変更すればOKです。
これでアイテムの表示・非表示は全てaria-hiddenで制御できるので、各要素にdisplayプロパティを書く必要もなくなりました。
下は簡単に作ったサンプルです。Javascriptはとりあえず読み書きできるレベルなので、あまり参考にしないでください。
See the Pen aria-hidden toggle by Takashi Abe (@TakeshiAbe) on CodePen.