メインコンテンツへスキップ
  • 導入
  • アクセシビリティ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

アクセシビリティ（Accessibility）

アクセス可能なコンテンツを作成するためのBootstrapの機能と制限の概要。

アクセシビリティ（英: accessibility）とは、近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む。 現代では、広い種類の利用者が製品や建物、サービスなどを支障なく利用できる度合いを指していることが多い。

IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報端末やソフトウェアから利用できることを目指している。

Wikipediaより抜粋

 

Bootstrapは、既製のスタイル、レイアウトツール、対話型コンポーネントの使いやすいフレームワークを提供し、開発者は視覚的に魅力的で機能豊富な、すぐにアクセスできるWebサイトやアプリケーションが作成可能。

概要と制限（Overview and Limitations）

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

構造マークアップ（Structural markup）

Bootstrapのスタイルとレイアウトは、幅広いマークアップ構造に適用可能。この解説では、Bootstrap自体の使用方法を示す最善の使用例を開発者に提供し、潜在的なアクセシビリティの懸念に対処する方法を含め、適切な意味のあるマークアップを示すことを目的としている。

対話型コンポーネント（Interactive components）

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

Bootstrapのコンポーネントはかなり一般的になるように意図的に設計されているため、作成者は、コンポーネントの正確な性質と機能をより正確に伝えるために、さらにJavaScriptの動作と同様に、ARIAの役割と属性を含める必要がある場合がある。これは通常、解説に記載されている。

カラーコントラスト（Color contrast）v4.6.2更新

現在、Bootstrapのデフォルトパレットを構成しているカラーの組み合わせ—フレームワーク全体で使用されているボタンのバリエーション、アラートのバリエーション、フォーム検証インジケータなど—は、特に明るい背景に対して使用すると、カラーコントラストが不十分（推奨されるWCAG 2.1のテキストカラーコントラスト比4.5：1やとWCAG 2.1の非テキストカラーコントラスト比3：1以下）になる可能性がある。サイト作成者は、カラーの特定の使用法をテストし、必要に応じて、デフォルトカラーを手動で変更/拡張して、適切なカラーコントラスト比を確保することを推奨。

【変更履歴】

  • 【v4.6.2】
    • 推奨されるカラーコントラストに「WCAG 2.1の非テキストカラーコントラスト比3：1」を追加

視覚的に非表示コンテンツ（Visually hidden content）

視覚的に非表示にすべきだが、スクリーンリーダーのような支援技術には引き続きアクセスさせたいコンテンツには、.sr-only クラスを使用してスタイル設定が可能。これは、追加の視覚情報や手がかり（カラーの使用によって示される意味など）も非視覚ユーザーに伝える必要がある状況で便利。

<p class="text-danger">
	<span class="sr-only">危険: </span>
	このアクションはリバーシブルではない
</p>

従来の「スキップ」リンクのような視覚的に非表示の対話型コントロールの場合、.sr-only は .sr-only-focusable クラスと組み合わせ可能。これにより、フォーカスされたコントロールが確実に見えるようになる（可視キーボードユーザー向け）。

<a class="sr-only sr-only-focusable" href="#content">メインコンテンツへスキップ</a>

モーションを小さくする（Reduced motion）v4.1.0新設

Bootstrapには、prefers-reduced-motion メディア機能のサポートが組み込まれている。ユーザーがモーションを小さくするプリファレンスを指定できるブラウザ/環境では、BootstrapのほとんどのCSS遷移効果（モーダルダイアログの開閉、カルーセルのスライドアニメーションなど）が無効になり、意味のあるアニメーション（スピナーなど）の速度が低下する。

 

その他のリソース（Additional resources）

ページ移動