display:noneとvisibility: hiddenの違い

要素を見えなくしたいときに、display:noneとvisibility: hiddenはどちらも同じではないのか？という疑問からこの記事を書きました。

結論、どちらも同じではなかったです！
2つの大きな違いは、表示とレイアウトの違いにありました。

ここから詳しい解説をします。

表示とレイアウトの違い

display:none

DOMから要素が「取り除かれる」ため、隙間をつめて要素が並んでいるように見えます。

visibility: hidden

要素が「非表示」にされるだけで、隙間をつめて要素が並ぶわけではありません。

どちらもタブ操作不可・スクリーンリーダーの読み込みはされない

アクセシビリティの観点からすると、どちらも同じです。
タブ操作（Tabキーで画面上の要素にフォーカスする）やスクリーンリーダーの読み込みはされません。

しかしスクリーンリーダーの種類によっては、visibility: hiddenを読み上げてしまうケースもあるそうです。そんなときはaria-hidden="true"で「読み上げ不要」の指定をすると、スクリーンリーダーが読み上げをスキップします。

それぞれの使い分け

それぞれ、要素の空間を保持したいか？（隙間がつめられては困るか）を軸に使い分けると良さそうです。

display: none

• ハンバーガーメニューの表示・非表示
• タブコンテンツの切り替え
• モーダルウィンドウ
• フォームの条件分岐（その他のボタンクリックで自由入力フォームを出す、など）

visibility: hidden

• ツールチップの表示（display: noneと異なり、空間を保持したまま非表示にできるため）
• 読み込み中のインジケータの表示
• テーブルの特定の行・列の非表示