Bootstrapは定義されたスタイル、レイアウトツール、インタラクティブなコンポーネント群を提供しているので、開発者は豊富な機能で魅力的でアクセシブルなWebサイトやアプリケーションを開発することができます。
概要と限界
Bootstrapで構築された成果物の全体的なアクセシビリティは、マークアップ、スタイリング、スクリプティングに含まれています。これらが正しく実装されていれば WCAG 2.1 (A/AA/AAA)、Section 508 および同様のアクセシビリティ標準と要件を満たすWebサイトやアプリケーションを構築することが可能です。
構造的なマークアップ
Bootstrapのスタイリングとレイアウトは、多くのマークアップ構造に適用可能です。このドキュメントは、開発者にベストプラクティスを提供してBootstrapの使い方を説明し、潜在的なアクセシビリティの問題を解決し、適切な構造的マークアップを提供することを目指しています。
インタラクティブなコンポーネント
モーダル、ドロップダウン、ツールチップなどのBootstrapコンポーネントは、タッチ、マウス、キーボードを使うユーザに適しています。関連するWAI-ARIAの役割と属性を用いて、これらのコンポーネントは、補助的な技術(スクリーンリーダなど)で理解・操作可能であるべきです。
Bootstrapコンポーネントは汎用的に設計されているので、コンポーネントの正確な役割と機能をより正確に伝えるためにARIAの役割と属性、JavaScriptの動作を追加しなければなりません。これはドキュメントに記載しています。
カラーコントラスト
デフォルトのBootstrapカラーのバリエーションはボタン、アラート、フォームのバリデーションなどコンポーネント全体で使われており、組み合わせによっては、特に明るい背景の場合に色のコントラストが不十分です(推奨 WCAG 2.0カラーコントラスト比 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クラスを使用してください。これにより、（目の見えるキーボードユーザーのために）フォーカスされると、コントロールは確実に可視化されます。 Bootstrap 5の.sr-onlyと.sr-only-focusableは、過去のバージョンで同等だった .visually-hiddenクラスと比較して、独立したクラスであり、 .visually-hiddenクラスと組み合わせて使用してはいけませんので、注意してください。
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
モーションの低減
Bootstrapは、prefers-reduced-motionメディアの機能をサポートしています。ユーザーが動きの減少の好みを指定できるブラウザ/環境では、BootstrapのほとんどのCSS遷移効果（例えば、モーダルダイアログの開閉時や、カルーセルのスライドアニメーション）は無効になり、意味のあるアニメーション（スピナーなど）は減速されるでしょう。
prefers-reduced-motionをサポートするブラウザで、ユーザーが明示的に縮小された動きを好むとシグナルしていない場合（つまり、prefers-reduced-motion: no-preference）、Bootstrapはscroll-behaviorプロパティを使用してスムーズスクローリングを可能にします。