アクセシビリティ

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

このページの内容

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

概要と制限事項

Bootstrapを使用して構築されたプロジェクト全体のアクセシビリティは、大きくは作成者のマークアップ、追加のスタイル、および含まれているスクリプトに依存します。しかし、これらが正しく実装されていれば、WCAG 2.1 (A/AA/AAA)、Section 508、および同様のアクセシビリティ基準と要件を満たすウェブサイトとアプリケーションをBootstrapで作成することは完全に可能です。

構造マークアップ

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

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

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

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

色のコントラスト

現在Bootstrapのデフォルトパレットを構成する色の組み合わせの一部（ボタンのバリエーション、アラートのバリエーション、フォームの検証インジケーターなど、フレームワーク全体で使用されるもの）は、特に明るい背景に対して使用した場合、不十分な色のコントラスト（推奨されるWCAG 2.1テキスト色のコントラスト比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クラスを使用します。これにより、コントロールにフォーカスされると（視覚のあるキーボードユーザーの場合）、コントロールが表示されるようになります。**注意してください。以前のバージョンの同等の.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のほとんどのCSSトランジション効果（たとえば、モーダルダイアログを開いたり閉じたりする場合、またはカルーセルのスライドアニメーションなど）が無効になり、意味のあるアニメーション（スピナーなど）は遅くなります。

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