【ダブリューシーエージー】

WCAG(ウェブコンテンツ・アクセシビリティガイドライン) とは?

最終更新:
💡 Webの「バリアフリー基準書」、全員が使えるネットを目指す世界共通ルール

Webサイトやアプリを障害のある人も含めて誰でも使えるようにするための国際的なガイドライン。W3Cが策定し、多くの国の法制度や規格でも参照されている。

📌 このページのポイント
WCAG:4原則と適合レベル P 知覚可能 情報を受け取れる O 操作可能 キーボードでも操作 U 理解可能 内容・操作が分かる R 堅牢 支援技術でも解釈 Tab ↵ <button> 各達成基準には A・AA・AAA のレベル A Aの基準を すべて満たす AA AとAAを すべて満たす AAA A・AA・AAAを すべて満たす サイト全体へのAAA一律要求は非推奨
4原則の下に達成基準がある。AA適合にはAとAAのすべての基準を満たす必要がある。
ひよこ ひよこ
WCAGって何のための基準なの?
ペンギン先生 ペンギン先生
Webサイトを目が見えない人、耳が聞こえない人、手が不自由な人など、誰でも使えるようにするための国際ルールだよ。たとえば「画像には代替テキストを付けましょう」とか「色だけで情報を伝えないようにしましょう」みたいな具体的な基準が書かれているんだ
ひよこ ひよこ
A・AA・AAAの3段階ってどう違うの?
ペンギン先生 ペンギン先生
達成基準ごとにレベルが決まっていて、Aの基準を全部満たせば「A適合」、AとAAを全部満たせば「AA適合」になるよ。AAAは最も高いレベルだけど、W3Cは内容によっては満たせない基準があるから、サイト全体にAAAを一律に求めるのは勧めていないんだ。日本では総務省のガイドラインが、公的機関にJIS X 8341-3:2016への対応を勧めているよ
ひよこ ひよこ
4つの原則ってどんなもの?
ペンギン先生 ペンギン先生
「知覚可能」は情報を見たり聞いたりできること、「操作可能」はキーボードだけでも操作できることなど、「理解可能」は内容や操作方法が分かりやすいこと、「堅牢」は支援技術(スクリーンリーダーなど)でも正しく解釈できること。英語の頭文字を取ってPOURとも呼ばれるよ
ひよこ ひよこ
実際にWCAGに対応するのって大変なの?
ペンギン先生 ペンギン先生
正しいHTMLを書く、コントラスト比を確保する、キーボード操作を保証する、代替テキストを付けるといった基本の積み重ねが大事だよ。axeやLighthouseのような自動チェックツールは問題を見つける助けになるけど、W3Cも言うとおりツールだけでは全項目を判定できない。代替テキストの内容が適切かなどは人が確認する必要があるんだ
ひよこ ひよこ
WCAG 2.2で何が変わったの?
ペンギン先生 ペンギン先生
たとえばクリックやタップの対象を原則24×24 CSSピクセル以上にする基準(AA、十分な間隔がある場合などの例外あり)や、複数ページに繰り返し置くヘルプへの導線を同じ順序に置く基準(A)が追加されたよ。次のWCAG 3はまだ作業中の草案で、評価方法も検討中。完成しても当面WCAG 2は廃止されない予定だから、今はWCAG 2.2に合わせるのがW3Cの勧めだよ
もっと詳しく知りたい人へ

WCAG 2.1で対応済みなら、2.2に合わせる必要はある?

W3Cは最新版の利用を勧めているよ。2.2は2.1に9つの達成基準を足し、4.1.1 Parsingを削除した版で、2.2に適合すれば2.1と2.0にも適合する。一方で2.2の公開で2.0や2.1が廃止されたわけではないので、契約や法令がどの版を指定しているかも確認しよう。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「WCAG」って出てきたら「Webを誰でも使えるようにするための世界基準ルールブック」と思えればだいたいOK!
📖 おまけ:英語の意味
「Web Content Accessibility Guidelines」 = ウェブコンテンツ・アクセシビリティ・ガイドライン
💬 W3Cが1999年5月にWCAG 1.0を勧告したのが始まりで、その後2.0、2.1、2.2と改訂されてきたよ

参考資料

← 用語集にもどる