ウェブアクセシビリティの4つの原則(POUR)
成功 する製品とは、障害の有無にかかわらず、すべての人がその価値を享受できるものです。
障害を持つアメリカ人法(ADA)などの法律は、デジタルの世界においても障害を持つ人々のアクセスを保障するよう求めています。
しかし、真にインクルーシブな(誰一人取り残さない)製品開発とは、単に法律を守る以上の意味を持ちます。
それは、多様なユーザーの状況に共感し、誰もが快適に利用できる体験を設計するという、品質へのコミットメントです。
ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、この目標を達成するための国際的な基準であり、その核心として4つの主要な原則を定めています。
- Perceivable(知覚できること)
- Operable(操作できること)
- Understandable(理解できること)
- Robust(堅牢であること)
これらの原則は、頭文字をとって POUR(ポア) と呼ばれます。
1. Perceivable(知覚できること)
【要点】ユーザーは、提示されている情報を五感で認識できなければならない。
インターフェース上の情報やコンポーネントは、ユーザーが認識できる方法で提示されている必要があります。視覚や聴覚などに障害があっても、情報そのものが伝わらなければ始まりません。
- テキスト以外のコンテンツには、代替となるテキストを提供する。
- 画像やアイコン、グラフなど、視覚で認識する情報には、その内容を説明する代替テキスト(
alt
属性など)を設定し、スクリーンリーダー(画面読み上げソフト)が正しく読み上げられるようにします。
- 画像やアイコン、グラフなど、視覚で認識する情報には、その内容を説明する代替テキスト(
- 時間ベースのメディア(動画・音声)には代替手段を提供する。
- 動画には、聴覚障害のあるユーザーや音を出せない環境のユーザーのために、内容と同期したキャプション(字幕)や、会話内容をまとめたトランスクリプト(文字起こし)を用意します。
- 情報や構造を損なわずに、多様な方法で提示できるコンテンツを作成する。
- スクリーンリーダーなどの支援技術が正しく内容を解釈できるよう、HTMLを意味的に正しくマークアップします。(例:見出しには
<h1>
,<h2>
、段落には<p>
、リストには<ul>
,<ol>
を使う)
- スクリーンリーダーなどの支援技術が正しく内容を解釈できるよう、HTMLを意味的に正しくマークアップします。(例:見出しには
- 前景(文字など)と背景を、ユーザーが区別しやすくする。
- 背景色と文字色のコントラスト比を十分に確保し、誰もが見やすい配色を心がけます。また、ユーザーが文字サイズを自由に変更できるように設計することも重要です。
2. Operable(操作できること)
【要点】ユーザーは、インターフェースをスムーズに操作できなけれ ばならない。
ナビゲーションを含め、すべてのインタラクティブなコンポーネントは、あらゆるユーザーが操作可能である必要があります。例えば、マウスが使えないユーザーがいることを前提に設計しなければなりません。
- すべての機能をキーボードのみで利用できるようにする。
- マウスを使わなくても、Tabキーによる移動やEnterキーによる決定など、キーボード操作だけですべての機能(リンク、ボタン、フォームなど)が完結するようにします。
- コンテンツを読み、利用するために十分な時間をユーザーに与える。
- 自動で切り替わるカルーセル(スライドショー)や、時間制限のあるセッションなどは、ユーザーが一時停止、停止、または時間を延長できる手段を提供します。
- 発作や身体的な反応を引き起こす可能性のあるコンテンツを設計しない。
- 1秒間に3回以上激しく点滅するコンテンツは、光過敏性発作を誘発する危険があるため、絶対に使用してはいけません。
- ユーザーがサイト内を移動し、目的のコンテンツを見つけ、現在地を把握するのを助ける手段を提供する。
- 「パンくずリスト」を設置したり、現在フォーカスされている要素(Tabキーで選択中のボタンなど)が視覚的に明確にわかるようにスタイル(枠線など)を付けたりします。