View on GitHub

アクセシビリティ

アクセシブルなコンテンツを作るための Bootstrap の機能と制限の概要を知りましょう。

On this page

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 により、focus したコントロールが確実に分かるようになります。過去のバージョンの.sr-only と .sr-only-focusable クラスと比較すると、Bootstrap5 の .visually-hidden-focusable はスタンドアロンなクラスなので、.visually-hidden クラスと組み合わせて使うことはできません。

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

モーションの抑制

Bootstrap にはモーションを抑制する prefers-reduced-motion media feature をサポートしています。ユーザがモーションを小さくしたり制御できるブラウザ環境では Bootstrap のほとんどの CSS トランジション(モーダルを閉じたり開いたりした場合など) は無効になります。

prefers-reduced-motion をサポートしたブラウザで、ユーザが明示的にモーションの抑制を指定していない場合(例: prefers-reduced-motion: no-preference)、Bootstrap は scroll-behavior プロパティによってスムースにスクロールするようにします。