はじめに

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

TL;DR

  • display: none; ⇔ display: block;(flex, etc…) で要素の 表示/非表示
    • 表示に影響が出る(他要素の位置が変わったりする)
  • visibility: hidden; ⇔ visibility: visible; で要素の 表示/非表示
    • 表示に影響が出ない(他要素の位置は不変)
  • display: none; も visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
    • アクセシビリティを保つにはここを参考(試してない)
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

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

詳細

動作デモ

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

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

See the Pen rNNgagy by 17num (@17num) on CodePen.

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; も、アクセシビリティ(読み上げ)に影響が出る
    • アクセシビリティを保つにはここを参考(試してない)

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list