メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

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

スクリーンリーダーユーティリティを使用して、スクリーンリーダーを除くすべてのデバイスの要素を非表示にする。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 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 の両方ともミックスインとして使用可。

Bootstrap5.xの設定例 緑背景が変更箇所
Sassでの設定// ミックスインとして使用
.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}
※Bootstrap4.xの設定例 赤背景が変更箇所
Sassでの設定// ミックスインとして使用
.sr-only-title {
  @include sr-only;
}

.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}
【設定】
  • スクリーンリーダーを除いて非表示： .visually-hidden
  • スクリーンリーダーを除いて非表示だが、（キーボードのみのユーザーによる）フォーカス時には表示：.visually-hidden-focusable
【変更履歴】
  • 【v5.0.0-alpha1】
    • フォーカス時には表示：.sr-only.sr-only-focusable ⇒ .sr-only-focusable（単独で使用）
  • 【v5.0.0-alpha2】
    • Sassファイル：scss/helpers/_screenreaders.scss ⇒ scss/helpers/_visually-hidden.scss
    • .sr-only ⇒ .visually-hidden
    • フォーカス時には表示：.sr-only-focusable ⇒ .visually-hidden-focusable
  • 【v5.0.0-beta2】
    • :focus-within を使用して、.visually-hidden-focusable をコンテナでも機能するように拡張（スクリーンリーダーを除いて非表示（フォーカス時には表示）の2番目の設定が可能に）

CSS v5.1.0追加、v5.2.0Sassから名称変更

Sassミックスイン（Sass mixins）

デフォルトの設定
scss/mixins/_visually-hidden.scss 内の設定@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;
}

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