Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

アクセシビリティ

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

目次

Bootstrap は定義されたスタイル、レイアウトツール、インタラクティブなコンポーネント群を提供しているので、開発者は豊富な機能で魅力的でアクセシブルな Web サイトやアプリケーションを開発することができます。

概要と制限

Bootstrap で構築された成果物の全体的なアクセシビリティは、マークアップ、スタイリング、スクリプティングに含まれています。これらが正しく実装されていれば WCAG 2.0 (A/AA/AAA)、Section 508 および同様のアクセシビリティ標準と要件を満たす Web サイトやアプリケーションを構築することが可能です。

構造的なマークアップ

Bootstrap のスタイリングとレイアウトは、多くのマークアップ構造に適用可能です。このドキュメントは、開発者にベストプラクティスを提供して Bootstrap の使い方を説明し、潜在的なアクセシビリティの問題を解決し、適切な構造的マークアップを提供することを目指しています。

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

モーダル、ドロップダウン、ツールチップなどの Bootstrap コンポーネントは、タッチ、マウス、キーボードを使うユーザに適しています。関連する WAI-ARIA の役割と属性を用いて、これらのコンポーネントは、補助的な技術(スクリーンリーダなど)で理解・操作可能であるべきです。

Bootstrap コンポーネントは汎用的に設計されているので、コンポーネントの正確な役割と機能をより正確に伝えるために ARIA の役割と属性、JavaScript の動作を追加しなければなりません。これはドキュメントに記載しています。

カラーコントラスト

デフォルトの Bootstrap カラーのバリエーションはボタン、アラート、フォームのバリデーションなどコンポーネント全体で使われており、明るい背景の場合は、色のコントラストが不十分です(推奨 WCAG 2.0 カラーコントラスト比 4.5:1)。作者は適切なカラーコントラスト比を確保するために、デフォルトカラーを手動で調整する必要があいrます。

視覚的な非表示コンテンツ

視覚的に隠したほうが良いが、スクリーンリーダのような支援技術でアクセス可能なコンテンツは .sr-only でスタイリングすることができます。これは、視覚的な情報(色によって示される意味など)を視覚障害者に伝えることに役立ちます。

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

.sr-only-focusable により、focus したコントロールが確実に分かるようになります。 Bootstrap 5 以降では、.sr-only-focusable クラスを .sr-only クラスと組み合わせて使うことはできません。

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

モーションの抑制

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

その他のリソース