はじめての WCAG 2.2 図と具体例で学ぶ解説書

ACCESSIBILITY, ONE EXAMPLE AT A TIME.

誰かの「困った」を、
わかることから。

WCAG（Web Content Accessibility Guidelines）は、より多くの人がウェブの情報や機能を利用できるようにするためのガイドラインです。特に、障害のある人の利用を妨げる問題への対応を示しています。文字・画像・動画や、ボタン・入力フォームなどが対象です。W3CによるWCAGの概要

その対応は、けがで一時的にマウスを使えない人や、明るい屋外で画面が見えづらい人などにも役立ちます。アクセシビリティが役立つさまざまな場面

この解説書ではWCAG 2.2を取り上げ、身近な画面の例から、必要な配慮をひとつずつ学びます。ウェブ制作やアクセシビリティの予備知識は必要ありません。

この解説書の読み方

  1. 概要をつかむ 何をするための基準かを、短い言葉で。
  2. 困る場面を知る 誰が、どんな操作で困るのかを具体的に。
  3. 改善を比べる 同じ画面をどう直し、何ができるようになるか。

初めて読む方は基礎説明に目を通してから、気になる具体例を選んでください。各解説は1項目ずつ読める構成です。

具体例から読む

少しずつ、解説を増やしています。

現在読めるのは86項目です。試作版は、説明と図のわかりやすさを確認している段階です。

読む前に知っておきたいこと

4つの原則

WCAGの達成基準は次の4つの原則に分けられています。

原則 目指すことと身近な例
1. 知覚可能 情報を受け取れること。動画の音声が聞こえなくても、字幕で会話の内容がわかる。
2. 操作可能 機能を操作できること。マウスを使わず、キーボードで申込ボタンを押せる。
3. 理解可能 情報の意味や操作方法がわかること。入力に誤りがあるとき、直す項目と誤りの内容がわかる。
4. 堅牢 ブラウザーや支援技術が情報を正しく扱えること。音声でページを読むソフトにも、ボタンの名前や役割が伝わる。

「支援技術」は障害のある人の情報の取得や操作を助けるソフトや機器のことです。画面を拡大するソフトなども含まれます。W3Cによるアクセシビリティの原則、ウェブを使うための道具や工夫

達成基準とは？

「色だけで意味を伝えない」のような、満たしているかを確認できる条件です。各解説には番号と正式名称を載せています。例えば「1.4.1 色の使用」は色の使い方に関する達成基準を指します。WCAGの構成

A・AA・AAAとは？

達成基準には、A・AA・AAAのレベルがあります。目指す適合レベルによって、満たす基準の範囲が変わります。

適合レベル 満たす達成基準
A Aのすべて
AA AとAAのすべて
AAA A・AA・AAAのすべて

表は対象ページ自体で達成基準を満たす場合を示しています。条件を満たす代替版を提供する方法もあります。適合にはページ全体を対象にすることなど、ほかの条件もあります。WCAG 2.2の適合要件

レベルは実装の難易度を示すものではありません。また、内容によってはAAAの全基準を満たせないため、W3Cはサイト全体にAAA適合を一律に求める方針を推奨していません。適合レベルの説明

キーボード操作とフォーカス

キーボードでは通常、Tabキーで次のリンクやボタンへ、Shift＋Tabキーで前へ移ります。このとき、キー操作の対象になっている場所を「フォーカス」といいます。ボタンを囲む枠などで、今いる場所を確かめられます。

ボタンは通常、EnterキーやSpaceキーで押せます。選択肢の中では矢印キーを使うなど、操作する部品によって使うキーが変わります。OSやブラウザーの設定によっても動作は異なります。W3Cのキーボード操作ガイド

スクリーンリーダー

ページの文章や、ボタンの名前・役割などを、音声や点字で伝えるソフトです。画面を見ることが難しい人などが利用します。見出しやボタンが適切に作られていると、内容を探したり操作したりしやすくなります。スクリーンリーダーなどの説明

各解説の「達成するための改善例」は、その基準と場面についての例です。ページやサイト全体の適合を判断するときは、WCAG 2.2本体と各解説の参照資料で、正式な要件や適合条件を確認してください。

用語と補足