アクセシビリティ
アクセシブルなコンテンツを作成するためのBootstrapの機能と制限事項の簡単な概要。
Bootstrapは、すぐに使える、視覚的に魅力的で、機能が豊富で、アクセスしやすいWebサイトやアプリケーションを開発者が作成できるように、既製のスタイル、レイアウトツール、インタラクティブなコンポーネントの使いやすいフレームワークを提供します。
概要と制限事項
Bootstrapで構築されたあらゆるプロジェクトの全体的なアクセシビリティは、主に著者のマークアップ、追加のスタイル、および含まれているスクリプトに依存します。ただし、これらが正しく実装されている限り、WCAG 2.1 (A/AA/AAA)、セクション508、および同様のアクセシビリティ標準と要件を満たすWebサイトおよびアプリケーションをBootstrapで作成することは完全に可能です。
構造的なマークアップ
Bootstrapのスタイルとレイアウトは、さまざまなマークアップ構造に適用できます。このドキュメントは、Bootstrap自体の使用方法を実証し、潜在的なアクセシビリティの問題に対処する方法を含む、適切なセマンティックマークアップを示すためのベストプラクティスの例を開発者に提供することを目的としています。
インタラクティブなコンポーネント
モーダルダイアログ、ドロップダウンメニュー、カスタムツールチップなどのBootstrapのインタラクティブなコンポーネントは、タッチ、マウス、キーボードユーザー向けに設計されています。関連するWAI-ARIAの役割と属性を使用することで、これらのコンポーネントは、支援技術（スクリーンリーダーなど）を使用して理解および操作できるようにもする必要があります。
Bootstrapのコンポーネントは、意図的にかなり汎用的に設計されているため、作成者は、コンポーネントの正確な性質と機能をより正確に伝えるために、さらにARIAの役割と属性、およびJavaScriptの動作を含める必要がある場合があります。これは通常、ドキュメントに記載されています。
色のコントラスト
現在Bootstrapのデフォルトパレットを構成している色の組み合わせの一部は、ボタンのバリエーション、アラートのバリエーション、フォーム検証インジケーターなど、フレームワーク全体で使用されていますが、特に明るい背景で使用すると、（推奨されているWCAG 2.1のテキスト色のコントラスト比4.5:1とWCAG 2.1の非テキスト色のコントラスト比3: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>
モーションの削減
Bootstrapには、prefers-reduced-motionメディア機能のサポートが含まれています。ユーザーがモーションの削減の優先度を指定できるブラウザ/環境では、BootstrapのほとんどのCSSトランジション効果（たとえば、モーダルダイアログが開閉されたときや、カルーセルのスライドアニメーション）は無効になり、意味のあるアニメーション（スピナーなど）は低速になります。