Accessibility(アクセシビリティ)
アクセシブルなコンテンツを作るための Bootstrap の機能と制限の概要を知りましょう。
Bootstrap は定義されたスタイル、レイアウトツール、インタラクティブなコンポーネント群を提供しているので、開発者は豊富な機能で魅力的でアクセシブルな Web サイトやアプリケーションを開発することができます。
Overview and limitations
Bootstrap で構築された成果物の全体的なアクセシビリティは、マークアップ、スタイリング、スクリプティングに含まれています。これらが正しく実装されていれば WCAG 2.1 (A/AA/AAA)、Section 508 および同様のアクセシビリティ標準と要件を満たす Web サイトやアプリケーションを構築することが可能です。
Structural markup
Bootstrap のスタイリングとレイアウトは、多くのマークアップ構造に適用可能です。このドキュメントは、開発者にベストプラクティスを提供して Bootstrap の使い方を説明し、潜在的なアクセシビリティの問題を解決し、適切な構造的マークアップを提供することを目指しています。
Interactive components
モーダル、ドロップダウン、ツールチップなどの Bootstrap コンポーネントは、タッチ、マウス、キーボードを使うユーザに適しています。関連する WAI-ARIA の役割と属性を用いて、これらのコンポーネントは、補助的な技術(スクリーンリーダなど)で理解・操作可能であるべきです。
Bootstrap コンポーネントは汎用的に設計されているので、コンポーネントの正確な役割と機能をより正確に伝えるために ARIA の役割と属性、JavaScript の動作を追加しなければなりません。これはドキュメントに記載しています。
Color contrast
デフォルトの Bootstrap カラーのバリエーションはボタン、アラート、フォームのバリデーションなどコンポーネント全体で使われており、組み合わせによっては、特に明るい背景の場合に色のコントラストが不十分です(推奨 WCAG 2.0 カラーコントラスト比 4.5:1 および WCAG 2.1 非テキストカラーコントラスト比 3:1)。作者は適切なカラーコントラスト比を確保するために、デフォルトカラーおよびを手動で調整する必要があります。
Visually hidden content
視覚的に隠したほうが良いが、スクリーンリーダのような支援技術でアクセス可能なコンテンツは .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="visually-hidden-focusable" href="#content">Skip to main content</a>
Reduced motion
Bootstrap にはモーションを抑制する prefers-reduced-motion
media feature をサポートしています。ユーザがモーションを小さくしたり制御できるブラウザ環境では Bootstrap のほとんどの CSS トランジション(モーダルを閉じたり開いたりした場合など) は無効になります。
prefers-reduced-motion
をサポートしたブラウザで、ユーザが明示的にモーションの抑制を指定していない場合(例: prefers-reduced-motion: no-preference
)、Bootstrap は scroll-behavior
プロパティによってスムースにスクロールするようにします。
Additional resources
- Web Content Accessibility Guidelines (WCAG) 2.1
- The A11Y Project
- MDN accessibility documentation
- Tenon.io Accessibility Checker
- Color Contrast Analyser (CCA)
- “HTML Codesniffer” bookmarklet for identifying accessibility issues
- Microsoft Accessibility Insights
- Deque Axe testing tools
- Introduction to Web Accessibility