スクリーンリーダー

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

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