Screenreaders

スクリーンリーダーを除くすべてのデバイスの要素を非表示にします。

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

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