画面、スクリーンリーダー両方から隠す方法
display: none;
<div class="hidden">
画面に表示されず、スクリーンリーダーも認識しません。
</div>
.hidden {
display: none;
}
display: none;を使用した場合画面からも、スクリーンリーダーからも認識できなくなります。
visibility: hidden;
<div class="hidden">
画面に表示されず、スクリーンリーダーも認識しませんがレイアウトは変わりません。
</div>
.hidden {
visibility: hidden;
}
visibility: hidden;を使うと、視覚的には非表示になっています。また、スクリーンリーダーも認識しません。display: none;と違い、そのボックス自体がなくなってしまうわけではありません。なのでvisibilityプロパティを使用して表示・非表示を切り替えたとしてもレイアウトは変わりません。
hidden属性
<!--hidden属性-->
<div>画面に表示されています。</div>
<div hidden>画面に表示されず、スクリーンリーダーも認識しません。</div>
要素そのものがなくなるわけではなく、ブラウザが持っている内部的なスタイルシートでdisplay: noneを付与しているそうです。
以下MDN、hidden属性から引用
注:
hidden属性を持つ要素について、 CSS のdisplayプロパティの値を変更すると、挙動を上書きします。例えばdisplay: flexを設定した要素は、hidden属性が存在しても表示されます。
スクリーンリーダーからのみ隠す方法
aria-hidden属性
<!--aria-hidden属性-->
<div aria-hidden="true">画面に表示されていますが、スクリーンリーダーは認識しません。</div>
aria-hidden属性値をtrue にすることで、その要素はアクセシビリティツリー*から消え、スクリーンリーダーから認識されませんが画面には表示されます。
また、画面には表示されているにも関わらずキーボード操作から外れるので、使用する際には注意が必要です。
以下MDN、aria-hidden属性から引用
Warning: Do not use
aria-hidden="true"on focusable elements.
警告 フォーカス可能な要素には aria-hidden=”true” を使用しないでください。
画面上は非表示で、スクリーンリーダーには伝える
opacity: 0;
<div class="hidden">
透明なので見えませんが支援技術は認識します。
</div>
.hidden {
opacity: 0;
}
opacityプロパティで隠す場合、ただ要素が透明になって視覚的に見えなくなっているだけです。要素自体は存在するのでスクリーンリーダーは認識します。
displayやvisibilityを使わずに隠すCSS
以下の記事を参考にしました
display: none;やvisibility: hidden;は画面からもスクリーンリーダーからも要素を隠してしまいます。画面からは隠したいけれどスクリーンリーダーでは読ませたい要素には以下を指定してあげます。
.visually-hidden {
position: absolute;
border: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
また、プロパティが多いためmixinを使ったりユーティリティクラスで使い回すのが良さそうです。
//mixinの定義
@mixin visually-hidden() {
position: absolute;
border: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
@use "foundation/global";
//スクリーンリーダー向け隠しコンテンツのユーティリティクラス
.u-hidden {
@include global.visually-hidden();
}
