[CSS] 不可視のメニューはフォーカス移動の対象からも外す

見えないのに選択できたり、順序を外れて読み上げられたりするのは都合が悪い。

マウスオーバー等で開閉するメニューは、閉じている部分をキーボードによるフォーカス移動の対象から外しておく方が見た目との整合性が取れる。

[NG例]

親となるリスト要素のマウスオーバー、マウスアウトでサブメニューの opacity の値をアニメーション付きで変更している。
これだけではキーボードを使ったフォーカス移動で非表示のメニューが選択できてしまう。

[OK例]

visibility: hidden を追加することで、閉じているサブメニューはキーボード操作によるフォーカスを受け取らなくなり、アクセシビリティツリーからも削除され読み上げの対象外となる。
display: none でも排除できるが、display は transition 未対応のためアニメーション付きで表示させる場合は visibility を使う。

まとめ

このような小さな違和感をなくすことで訪問者の閲覧体験が良くなる。
ページ内タブやアコーディオン型のコンテンツなど不可視の領域を作ることはよくあるので、無料テンプレートなどを改造する際は必要なプロパティをオーバーライドしていないか、HTML 側のクラス名を消していないか確認して欲しい。

参考リンク

opacity - CSS: カスケーディングスタイルシート | MDN
visibility - CSS: カスケーディングスタイルシート | MDN