青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Visibility:hidden; と display:none; の、アクセシビリティ的な違い

よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。

なので、その場合はカーソル当たらない状態にする必要があります。

が、display:none;だと要素そのものを消してしまうので、例えばその中身でJSで計算とかをなにかしたくても消してると計算がうまく走らなかったりします。

そこで、visibility:hidden;を使います。

gist.github.com

visibility:hidden;ならフォーカスが当たらないで要素としては存在させたままに出来ます。

www.mitsue.co.jp

スクリーンリーダーによる読み上げも行われません。ですが、例えば中身でJSで位置を計算するとかは要素として存在はしている状態なので可能になります。