アクセシビリティ

アクセシブルなコンテンツを作成するための Bootstrap の機能と制限事項の簡単な概要。

このページでは

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

概要と制限事項

Bootstrap で構築されたプロジェクトの全体的なアクセシビリティは、作成者のマークアップ、追加のスタイル、および含まれているスクリプトに大きく依存します。ただし、これらが正しく実装されていれば、WCAG 2.1 (A/AA/AAA)、セクション 508、および同様のアクセシビリティ標準と要件を満たす Bootstrap を使用して Web サイトとアプリケーションを作成することは完全に可能です。

構造マークアップ

Bootstrap のスタイルとレイアウトは、幅広いマークアップ構造に適用できます。このドキュメントの目的は、開発者にベストプラクティスの例を提供して、Bootstrap 自体の使用方法を示し、適切なセマンティックマークアップを説明することです。これには、潜在的なアクセシビリティの問題に対処する方法も含まれます。

インタラクティブなコンポーネント

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

Bootstrap のコンポーネントは意図的にかなり汎用的に設計されているため、作成者は、コンポーネントの正確な性質と機能をより正確に伝えるために、JavaScript の動作だけでなく、さらにARIA の役割と属性を含める必要がある場合があります。これは通常、ドキュメントに記載されています。

色のコントラスト

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

視覚的に非表示にする必要があるが、スクリーンリーダーなどの支援技術からアクセス可能なままにしておく必要があるコンテンツは、.visually-hiddenクラスを使用してスタイルを設定できます。これは、追加の視覚情報や合図 (色を使用して意味を示すなど) を非視覚ユーザーにも伝える必要がある場合に役立ちます。

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

従来の「スキップ」リンクなど、視覚的に隠されている対話型コントロールには、.visually-hidden-focusableクラスを使用します。これにより、コントロールがフォーカスされると確実に表示されるようになります (晴眼キーボードユーザー向け)。以前のバージョンの同等.sr-onlyの.sr-only-focusableクラスと比較して、Bootstrap 5.visually-hidden-focusableはスタンドアロンのクラスであり、クラスと組み合わせて使用してはならないことに注意して.visually-hiddenください。

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

動きの減少

prefers-reduced-motionブートストラップには、メディア機能のサポートが含まれています。ユーザーが動きを減らす設定を指定できるブラウザー/環境では、Bootstrap のほとんどの CSS トランジション効果 (たとえば、モーダルダイアログを開いたり閉じたりするとき、またはカルーセルのスライドアニメーション) が無効になり、意味のあるアニメーション (スピナーなど) が遅くなります。

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