HTML・CSSで要素を見えなくする方法とアクセシビリティ #CSS

これは何

Webサービスなどを作っていると、しばしば「要素を非表示」にするタイミングがあります。

などなどです。

こうしたUIを実装するときに、選ぶ方法によっては、アクセシビリティツリー上で削除されたりされなかったりします。

そのため、適切な方法を選ばないと、本来読み上げもスキップしたかったのに読み上げられてしまったり、逆に読み上げはして欲しいのに読み上げられなくなったりします。

また、見た目的には非表示になっていても、hoverやfocusができる場合とできない場合があり、意図せぬ挙動にもつながります。

アクセシビリティツリーとは、DOMツリーに基づいて生成されるスクリーンリーダーなどの支援技術に使用される情報です

そこで、要素を見えなくする方法をレイアウト上で無視されるかとアクセシビリティツリー上でどう読み上げられるかでまとめてみました。

結論は以下の図です。
HTML・CSSで要素を非表示にする方法は色々ありますが、主流っぽいものや比較的使われてそうなものを主観で集めました。

※そもそも表示されない要素はレンダリングしないという方法もありますが、今回はHTML・CSSに絞っているので入れてないです。

実際にそれぞれを指定してみると以下のようになります。

それぞれ3つの四角を並べて、真ん中の四角に非表示になるように指定しています。

See the Pen Untitled by kabechiyo_shunkaaizawa (@kabechiyo) on CodePen.

レイアウトが無視されるdisplay: noneとhiddenは非表示になった四角の分左に詰まりますが、それ以外の指定はレイアウトが無視されないので見えなくてもスペースが空いています。

別途widthとheightを0にしたり、position: absoluteを指定することで、レイアウトからも無視される（ように見える）ようにできます。

また、それぞれの要素をアクセシビリティツリー上でみてみると以下のようになっています。

プロパティ	アクセシビリティツリー上の表示
`display: none`	StaticText "1" StaticText "3"
`visibility: hidden`	StaticText "1" StaticText "3"
`hidden` （グローバル属性）	StaticText "1" StaticText "3"
`opacity: 0`	StaticText "1" StaticText "2" StaticText "3"
`transform: scale(0,0)`	StaticText "1" StaticText "2" StaticText "3"

display: noneとvisibility: hiddenとhidden （グローバル属性）では、指定した要素がアクセシビリティツリー上から削除されるので「2」が読み上げられず、それ以外は読み上げられます。

それぞれの方法の特徴も簡単にみていきます。

レイアウト上も無視されるようになり、アクセシビリティツリーからも削除されます。
要素を非表示にするだけでなくそもそもないものとして扱いたい時に使います。

レイアウト上では無視せず、アクセシビリティツリー上からは削除されます。
要素の表示/非表示を切り替えた時に他の要素の位置に影響を与えたくない時などに使います。

CSSのプロパティではなく、グローバル属性として指定します。
レイアウト上も無視されるようになり、アクセシビリティツリーからも削除されます。
hiddenが指定された要素にdisplay: blockなどを指定すると上書きして表示されるようになります。

要素は存在したままで、透明度を0にしたりサイズを0にすることで見えなくしています。
こうしたツリー上は存在しているけど、視覚的に見えないようにする方法は他にも色々とありますが、指定がシンプルなものをピックアップしました。
ツリー上で存在しているのでアクセシビリティツリー上で読ませたい時に使います。

HTMLとCSSを使って要素を見えなくする方法は複数存在しますが、それぞれ特徴があるので、うまく使い分けましょう