WCAG備忘録：WCAGとは

はじめに

ここでは「 WCAG とは何か？」という基礎の段階から、下記について取り扱っていきます。

• WCAG の概要
  • 正式な名称、作成機関、経緯 など
  • 特徴について（＋ 何故、初心者が難しく感じるか）
  • 利用状況について
• WCAG 構成について
  • 原則、ガイドライン、達成項目
  • 関連文書（解説書、事例集 など）

本記事は備忘録という立場を取っています、情報の精度は保証できない旨をご了承ください。

間違い等も考えられますので、参考にしたソース等は載せるようにしております。可能であれば、そちらをご参照ください。

記事内にある表の「要約」欄は、そこでの内容を私が要約したものです。

説明を優先した都合上、私が解釈した内容を噛み砕いた形になっているため、情報精度は保証できない旨をご承知の上で お読みください。

WCAG の概要

WCAG とは

WCAG（Web Contents Accessibility Guidelines）とは、端的に言うと Web アクセシビリティに関するガイドライン集です。

Web コンテンツを対象にし、障害を抱えた方がアクセスできるようにするためにはどうあるべきかを規定したものになります。

WCAG の読み方（発音）については、『「WCAG」の発音は？ | ウェブアクセシビリティ基盤委員会（WAIC）』に記載があります。

私個人はオンラインで参加した講師の発音に倣って「ウィーキャグ」と読んでいます。

作成機関

WCAG は W3C 勧告として公開されたものであり、策定は WAI という組織が行っています。

W3C（World Wide Web Consortium）は、Web に関するシステムを標準化する国際的な団体です。WAI（Web Accessibility Initiative） は その内部にある組織で、障害を持つ方の Web アクセシビリティ向上を目的としています。

Webアクセシビリティとは

WAI の定義によると、Web アクセシビリティとはWeb サイトやツールや技術が、障害を持った人々が使えるように設計開発されていることを意味します。

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

『Introduction to Web Accessibility | WAI』より一部抜粋

これまでの経緯

WCAG はバージョン管理されています。現在（2025年3月）、WCAG1 は WCAG2 に置き換えられ（≒ 廃止）、WCAG3 は草案の段階となっています。

WCAG2 に関しては、下位互換のための番号が 2.1, 2.2 の形で割り振られています。現在における最新バージョンは、2.2 となり、これはベースとなる 2.0 から現状に合わせる形で項目を増減させたものになります。

バージョン	勧告年	備考
WCAG1.0	1999	14個のガイドライン ＋ 65個のチェックポイント（各チェックポイントには 3段階の優先度が割り振られている）。2021年5月に廃止
WCAG2.0	2008	12個のガイドライン ＋ 61個の達成基準（各達成基準には 3段階の達成レベルが割り振られている）。ガイドラインの上位に、4つの原則が設けられた
WCAG2.1	2018	WCAG2.0 の下位互換で、17個の達成基準を追加
WCAG2.2	2023	WCAG2.1 の下位互換で、9個の達成基準を追加。また、有用でなくなった 1個の達成基準を削除
WCAG3.0	草案段階	記事作成時点では 2024年12月のワーキングドラフトが最新

WCAG の特徴

WCAG は、障害を抱える人がウェブコンテンツにアクセスできるようするためのガイドライン集です。個人的な意見ではありますが、WCAG はその目的を達成するために下記の特徴を持っていると考えています。

• 文書を構造化することで、相反する視点を両立させる
• 差異が生まれないようするための標準化
• 多様なケースに現実的な対応ができるよう、コンテンツ製作者とユーザーエージェントとで役割分担

一方で、下記のような 初心者にとって WCAG が難しく感じる原因 も、ここにあると考えています。

• 複数の文書に跨っていて混乱する
• 抽象的だったり、難しい用語を使っていたりで、何を言ってるのか分かりづらい

構造化された文書

WCAG の構成についての詳細は 後半 に記述しているため、ここではその概要について説明します。

WCAG 2.0 は ISO/IEC 40500:2012 の一致規格^[1]であり、国際的な影響力を持っていると言えます。そのため頻繁に更新することや、番号を入れ替えたりすることは望ましくありません。

そのため WCAG 本体は、頻繁な改定更新は行わず、時代の変化に影響を受けない 硬性的なものである必要があります。故に記されている内容としては抽象的な表現が多く、具体的な技術についての言及は ほとんどありません。

