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

アクセシビリティ（Accessibility）

アクセス可能なコンテンツを作成するためのBootstrapの機能と制限の概要。

※"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版での変更も含みます。
このページの項目

アクセシビリティ（英: accessibility）とは、近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む。現代では、広い種類の利用者が製品や建物、サービスなどを支障なく利用できる度合いを指していることが多い。

IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報端末やソフトウェアから利用できることを目指している。

Wikipediaより抜粋

Bootstrapは、既製のスタイル、レイアウトツール、対話型コンポーネントの使いやすいフレームワークを提供し、開発者は視覚的に魅力的で機能豊富な、すぐにアクセスできるWebサイトやアプリケーションを作成できる。

概要と制限（Overview and limitations）

Bootstrapで構築されたプロジェクトの全体的なアクセシビリティは、主に作成者のマークアップ、追加のスタイルとそこに組み込まれているスクリプトに大きく依存。ただし、これらが正しく実装されていれば、Bootstrapで完全にWCAG2.1(A/AA/AAA)、Section 508と類似のアクセシビリティ標準と要件を満たすWebサイトやアプリケーションが作成できる。

構造マークアップ（Structural markup）

Bootstrapのスタイルとレイアウトは、幅広いマークアップ構造に適用できる。この解説では、Bootstrap自体の使用方法を示す最善の使用例を開発者に提供し、潜在的なアクセシビリティの懸念に対処する方法を含め、適切な意味のあるマークアップを示すことを目的としている。

対話型コンポーネント（Interactive components）

モーダルダイアログ、ドロップメニュー、カスタムツールチップなどのBootstrapの対話型コンポーネントは、タッチ、マウス、キーボードのユーザー向けに設計されている。関連するWAI-ARIAの役割（role）と属性（attribute）を使用することで、これらのコンポーネントも、支援技術（スクリーンリーダーなど）を使用して理解と操作が可能になる。

Bootstrapのコンポーネントはかなり一般的になるように意図的に設計されているため、作成者は、コンポーネントの正確な性質と機能をより正確に伝えるために、さらにJavaScriptの動作と同様に、ARIAの役割と属性を含める必要がある場合がある。これは通常、解説に記載されている。

カラーコントラスト（Color contrast）v5.2.0更新

現在Bootstrapのデフォルトパレットを構成しているカラーの組み合わせ—フレームワーク全体で使用されるボタンのカラーバリエーション、アラートのカラーバリエーション、フォーム検証インジケータなど—は、特に明るい背景に対して使用すると、カラーコントラストが不十分（推奨されるWCAG 2.1のテキストカラーコントラスト比4.5：1やWCAG 2.1の非テキストカラーコントラスト比3：1以下）になる可能性がある。サイト作成者は、特定のカラーの使用をテストし、必要に応じて、これらのデフォルトカラーを手動で変更/拡張して、適切な色のコントラスト比を確保することを推奨。

【変更履歴】
  • 【v5.2.0】
    • 推奨されるカラーコントラストに「WCAG 2.1の非テキストカラーコントラスト比3：1」を追加

視覚的に非表示コンテンツ（Visually hidden content）v5.0.0-alpha2設定変更

視覚的に非表示にすべきだが、スクリーンリーダーのような支援技術には引き続きアクセスさせたいコンテンツには、.visually-hidden クラスを使用してスタイル設定できる。これは、追加の視覚情報や手がかり（カラーの使用によって示される意味など）も非視覚ユーザーに伝える必要がある状況で便利。

Bootstrap5.xの設定例 緑背景が変更箇所
<p class="text-danger">
  <span class="visually-hidden">危険: </span>
  このアクションはリバーシブルではない
</p>
※Bootstrap4.xの設定例 赤背景が変更箇所
<p class="text-danger">
  <span class="sr-only">危険: </span>
  このアクションはリバーシブルではない
</p>

従来の「スキップ」リンクのような視覚的に非表示の対話型コントロールの場合、.visually-hidden-focusable クラスを使用。これにより、フォーカスされたコントロールが確実に見えるようになる（可視キーボードユーザー向け）。以前のバージョンの同等の .sr-only や .sr-only-focusable クラスと比較して、Bootstrap5の .visually-hidden-focusable は独立したクラスであり、.visually-hidden クラスと組み合わせて使用しないで下さい。

Bootstrap5.xの設定例 緑背景が変更箇所
<a class="visually-hidden-focusable" href="#content">メインコンテンツへスキップ</a>
※Bootstrap4.xの設定例 赤背景が変更箇所
<a class="sr-only sr-only-focusable" href="#content">メインコンテンツへスキップ</a>
【変更履歴】
  • 【v5.0.0-alpha1】
    • .sr-only.sr-only-focusable ⇒ .sr-only-focusable
  • 【v5.0.0-alpha2】
    • .sr-only ⇒ .visually-hidden
    • .sr-only-focusable ⇒ .visually-hidden-focusable

モーションを小さくする（Reduced motion）

Bootstrapには、prefers-reduced-motion メディア機能のサポートが組み込まれている。ユーザーがモーションを小さくするプリファレンスを指定できるブラウザ/環境では、BootstrapのほとんどのCSS遷移効果（モーダルダイアログの開閉、カルーセルのスライドアニメーションなど）が無効になり、意味のあるアニメーション（スピナーなど）の速度が低下する。

prefers-reduced-motion をサポートするブラウザで、ユーザーが縮小モーションを好むことを明示的に通知していない場合（つまり、prefers-reduced-motion：no-preference の場合）、Bootstrapは scroll-behavior プロパティを使用してスムーズなスクロールを有効にする。

その他のリソース（Additional resources）