視覚的に非表示（Visually hidden） v5.0.0設定変更、クラス名変更 v5.0.0スクリーンリーダーから名称変更

.visually-hidden でスクリーンリーダーを除くすべてのデバイスで要素を非表示にする。.visually-hidden-focusable を使用すると、要素がフォーカスされているときのみ再表示する（例：キーボードのみのユーザーなど）。.visually-hidden-focusable はコンテナにも適用可。:focus-within のおかげで、コンテナの子要素がフォーカスを受け取ったときにコンテナが表示される。

実例（Examples）

見本

Bootstrap5.xの設定例

スクリーンリーダーを除いて非表示<h2 class="visually-hidden">スクリーンリーダーのタイトル</h2>

スクリーンリーダーを除いて非表示（フォーカス時には表示）<a href="#content" class="visually-hidden-focusable">メインコンテンツへスキップ</a>
<div class="visually-hidden-focusable"><a href="#">フォーカス可能な要素</a>を持つコンテナ</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

スクリーンリーダーを除いて非表示<h2 class="sr-only">スクリーンリーダーのタイトル</h2>

スクリーンリーダーを除いて非表示（フォーカス時には表示）<a href="#content" class="sr-only sr-only-focusable">メインコンテンツへスキップ</a>

visually-hidden と visually-hidden-focusable の両方ともmixinとして使用可。

Bootstrap5.xの設定例 緑背景が変更箇所

Sassでの設定// mixinとして使用
.visually-hidden-title {
  @include visually-hidden;
}

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

※Bootstrap4.xの設定例 赤背景が変更箇所

Sassでの設定// mixinとして使用
.sr-only-title {
  @include sr-only;
}

.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

Sass v5.1.0追加

デフォルトの設定

scss/mixins/_visually-hidden.scss の設定// 支援技術にアクセスできるようにしながら、コンテンツを視覚的に非表示にする
//
// https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ を参照
// https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ を参照

@mixin visually-hidden() {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // https://github.com/twbs/bootstrap/issues/25686 の修正
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// フォーカスされている場合か、その子要素の1つがフォーカスされている場合にのみコンテンツを表示するために使用
// (つまり、フォーカスがクラスが適用された要素/コンテナ内にある場合)
//
// 「メインコンテンツにスキップ」リンクに役立つ。https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 を参照

@mixin visually-hidden-focusable() {
  &:not(:focus):not(:focus-within) {
    @include visually-hidden();
  }
}

scss/helpers/_visually-hidden.scss の設定.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  @include visually-hidden();
}