一方でウェブに関する技術は日進月歩で進んでいます。例えば WCAG 1.0 が策定された 1999 年には、下記の事象のことを想定することは難しかったかもしれません。

• 物理的な技術革新
  • スマートフォンの急速な普及^[2]
  • 回線速度の向上で大量のデータをリアルタイムでやり取り可能に
  • 各種デバイスのスペック向上と低価格化
  • VR など新たな技術の台頭
• ウェブ技術の変化
  • サイト数の急激な増加^[3]
  • 静的ページから 動的でインタラクティブなコンテンツへと移行
  • リッチメディア^[4]による表現
  • 様々なアクセス手段（スマートフォン、タブレット端末、テレビ、ゲーム機、ウェアラブル端末、機械学習のクローリング など）

WCAG 本体が普遍的で抽象的な性質である以上、それを現在の技術に当てはめて規定する必要があります。そこで WCAG 本体とは別に関連文書を設けられており、そちらで具体的な内容について言及するようになっています。

普遍的な指針は WCAG で、具体的な内容は関連文書で という構造にすることで、変化が激しい技術環境と普遍的な視点を両立させることができているのだと私は考えています。

差異が生じないよう標準化

WCAG は国際的な規格であるためからか、言語や文化の差異によって解釈に差が生まれてはならないよう、そこで使われている用語は厳格に規定されています。

例：時間依存メディア

例えば ガイドライン1.2 にある「時間依存メディア」について引用してみます。

ガイドライン 1.2 時間依存メディア:
時間依存メディアには代替コンテンツを提供すること
『WCAG2.0（日本語訳） ガイドライン1.2』より抜粋

W3C原文

Guideline 1.2 Time-based Media:
Provide alternatives for time-based media.
『WCAG 2.0 Guideline 1.2』より抜粋

時間依存メディアとは時間の経過によって変化する、言ってしまえば音声や映像などのコンテンツを指しています。ですが、ここでわかりやすく「音声や映像」と明記していない理由は、恐らく今後新しい表現が登場した場合の対応を想定してなのかと考えています。

時間依存メディアといっても、その定義によると、下記のようになっています。

1. 音声または映像
2. 両者を組み合わせたもの（≒ 同期したメディア）
3. 1 番または 2 番にインタラクティブな要素を加えたもの

3番に関しては、例えば Youtube などで見られる「再生している動画の中に、別動画やユーザーページへのリンクを付与して閲覧者を誘導」を想像してもらえるとわかりやすいかもしれません。

これも言ってしまえば「時間に依存したメディアコンテンツ」であるため、「音声や映像」と定義を制限してしまっていた場合は別途項目を設ける必要があったのかもしれません。

ストリーミングや VR など新たな技術が台頭してくる中で、将来に渡って普遍的に運用ができるようにするためには抽象的な表現が必要です。その一方で、そうした表現に解釈の差が生じないよう定義する必要があるため、初心者には分かりづらい表現になってしまいがちなのかと考えられます。

テストによる検証が可能

ガイドラインを満たせたかどうかを判定するために、その検証には具体的で数値化された基準が用いられます。

例えば ガイドライン 2.3 は、脳に負担をかけ発作を引き起こすようなビカビカした閃光表現は使わないことを規定しています。ただしそうした表現には個人差があるため、WCAG は その定義に数値化された基準を用いています。

• コントラスト比や彩度を用いた閃光の定義
• 秒間あたりの閃光回数
• 画面内の閃光領域（定義には立体角を使用）

https://waic.jp/translations/UNDERSTANDING-WCAG20/seizure-does-not-violate.html

コンテンツ製作者の役割

昨今のウェブに関する状況は複雑化しており、コンテンツ製作者がそれら全てを考慮することは不可能に近いです。WCAG はアクセシブルであることを確保するために、コンテンツ製作者が各障害を想定した設計をするのでなく、支援技術を含むユーザーエージェントを有効に使うために、マシンリーダブル（機械による判読が可能であること）であることが主眼に置かれています。

支援技術とは

支援技術とは、障害を持つ方がウェブコンテンツを閲覧する際に利用する技術を指します。

• スクリーンリーダー
• 点字出力用のブラウザ及び点字ディスプレイ
• トラックボールやジョイスティック

ユーザーエージェントは、ユーザーがウェブコンテンツを閲覧するために使うソフトウェア（コンテンツの解釈 及び レンダリング を担当）の総称となります。この中に 先程の支援技術や、健常者も利用するブラウザ等も含まれています。

