よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。
なので、その場合はカーソル当たらない状態にする必要があります。
が、display:none;だと要素そのものを消してしまうので、例えばその中身でJSで計算とかをなにかしたくても消してると計算がうまく走らなかったりします。
そこで、visibility:hidden;を使います。
visibility:hidden;ならフォーカスが当たらないで要素としては存在させたままに出来ます。
スクリーンリーダーによる読み上げも行われません。ですが、例えば中身でJSで位置を計算するとかは要素として存在はしている状態なので可能になります。
