GitHub で表示

スクリーン リーダー

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

.sr-only を使用して、すべてのデバイスに対して要素を非表示にし（スクリーン リーダーを除く）、.sr-only-focusable を .sr-only と組み合わせると、フォーカスされたときに要素が再び表示されます（キーボードのみを使用するユーザーなど）。ミックスインとしても使用できます。

メイン コンテンツにスキップ 
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}