多岐にわたる障害

障害と一言に言っても、その内容は多岐に渡ります。

身体的なものだと、視覚や聴覚といった体の機能ごとに別れてきます。更にその中でも分化し、例えば視覚の場合は「視力」「視野」「色覚」「光覚」などがあります。

そしてそれら障害に対応するための支援技術も様々なアプローチになってきます。スクリーンリーダーを使う場合もあれば、拡大鏡やズーム機能で閲覧できる人もいますし、場合によっては点字ディスプレイで読み取るケースもありえます。

上記は視覚に絞った話になりましたが、それだけでも様々なアプローチが必要なことがわかります。実際には他の身体的な障害の話や、脳機能が原因とされる障害（精神障害、知的障害、発達障害など）も含まれてきます。更にそれぞれ障害にも軽重があり、複数の障害を併発したりと、状況は人によって変わってきます。

多様な利用環境

さらに利用する環境も多岐に渡ります。

• 利用する機器
  • 利用するブラウザ（Chrome, Edge, Safari だけでなく、支援技術を使った専用ブラウザも）
  • デバイス（デスクトップ、ノート、スマートフォンなど）
  • OS（Apple系, Windows, Androidなど Linux系 など）
• 利用環境
  • 操作方法（マウス、キーボード、タップ、音声認識 など）
  • 通信環境（速度やデータ量など）
  • 場所（室内、屋外など）

これらを上述した障害と組み合わせて考えると、想定するケースは指数関数的に膨れ上がってしまいます。それら全てのケースを個別に想定・設計・検証するというやり方は不可能に近いです。

そのため こうした複雑性を縮減し、多様な状況に対応できるためのアプローチが必要となってきます。

多様な状況に対応するためのアプローチ

全てのウェブコンテンツ製作者が それぞれの支援技術に精通することは難しいでしょう。そのため WCAG では支援技術とコンテンツ製作者とで役割を分けたアプローチを行っているようです。

言ってしまえば、支援技術の役割を「障害を持ったユーザーに情報を伝えること」とする一方で、コンテンツ製作者の役割を「支援技術が情報を解釈できるよう マシンリーダブルにすること」とし、お互いの役割を分けているイメージでしょうか。

このようにすることで、それぞれの障害に対応した専用の設計を必要とせず、ある程度共通した形で複数の障害に対応できるコンテンツ作りが可能となります。

利用状況

WCAG は国際的なガイドラインですが、それを全ての国や地域で統一的に運用することは難しいと考えられます。そこには言語や文化の違いがあり、経済や技術水準で差異があるためです。

そのため WCAG は、各国 各地域の（法規等含めた）事情に応じ、それぞれで運用することを許容しています。

海外（欧州、米国）と日本に関しては、下記にて記事を公開しておりますので、合わせて参照いただければと思います。

https://zenn.dev/nonaka101/articles/lerning-wcag_international-standing

https://zenn.dev/nonaka101/articles/learning-wcag_jis-x-8341-3

WCAG 構成について

WCAG は「普遍的な指針」と「具体的な内容」とで文書を分けているという話を、本記事の前半にて説明しました。
ここからは WCAG の構成について、もう少し詳しく見ていきます。

WCAG本体と関連文書

WCAG は、その本体と 補足するための関連文書で構成されています。

WCAG といった場合、そこには関連文書含めた表現であることもあるため、WCAG 本体を狭義、関連文書含めた全体を広義の WCAG と考えています。

文書構成（イメージ）

WCAG（広義）
├─ WCAG本体（狭義）
└─ 関連文書
　   ├─ クイックリファレンス
　   ├─ 解説書
　   ├─ 達成方法集
　   └─ ...

関連文書には、例えば下表が含まれています

文書名	内容
達成方法集（Techniques）	実装のための事例集。HTMLやCSS、サーバーサイドといった手段別の事例集の他にも、よくある失敗集が掲載されている
解説書（Understanding）	実装を支援するための解説書。達成基準の意図やメリット、どのように取り組めばいいかを具体的な用語を使って説明している
クイックリファレンス（Quick Reference）	文字通りのクイックリファレンス、ガイドライン要件や達成方法がまとまった状態になっており、またフィルタリングによるカスタマイズも可能

他にも WAI のページ によると、ACT ルール^[5]に関するものや、WCAG の内容を超えて よりアクセシブルにするための補足ガイダンス（Supplemental Guidance）などがあるようです。

WCAG本体の構造

