用語解説

WCAGとは?Webアクセシビリティの国際ガイドラインの基礎

高齢者や障害のある人を含め、誰もが使えるWebをつくるには、対応できているかを判断できる共通のものさしが必要です。WCAGは、その基準を国際的にまとめたガイドラインです。この記事では、WCAGの4つの原則とA・AA・AAAの達成基準、身近な対応例の考え方をやさしく整理します。

WCAGとは

WCAG(ダブリュー・シー・エー・ジー)は、Web Content Accessibility Guidelinesの略で、Webコンテンツをより多くの人が利用できるようにするための国際的なガイドラインです。W3Cという標準化団体がまとめています。

このガイドラインは、視覚・聴覚・身体・認知などさまざまな状況の人がWebを使えるよう、満たすべき条件を具体的に示しています。各国のアクセシビリティ方針の土台としても参照されています。

WCAGは抽象的な理念にとどまらず、検証できる達成基準として定義されている点が特徴です。これにより、対応できているかどうかを客観的に確認できます。

4つの原則(POUR)

WCAGは4つの原則の上に成り立っています。それぞれの頭文字をとってPOURと呼ばれます。これらは「コンテンツがどうあるべきか」の大きな柱です。

細かな達成基準もすべて、この4つの原則のいずれかに結び付いています。まずこの4本柱を押さえておくと、個々の基準の意図も理解しやすくなります。

  • 知覚可能(Perceivable):情報やUIを利用者が知覚できること。画像の代替テキストや字幕など
  • 操作可能(Operable):キーボードなどで操作できること。時間制限の配慮なども含む
  • 理解可能(Understandable):内容や操作が理解しやすいこと。読みやすさや一貫性
  • 堅牢(Robust):さまざまな環境や支援技術で正しく解釈できること

実務ではどこで関係する?

WCAGは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

WCAGについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

  • 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
  • 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
  • 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
  • 運用の話: 期限、差し替え、削除、共有メッセージまで決める

達成基準とレベルA・AA・AAA

WCAGには、原則をより具体的にした達成基準が定められています。各達成基準には適合レベルがあり、A(最低限)、AA(標準的に求められる水準)、AAA(より高い水準)の3段階に分かれます。

一般に、多くのサイトはAAを目標とすることが多いです。Aは満たさないと利用に大きな支障が出る基本的な項目、AAAはすべてのコンテンツで満たすのが難しい高度な項目を含みます。

レベルは積み上げ式で、AAを満たすにはAの基準も満たしている必要があります。自分のサイトがどのレベルを目指すかを最初に決めると、取り組みの優先順位を付けやすくなります。

身近な対応例

WCAGへの対応は難しく聞こえますが、身近な工夫の積み重ねです。たとえば画像に内容を説明する代替テキストを付ける、文字と背景に十分なコントラストを確保する、リンクの文言を分かりやすくするといったことが該当します。

キーボードだけで操作を完結できるようにする、動画に字幕を付ける、フォームの入力項目にラベルを付けるなども代表的な対応です。これらは特定の人だけでなく、すべての利用者にとっての使いやすさにつながります。

完璧をいきなり目指すより、影響の大きい項目から少しずつ改善していく姿勢が現実的です。

対応を進める手順

WCAGへの対応は、やみくもに始めるより順序立てて進めるほうが効率的です。次のような流れで取り組むと、優先順位を付けながら無理なく改善できます。

はじめから完璧を目指すのではなく、影響の大きい項目から段階的に進めるのが現実的です。少しずつでも継続することで、着実に水準を高められます。

  1. 目指す適合レベル(多くの場合はAA)を最初に決める
  2. そのレベルに対応する達成基準の一覧を確認する
  3. 代替テキストやコントラストなど、影響の大きい項目から点検する
  4. 見つかった問題を、利用への支障が大きいものから順に修正する
  5. キーボード操作やスクリーンリーダーで実際に使えるか検証する
  6. 改善後も定期的に見直し、新しいページにも同じ基準を適用する

まとめと確認の進め方

WCAGは、誰もが使えるWebを目指すための共通の基準です。4原則を意識し、目標とするレベルを決め、身近な改善から取り組むことで、着実にアクセシビリティを高められます。

改善したページを関係者と共有してレビューしたいときは、ギガサイト便でHTMLやZIPをドロップして共有URLを発行できます。認証方式を選べるため、社内の確認段階では会社ドメイン認証やパスワードを併用し、関係者だけに見せながら検証を進めることもできます。

よくある質問

WCAGは法律ですか?

WCAG自体はW3Cがまとめたガイドラインで、それ単体が法律というわけではありません。ただし各国のアクセシビリティに関する方針や規定の土台として広く参照されています。

どのレベルを目指せばよいですか?

多くのサイトはAAを目標とすることが多いです。Aは利用に支障が出る基本項目、AAAは満たすのが難しい高度な項目を含むため、まずAを確実に満たし、AAを目指すのが現実的です。

POURとは何の略ですか?

WCAGの4原則である知覚可能(Perceivable)、操作可能(Operable)、理解可能(Understandable)、堅牢(Robust)の頭文字を並べた呼び方です。

小さなサイトでもWCAGに対応する意味はありますか?

あります。代替テキストや十分なコントラストなどの対応は、障害のある人だけでなくすべての利用者の使いやすさを高めます。規模に関係なく取り組む価値があります。

実務ではどこで関係する?はHTML共有で必ず理解しておく必要がありますか?

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

関連記事

用語解説

Flexboxとは?要素を横並び・縦並びに整えるCSSの基礎

ボタンやメニューを横に並べたいのにうまくいかないと感じているCSSの初心者へ。Flexboxの考え方と主要なプロパティの使い方を、縦・横の整列が思い通りになるよう基礎からシンプルに説明します。

4分で読める
用語解説

CSSセレクタとは?要素を狙ってスタイルを当てる基礎

狙った要素だけにスタイルを当てたいCSSの初学者へ。タグ・クラス・IDをどう書き分けるか、複数条件を組み合わせる方法、詳細度で優先順位が決まる仕組みを、実装でつまずかないよう基礎から順に解説します。

5分で読める
用語解説

ボックスモデルとは?余白・枠・幅の関係をやさしく解説

余白を設定したのに幅がずれる、枠を付けたらレイアウトが崩れた、という悩みを持つ方へ。ボックスモデルの四層構造を正しく把握することで、CSSのサイズ計算に自信を持って向き合えるようになります。

5分で読める
「用語解説」の記事をもっと見る →