アクセシビリティ

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

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

概要と制限事項

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

構造マークアップ

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

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

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

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

色のコントラスト

現在、Bootstrap のデフォルトパレットを構成しているほとんどの色 (ボタンのバリエーション、アラートのバリエーション、フォーム検証インジケーターなどのフレームワーク全体で使用されています) は、色のコントラストが不十分になります (WCAG 2.0 で推奨されている色のコントラスト比 4.5:1 を下回ります) 。明るい背景。作成者は、適切な色のコントラスト比を確保するために、これらの既定の色を手動で変更/拡張する必要があります。

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

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

従来の「スキップ」リンクなど、視覚的に非表示の対話型コントロールについては、クラス.sr-onlyと組み合わせることができます。.sr-only-focusableこれにより、コントロールがフォーカスされると確実に表示されるようになります (晴眼キーボードユーザー向け)。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

動きの減少

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