メインコンテンツへスキップ

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

アクセシビリティ(Accessibility)

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

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

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

Wikipediaより抜粋

 

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

概要と制限(Overview and Limitations)

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

構造マークアップ(Structural markup)

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

対話式コンポーネント(Interactive components)

モーダルダイアログ、ドロップメニュー、カスタムツールチップなどのBootstrapの対話式コンポーネントは、タッチ、マウス、キーボードのユーザーに適している。関連するWAI-ARIArole と属性を使用することで、これらのコンポーネントは、補助的な技術(スクリーンリーダーなど)を使用して理解でき、操作可能でなければならない。

色のコントラスト(Color contrast)

現在、Bootstrapのデフォルトパレットを構成するほとんどの色は、ボタンのバリエーション、警告のバリエーション、フォームの検証インジケータなどのためにフレームワーク全体で使用されているため、明るい背景で使用すると色のコントラストが不十分になる(WCAG 2.0 color contrast ratio of 4.5: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)