視覚的に隠されている

これらのヘルパーを使用して、要素を視覚的に非表示にしながら、支援技術からアクセスできるようにします。

を使用して、要素を視覚的に非表示にしながら、支援技術 (スクリーンリーダーなど) に要素を公開できます.visually-hidden。デフォルトで要素を視覚的に非表示にするために使用.visually-hidden-focusableしますが、フォーカスされたときに表示します (キーボードのみのユーザーなど)。.visually-hidden-focusableコンテナにも適用できます。おかげで:focus-within、コンテナの子要素がフォーカスを受け取ると、コンテナが表示されます。

html

<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

との両方visually-hiddenをvisually-hidden-focusableミックスインとして使用することもできます。

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}

視覚的に隠されている

スクリーン リーダーのタイトル

スクリーンリーダーのタイトル