メインコンテンツへスキップ

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

スクリーンリーダーユーティリティを使用して、スクリーンリーダーを除くすべてのデバイスの要素を非表示にする。

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

見本

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

スクリーンリーダーのタイトル

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

メインコンテンツへスキップ
Bootstrap5.xの設定例
スクリーンリーダーを除いて非表示<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;
}
※Bootstrap4.xの設定例 赤背景が変更箇所
スクリーンリーダーを除いて非表示<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;
}
【設定】
  • スクリーンリーダーを除いて非表示: .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.scssscss/helpers/_visually-hidden.scss
    • .sr-only.visually-hidden
    • フォーカス時には表示:.sr-only-focusable.visually-hidden-focusable