視覚的に非表示～Bootstrap5設置ガイド

.visually-hidden でスクリーンリーダーを除くすべてのデバイスで要素を非表示にする。.visually-hidden-focusable を使用すると、要素がフォーカスされているときのみ再表示する（例：キーボードのみのユーザーなど）。mixinとしても使用可能。

スクリーンリーダー固有のものではなく、実際には（AlexaやSiriなども含めた）支援技術全般に適用されているという事実をより明確に示すため、sr-only（スクリーンリーダーのみ）から visually-hidden（視覚的に非表示）に名称変更。

●スクリーンリーダーを除いて非表示

●スクリーンリーダーを除いて非表示（フォーカス時には表示）

スクリーンリーダーを除いて非表示<h2 class="visually-hidden">スクリーンリーダーのタイトル</h2>

スクリーンリーダーを除いて非表示（フォーカス時には表示）<a href="#content" class="visually-hidden-focusable">メインコンテンツへスキップ</a>

Sassでの設定// mixinとして使用
.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
	@include visually-hidden-focusable;
}

スクリーンリーダーを除いて非表示<h2 class="sr-only">スクリーンリーダーのタイトル</h2>

スクリーンリーダーを除いて非表示（フォーカス時には表示）<a class="sr-only sr-only-focusable" href="#content">メインコンテンツへスキップ</a>

Sassでの設定// mixinとして使用
.sr-only-title {
  @include sr-only;
}

.skip-navigation {
	@include sr-only;
	@include sr-only-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

前のページ
テキストの省略次のページ
ページがありません

視覚的に非表示（Visually hidden） v5.0.0-alpha2設定変更、クラス名変更 v5.0.0-alpha2スクリーンリーダーから名称変更