はじめに

display, visibility プロパティについて簡単に整理した。

TL;DR

• display: none; ⇔ display: block;(flex, etc…) で要素の 表示/非表示
  • 表示に影響が出る(他要素の位置が変わったりする)
• visibility: hidden; ⇔ visibility: visible; で要素の 表示/非表示
  • 表示に影響が出ない(他要素の位置は不変)
• display: none; も visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
  • アクセシビリティを保つにはここを参考(試してない)

目次

1. はじめに
2. TL;DR
3. 詳細
   1. 動作デモ
   2. display: none と visibility: hidden について
   3. アクセシビリティの考慮(保持)
4. まとめ
5. 参考文献

詳細

動作デモ

クリックで display: none;, visibility: hidden; を付けたり外したりするだけのデモ。

ボタンをポチポチすると、すぐに違いが分かると思う。

display: none と visibility: hidden について

それぞれ MDN から引用。

display: none;

要素の display の値に none を使用すると、その要素はアクセシビリティツリーから削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。
　
要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、読み上げソフトのような支援技術が解析可能な状態を維持するための、プロパティの組み合わせを使用できます。

visibility: hidden;

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。
　
要素の visibility の値に hidden を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

どちらもアクセシビリティ(読み上げなど)に影響が出るのは同じとのこと。

純粋に他要素への表示位置に影響があるか無いかの違いっぽい。

アクセシビリティの考慮(保持)

試してないが、Hiding the link - Hidden content for better a11y | Go Make Things にて、非表示にしつつアクセシビリティを保つ方法が紹介されている。

まとめ

• display: none; ⇔ display: block;(flex, etc…) で要素の 表示/非表示
  • 表示に影響が出る(他要素の位置が変わったりする)
• visibility: hidden; ⇔ visibility: visible; で要素の 表示/非表示
  • 表示に影響が出ない(他要素の位置は不変)
• display: none; も visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
  • アクセシビリティを保つにはここを参考(試してない)

参考文献

• JavaScript 要素を表示/非表示にするサンプル(displayとvisibility) | ITSakura
• visibility - CSS: カスケーディングスタイルシート | MDN
• display - CSS: カスケーディングスタイルシート | MDN
• Hidden content for better a11y | Go Make Things

関連記事

• Bulma でメルカリ風のレスポンシブなデザインにする方法
• vue-web-extension を使って Chrome 拡張機能を開発する方法
• Bulma で画像を重ねて表示する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア
• Laravel で現在の URL 取得方法まとめ
• JavaScript で画像をローカルにダウンロード
• JavaScript で URL のクエリパラメータを操作する方法
• axios で添付ファイルありのリクエスト(multipart/form-data の POST)