アクセシビリティ Accessibility

アクセシブルなコンテンツを作成するためのBootstrapの機能と制限事項の概要です。

On this page

Bootstrapは、すぐに使えるスタイル、レイアウトツール、インタラクティブなコンポーネントのフレームワークを提供しており、開発者は視覚的に魅力的で機能豊富、そしてアクセシブルなWebサイトやアプリケーションを最初から作成できます。

概要と制限事項

Bootstrapで構築されたプロジェクトの全体的なアクセシビリティは、作成者のマークアップ、追加のスタイリング、スクリプティングに大きく依存します。ただし、これらが正しく実装されていれば、WCAG 2.2 (A/AA/AAA)、Section 508、および類似のアクセシビリティ標準や要件を満たすWebサイトやアプリケーションをBootstrapで作成することは十分に可能です。

構造的なマークアップ

Bootstrapのスタイリングとレイアウトは、幅広いマークアップ構造に適用できます。このドキュメントは、開発者にBootstrap自体の使用方法を示すベストプラクティスの例を提供し、適切なセマンティックマークアップを説明することを目的としています。これには、潜在的なアクセシビリティの懸念に対処する方法も含まれます。

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

Bootstrapのインタラクティブコンポーネント（モーダルダイアログ、ドロップダウンメニュー、カスタムツールチップなど）は、タッチ、マウス、キーボードユーザーのために動作するように設計されています。関連するWAI-ARIAのロールと属性の使用により、これらのコンポーネントは支援技術（スクリーンリーダーなど）を使用しても理解可能で操作可能である必要があります。

Bootstrapのコンポーネントは意図的にかなり汎用的に設計されているため、作成者はコンポーネントの正確な性質と機能をより正確に伝えるために、さらにARIAロールと属性、およびJavaScriptの動作を含める必要がある場合があります。これは通常、ドキュメントに記載されています。

色のコントラスト

Bootstrapのデフォルトパレットを構成する色の組み合わせの中には（ボタンのバリエーション、アラートのバリエーション、フォーム検証インジケーターなど、フレームワーク全体で使用されるもの）、特に明るい背景に対して使用する場合、不十分な色のコントラスト（推奨されるWCAG 2.2テキスト色のコントラスト比4.5:1およびWCAG 2.2非テキスト色のコントラスト比3:1を下回る）を引き起こす可能性があるものがあります。作成者は、色の特定の使用方法をテストし、必要に応じて、適切な色のコントラスト比を確保するために、これらのデフォルトの色を手動で変更/拡張することをお勧めします。

視覚的に非表示のコンテンツ

視覚的には非表示にするが、スクリーンリーダーなどの支援技術にはアクセス可能なままにする必要があるコンテンツは、.visually-hiddenクラスを使用してスタイルを設定できます。これは、追加の視覚情報や手がかり（色の使用によって示される意味など）を非視覚ユーザーにも伝える必要がある状況で役立ちます。

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

視覚的に非表示のインタラクティブコントロール（従来の「スキップ」リンクなど）には、.visually-hidden-focusableクラスを使用します。これにより、フォーカスされると（視力のあるキーボードユーザーのために）コントロールが表示されるようになります。注意：過去のバージョンの同等の.sr-onlyおよび.sr-only-focusableクラスと比較して、Bootstrap 5の.visually-hidden-focusableはスタンドアロンクラスであり、.visually-hiddenクラスと組み合わせて使用してはいけません。

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

モーションの削減

Bootstrapはprefers-reduced-motionメディア機能のサポートを含んでいます。ユーザーがモーションの削減の設定を指定できるブラウザ/環境では、Bootstrapのほとんどのトランジション効果（たとえば、モーダルダイアログが開閉されるとき、またはカルーセルのスライドアニメーション）が無効になり、意味のあるアニメーション（スピナーなど）は遅くなります。

prefers-reduced-motionをサポートするブラウザで、ユーザーがモーションの削減を明示的に指定していない場合（つまり、prefers-reduced-motion: no-preferenceの場合）、Bootstrapはscroll-behaviorプロパティを使用してスムーズスクロールを有効にします。