アクセス可能な内容の作成するためのBootstrapの機能の概要と制限
Bootstrapは、既製のstyleの使いやすいフレームワーク、レイアウト・ツールと開発者が、webサイトと視覚的に魅力があり、機能が豊富です、そして、すぐにアクセスして使えるアプリケーションを作成できる対話的コンポーネントを提供します。
概要と制限
Overview and Limitations
Bootstrapで構築されたプロジェクトの全体のアクセスしやすさは、大部分は、作者のマークアップ、追加のスタイリング、そして、含まれているスクリプトに依存します。しかしながら、これらが正しく実装されていれば、第508条および類似のアクセシビリティ基準および要件、WCAG 2.0(A/AA/AAA)を満たすBootstrapを使ってwebサイトとアプリケーションを作成することは完全に可能なはずです。
構造的なマークアップ
Structural markup
Bootstrapのスタイルとレイアウトは、広範囲にわたるマークアップ構造に適用することができます。このドキュメントは、Bootstrapそれ自身の使い方を実演するために、潜在的なアクセスしやすさへの懸念に対処する方法を含む、適切な意味論的マークアップを説明するために、最も効率のよい練習の例を、開発者に、提供することを目指しています。
対話的なコンポーネント
Interactive components
モーダル・ダイアログ、ドロップダウン・メニューとカスタム・ツールチップのような、Bootstrapの対話的コンポーネントは、タッチ、マウスとキーボード・ユーザーのために動作するために設計されています。関連するWAI-ARIAの役割と属性を使用することにより、また、これらのコンポーネントは、(スクリーン・リーダーのような)支援技術を使用して、理解して、使用できる必要があります。
Bootstrapコンポーネントが、意図的に、かなり一般的に設計されているため、作成者は、それらのコンポーネントの正確な性質と機能をもっと正確に伝えるために、JavaScript動作だけでなく、さらにARIAの役割と属性を組み込む必要があるかもしれません。 これは通常、ドキュメントに記載されています。
色のコントラスト
Color contrast
ボタンのバリエーション、アラート・バリエーション、フォ-ム検証インジケータのようなもののためのフレームワークを通して使用される現在のBootstrapのデフォルトのパレットを構成するほとんどの色は、明色の背景に対して使用されるとき、不十分な色のコントラストに案内します(以下の、推奨されたWCAG 2.0色は4.5:1のコントラスト比率です)作成者は、十分な色のコントラスト比率を確実にするために手作業でこれらのデフォルトの色を修正して/拡張する必要があります。
視覚的に隠された内容
Visually hidden content
内容は、視覚的に隠す必要がありますが、支援技術にアクセス可能なままです。例えば、スクリーン・リーダーは、.sr-onlyクラスを使用してスタイルを整えることができます。これは、更なる外観の情報で役立つことがあります。あるいは、キュー(例えば、色を使用して表示する意味)は、また、非ビジュアル・ユーザーに伝える必要があります。
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
従来の"skip"リンクのような、視覚的に隠れた対話的コントロールのために、.sr-onlyは、.sr-only-focusableクラスで結合することができます。これは、それを確実にコントロールします。(キーボードが見えるユーザーのため)、フォーカスした後、見えるようになります。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>