アクセシビリティ

アクセシブルなコンテンツを作るための 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)。作者は適切なカラーコントラスト比を確保するために, デフォルトカラーを手動で調整する必要があいｒます。

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

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

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

.sr-only は .sr-only-focusable と組み合わせることができます。これにより focus したコントロールが確実に分かるようになります。

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

モーションの抑制

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

その他のリソース