.visually-hidden
でスクリーンリーダーを除くすべてのデバイスで要素を非表示にする。.visually-hidden-focusable
を使用すると、要素がフォーカスされているときのみ再表示する(例:キーボードのみのユーザーなど)。.visually-hidden-focusable
はコンテナにも適用可。:focus-within
のおかげで、コンテナの子要素がフォーカスを受け取ったときにコンテナが表示される。
スクリーンリーダー固有のものではなく、実際には(AlexaやSiriなども含めた)支援技術全般に適用されているという事実をより明確に示すため、
sr-only
(スクリーンリーダーのみ)から visually-hidden
(視覚的に非表示)に名称変更。
見本
Bootstrap5.xの設定例
スクリーンリーダーを除いて非表示<h2 class="visually-hidden">スクリーンリーダーのタイトル</h2>
スクリーンリーダーを除いて非表示(フォーカス時には表示)<a href="#content" class="visually-hidden-focusable">メインコンテンツへスキップ</a>
<div class="visually-hidden-focusable"><a href="#">フォーカス可能な要素</a>を持つコンテナ</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
スクリーンリーダーを除いて非表示<h2 class="sr-only">スクリーンリーダーのタイトル</h2>
スクリーンリーダーを除いて非表示(フォーカス時には表示)<a href="#content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>
visually-hidden
と visually-hidden-focusable
の両方ともmixinとして使用可。
Bootstrap5.xの設定例 緑背景が変更箇所
Sassでの設定// mixinとして使用
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}
※Bootstrap4.xの設定例 赤背景が変更箇所
Sassでの設定// mixinとして使用
.sr-only-title {
@include sr-only;
}
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
【設定】
- スクリーンリーダーを除いて非表示:
.visually-hidden
- スクリーンリーダーを除いて非表示だが、(キーボードのみのユーザーによる)フォーカス時には表示:
.visually-hidden-focusable
【変更履歴】
- 【v5.0.0-alpha1】
- フォーカス時には表示:
.sr-only.sr-only-focusable
⇒.sr-only-focusable
(単独で使用)
- フォーカス時には表示:
- 【v5.0.0-alpha2】
- Sassファイル:
scss/helpers/_screenreaders.scss
⇒scss/helpers/_visually-hidden.scss
.sr-only
⇒.visually-hidden
- フォーカス時には表示:
.sr-only-focusable
⇒.visually-hidden-focusable
- Sassファイル:
- 【v5.0.0-beta2】
:focus-within
を使用して、.visually-hidden-focusable
をコンテナでも機能するように拡張(スクリーンリーダーを除いて非表示(フォーカス時には表示)の2番目の設定が可能に)
ページ移動
前のページ
テキストの省略次のページ
ページがありません
テキストの省略次のページ
ページがありません