スクリーンリーダー

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

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

<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;
}