WCAG(Web Content Accessibility Guidelines)とは?
Webサイト開発をしていると、アクセシビリティについて気にしないといけないことが増えてくる。
その中で観点として意識できていなかった**WCAG(Web Content Accessibility Guidelines)**について今回はまとめる。
WCAGとは?
WCAG(Web Content Accessibility Guidelines)は、Webコンテンツを誰でも利用しやすくするためのガイドラインである。
高齢者や障害のある方だけではなく、一時的にマウスが使えない人や、スマートフォンで閲覧している人など、さまざまな利用者が快適にWebサイトを利用できることを目的としている。
WCAGは以下の4つの原則(POUR)で構成されている。
- 知覚可能(Perceivable)
利用者が情報を認識できる状態にすること。
例
- 画像には代替テキスト(alt)を設定する
- 文字と背景のコントラストを十分に確保する
- 操作可能(Operable)
利用者がWebサイトを操作できる状態にすること。
例
- キーボードのみで操作できる
- 制限時間がある場合は延長できる
- 理解可能(Understandable)
利用者が内容や操作方法を理解できること。
例
- わかりやすい文章で記載する
- 入力エラーの内容や解決方法を表示する
- 堅牢(Robust)
さまざまなブラウザや支援技術でも利用できること。
例
- HTMLを正しく記述する
- スクリーンリーダーで読み取れるマークアップを行う
適合レベルって?
WCAGには達成レベルが3段階存在する。
| レベル | 内容 |
|---|---|
| A | 最低限満たすべき要件 |
| AA | 一般的に目標となるレベル |
| AAA | 非常に高いアクセシビリティを実現するレベル |
実際のWebサイトではAAレベルを目標とするケースが多いみたい。
WCAGの利点は何なのか?
- より多くの人が利用できるサイトになる
障害の有無に関係なく、多くの利用者が快適にWebサイトを利用できるようになる。
- ユーザー体験(UX)が向上する
アクセシビリティ向上のための改善は、結果としてすべての利用者にとって使いやすいサイトにつながる。
例えば、
- ボタンが押しやすい
- 見出し構造が分かりやすい
- エラー内容が理解しやすい
といった改善は、アクセシビリティだけではなくUX向上にもつながる。
- SEOにも良い影響がある
適切なHTML構造や画像の代替テキストは、検索エンジンがページ内容を理解しやすくなるため、SEOにも良い影響を与えることがある。(明示はされていなさそうだった)
WCAGは対応しないとダメ?
すべてのWebサイトでWCAGへの対応が義務付けられているわけではない。
ただし、官公庁や自治体、多くの大企業では、WCAGを基準としたアクセシビリティ対応が行われているのが現状。
WCAGは、W3C(World Wide Web Consortium)が策定しているWebアクセシビリティの国際的なガイドラインであり、日本でもJIS X 8341-3の基となっている。
そのため、特に企業サイトや公共機関のWebサイトでは、WCAG AAを目標として設計・実装されることが多い。
また、海外ではアクセシビリティに関する法整備が進んでおり、
グローバルにサービスを展開する企業ではWCAGへの対応が求められるケースが多い。
個人開発や小規模なWebサイトでは必須となることは少ないが、アクセシビリティを考慮したサイトは利用者にとって使いやすく、結果としてユーザー体験(UX)の向上にもつながる。
そのため、必須ではなくても、Web開発を行うのであれば認識しておかないといけない。
ちなみに、もしグローバルなサービスの場合は
アメリカ:ADA
EU:European Accessibility Act
等があるので把握しておく必要あり。
WCAGの注意点
WCAGは、チェック項目を満たせば終わりというものではない。
例えば色のコントラストを満たしていても、実際には読みにくかったり、操作しづらかったりする場合がある(実体験)。
そのため、ガイドラインを満たすことだけではなく、実際の利用者が使いやすいかどうかを意識して設計・実装することが重要。
また、WCAGは定期的に改訂されており、2026年7月現在はWCAG 2.2が公開されている。
案件によって対象バージョンや適合レベルが異なるため、WCAG順守の様な依頼があるなら事前に確認しておいた方がよさげ
まとめ
WCAGは、誰もが利用しやすいWebサイトを作るためのガイドライン。
基本となる考え方は以下の4つ。
- 知覚可能(Perceivable)
- 操作可能(Operable)
- 理解可能(Understandable)
- 堅牢(Robust)
アクセシビリティというと障害者向けの対応というイメージを持ちやすいが、実際にはすべての利用者にとって使いやすいWebサイトを作るための考え方でもある。
個人的にはAAレベルを目標としておけば、最低限イケてるサイトが作れそう。