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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

スクリーンリーダー(Screen readers)

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

設定例
スクリーンリーダーを除いて非表示<a class="sr-only" href="#content">メインコンテンツへスキップ</a>
スクリーンリーダーを除いて非表示(フォーカス時には表示)<a class="sr-only sr-only-focusable" href="#content">メインコンテンツへスキップ</a>
Sassでの設定// mixinとして使用
.skip-navigation {
	@include sr-only;
	@include sr-only-focusable;
}

【設定】

  • スクリーンリーダーを除いて非表示: .sr-only
  • スクリーンリーダーを除いて非表示だが、(キーボードのみのユーザーによる)フォーカス時には表示:.sr-only.sr-only-focusable