Skip to main content

ウェブアクセシビリティの4つの原則(POUR)

成功する製品とは、障害の有無にかかわらず、すべての人がその価値を享受できるものです。
障害を持つアメリカ人法(ADA)などの法律は、デジタルの世界においても障害を持つ人々のアクセスを保障するよう求めています。

しかし、真にインクルーシブな(誰一人取り残さない)製品開発とは、単に法律を守る以上の意味を持ちます。

それは、多様なユーザーの状況に共感し、誰もが快適に利用できる体験を設計するという、品質へのコミットメントです。

ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、この目標を達成するための国際的な基準であり、その核心として4つの主要な原則を定めています。

  1. Perceivable(知覚できること)
  2. Operable(操作できること)
  3. Understandable(理解できること)
  4. Robust(堅牢であること)

これらの原則は、頭文字をとって POUR(ポア) と呼ばれます。

1. Perceivable(知覚できること)

【要点】ユーザーは、提示されている情報を五感で認識できなければならない。

インターフェース上の情報やコンポーネントは、ユーザーが認識できる方法で提示されている必要があります。視覚や聴覚などに障害があっても、情報そのものが伝わらなければ始まりません。

  • テキスト以外のコンテンツには、代替となるテキストを提供する。
    • 画像やアイコン、グラフなど、視覚で認識する情報には、その内容を説明する代替テキスト(alt属性など)を設定し、スクリーンリーダー(画面読み上げソフト)が正しく読み上げられるようにします。
  • 時間ベースのメディア(動画・音声)には代替手段を提供する。
    • 動画には、聴覚障害のあるユーザーや音を出せない環境のユーザーのために、内容と同期したキャプション(字幕)や、会話内容をまとめたトランスクリプト(文字起こし)を用意します。
  • 情報や構造を損なわずに、多様な方法で提示できるコンテンツを作成する。
    • スクリーンリーダーなどの支援技術が正しく内容を解釈できるよう、HTMLを意味的に正しくマークアップします。(例:見出しには<h1>, <h2>、段落には<p>、リストには<ul>, <ol>を使う)
  • 前景(文字など)と背景を、ユーザーが区別しやすくする。
    • 背景色と文字色のコントラスト比を十分に確保し、誰もが見やすい配色を心がけます。また、ユーザーが文字サイズを自由に変更できるように設計することも重要です。

2. Operable(操作できること)

【要点】ユーザーは、インターフェースをスムーズに操作できなければならない。

ナビゲーションを含め、すべてのインタラクティブなコンポーネントは、あらゆるユーザーが操作可能である必要があります。例えば、マウスが使えないユーザーがいることを前提に設計しなければなりません。

  • すべての機能をキーボードのみで利用できるようにする。
    • マウスを使わなくても、Tabキーによる移動やEnterキーによる決定など、キーボード操作だけですべての機能(リンク、ボタン、フォームなど)が完結するようにします。
  • コンテンツを読み、利用するために十分な時間をユーザーに与える。
    • 自動で切り替わるカルーセル(スライドショー)や、時間制限のあるセッションなどは、ユーザーが一時停止、停止、または時間を延長できる手段を提供します。
  • 発作や身体的な反応を引き起こす可能性のあるコンテンツを設計しない。
    • 1秒間に3回以上激しく点滅するコンテンツは、光過敏性発作を誘発する危険があるため、絶対に使用してはいけません。
  • ユーザーがサイト内を移動し、目的のコンテンツを見つけ、現在地を把握するのを助ける手段を提供する。
    • 「パンくずリスト」を設置したり、現在フォーカスされている要素(Tabキーで選択中のボタンなど)が視覚的に明確にわかるようにスタイル(枠線など)を付けたりします。

3. Understandable(理解できること)

【要点】ユーザーは、情報の内容とUIの操作方法の両方を理解できなければならない。

コンテンツや操作方法は、直感的で分かりやすく、一貫性があり、ユーザーが戸惑うことなく利用できるものでなければなりません。

  • テキストコンテンツを読みやすく、理解しやすいものにする。
    • 専門用語や略語の使用は避け、できるだけ平易な言葉で記述します。ページの主要な言語を設定 (<html lang="ja">) することで、スクリーンリーダーが正しい言語で読み上げられるようにします。
  • ウェブページは、予測可能な方法で表示され、動作するようにする。
    • サイト内のナビゲーションメニューは、どのページでも同じ順序・同じ場所に配置します。また、ユーザーが意図しない限り、勝手に新しいウィンドウが開いたり、ページが再読み込みされたりしないようにします。
  • ユーザーが間違いを回避し、修正するのを助ける。
    • 入力フォームには、どのような情報を入力すべきかを示すラベルやプレースホルダーを明確に記述します。エラーが発生した際には、どの項目で、なぜエラーが起き、どうすれば修正できるのかを具体的に示します。

4. Robust(堅牢であること)

【要点】技術が進化しても、多様な環境で安定して利用できなければならない。

「堅牢性」とは、コンテンツがHTMLなどの標準技術に準拠し、現在および将来登場するであろう様々なブラウザ、支援技術、デバイスでも正しく解釈され、安定して機能し続けることを意味します。

  • 支援技術を含む、現在および将来のさまざまな閲覧環境(ユーザーエージェント)との互換性を最大化する。
    • HTMLの文法ルールに沿ってコーディングすることで、将来新しい技術が登場した際にも、コンテンツが正しく表示・機能する可能性を高めます。(例:開始タグと終了タグを正しく記述する、id属性値の重複を避けるなど)

参考サイト