WCAG 自体は 1 つの文書ではありますが、その構成は複雑です。大枠としての構造は、下表のようになっています。

項目名	要約
総則	文書としての概要説明
原則	どうすればアクセシブルになるか
適合	サイトがガイドラインに適合していることをどう表明するか
付随書	用語集、謝辞、参考文献など

「原則」に関しては、アクセシブルであるための 4 つの項目が設けられており、それぞれの頭文字をとって POUR とも呼ばれています。

原則名	要約
知覚可能（ Perceivable ）	情報を見つけられるようにしなければならない
操作可能（ Operable ）	操作できるようにしなければならない
理解可能（ Understandable ）	内容や操作方法を理解できるようにしなければならない
堅牢（ Robust ）	設計がしっかりとした状態でなければならない

これら原則の下に「どうあれば その原則が満たせるか」を列挙したガイドラインがあり、さらにその下に「何をもってガイドラインを満たしたとするか」を規定した達成基準があります。

これらをまとめると、下図のようになります。

WCAGの構成（イメージ）

WCAG（広義）
├─ WCAG本体（狭義）
│   ├─ 総則
│   ├─ 原則（POUR）
│   │   └─ ガイドライン
│   │         └─ 達成基準
│   ├─ 適合
│   └─ 付随書
└─ 関連文書
　   └─ ...

各ガイドライン

ここでは WCAG 2.0 の各ガイドラインについて、要約と一緒に掲載しています。

1. 知覚可能

番号	概要	要約
1.1	テキストによる代替	テキスト情報がないコンテンツ（画像など）には、代替となるテキストを入れましょう
1.2	時間依存メディア	音声や動画には、それが利用できない人 用に代替となる情報を入れましょう
1.3	適応可能	コンテンツを構造化し、人や機械にとって理解しやすい状態にしましょう
1.4	判別可能	背景色や音などで閲覧が妨げられないよう、コンテンツは知覚しやすい状態にしましょう

2. 操作可能

番号	概要	要約
2.1	キーボード操作可能	キーボード単体で、マウスやタップ操作と同等のことができるようにしましょう
2.2	十分な時間	時間制限のあるものは、操作に時間がかかる利用者のことを想定しましょう
2.3	発作の防止	脳に負担をかけるビカビカした閃光は使わないようしましょう
2.4	ナビゲーション可能	構造化した文章での重要な要素には、アクセスしやすいようにしておきましょう

3. 理解可能

番号	概要	要約
3.1	読みやすさ	文章は わかりやすいように書きましょう
3.2	予測可能	利用者が考える挙動から外れないようにしましょう
3.3	入力支援	入力の際、それが何で どうすればいいかわかるようにしましょう

4. 堅牢

番号	概要	要約
4.1	互換性	様々な支援技術が将来に渡って利用できるよう、しっかりとした設計にしましょう

まとめ

本記事では、WCAG についての概要を説明しました。

参考文献

WCAG 関係

https://waic.jp/translations/WCAG20/

https://www.w3.org/TR/WCAG20/

その他

https://www.w3.org/WAI/

https://waic.jp/

https://www.zakon.org/robert/internet/timeline/

https://www.nict.go.jp/info-barrierfree/glossary/handicap.html

https://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html

脚注

1. 一致規格：WCAG2.0 の内容と ISO/IEC 40500:2012 の内容が一致していることを指します。例えば JIS X8341-3:2016 は ISO/IEC 40500:2012 の一致規格となっており、グローバル企業にとって 各国の規格の差異を管理する必要が減るというメリットがあります。

2. スマートフォンの普及：日本での普及が始まったのは 2008 年頃、日本での初代 iPhone となる 3G が登場したあたりと言われています。保有率は『通信利用動向調査 | 総務省 情報通信統計データベース』によると、2010年では 9.7% だったものが 3年後には 62.6% へと急上昇し、2023年では 90.6% となっています。

3. サイト数の増加：『Hobbes' Internet Timeline』によると、1997年ごろからウェブサイトの数が急激に増えていることがわかります。

4. リッチメディア：音声や動画を指します。それまでのテキスト中心だったコンテンツに対し、リッチメディアは複雑で臨場感ある情報を伝えることを容易にしました。情動の部分に訴えかけやすいという特徴から、広告含め多様な場面で利用されるようになっています。

5. ACTルール：Accessibility Conformance Testing の略、WCAG 適合の手動/自動によるテストを行うためのガイダンス