スクリーンリーダー

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

.sr-only を使って、スクリーンリーダー以外のデバイスで要素を非表示にします。.sr-only と .sr-only-focusable を組み合わせて、フォーカス時に要素を再表示します（キーボードのみのユーザなど）。ミックスインとしても使えます。

<a class="sr-only sr-only-focusable" href="#content">メインコンテンツにスキップする</a>

// ミックスインとして使用
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}