はじめに
この記事を開いていただきありがとうございます。
最近「アクセシビリティ対応って大事だよね」と耳にすること、増えていませんか？
でも、「WCAGってよく聞くけど、何のこと？」とか、「どうやって対応すればいいの？」と感じる方も多いはず。この記事では、アクセシビリティの国際基準「WCAG」について紹介します。
デザイナーやディレクター、エンジニア、アクセシビリティに関心がある方に読んでほしい内容です！
🗂 目次
WCAGって何？
WCAGとは、「Web Content Accessibility Guidelines」の略で、すべての人がWebを使えるようにするための国際的なルールです。
視覚・聴覚・身体に障害のある人、認知の特性がある人、高齢者など――
いろんな人がインターネットを使う時代だからこそ、誰にとっても使いやすいWebサイトを作ることが大切になっています。
このWCAGは、そんなアクセシブルなWebを実現するための“道しるべ”のような存在です。
WCAGの4つの原則（POUR）
WCAGには「こういうふうに考えてWebをつくろうね！」という4つの原則があります。
1. 知覚できる（Perceivable）
→ 情報がちゃんと目や耳などを通してユーザーに伝わること。
例：
- 画像に「この画像は〇〇の写真です」といった説明（代替テキスト）をつける
- 音声だけではなく字幕を用意する
2. 操作できる（Operable）
→ マウスでなくても、キーボードや支援機器で操作できること。
例：
- タブキーで移動できるようにする
- 動きのあるコンテンツに「一時停止」や「スキップ」のボタンをつける
3. 理解できる（Understandable）
→ 表示される内容や動きがわかりやすいこと。
例：
- フォームのエラーが「ここが間違ってますよ」と丁寧に教えてくれる
- ボタンに「送信」と書かれていて、何に続く操作のボタンかがわかる
4. 信頼できる（Robust）
→ どんな端末や支援技術でもちゃんと情報が読み取れること。
例：
- HTMLのタグを正しく使うことで、スクリーンリーダーユーザーでも理解できる
- 新しいブラウザやアプリでも動作する設計にしておく
WCAGの3つの達成レベル
WCAGには、「どこまで対応できてるか？」という達成レベルが3段階に分かれています。
| レベル | 内容 | よくある目標 |
|---|---|---|
| A | 最低限のレベル | まずここをクリアしよう |
| AA | 実用的なレベル | 多くの企業がここを目指す |
| AAA | 完璧なレベル | できたらすごい！でも難しい… |
💡 ちょっとした例で考えてみよう
例1：画像だけの「送信」ボタン
- ✖︎ 問題：視覚に障害のある方は、何のボタンかわからない
- 〇 解決：画像に「送信ボタン」と説明をつけておく
例2：「エラーです」とだけ表示されるフォーム
- ✖︎ 問題：どこがダメなのかわからない
- 〇 解決：「メールアドレスの形式が正しくありません」と具体的に伝える
例3：色だけで判断させるグラフ
- ✖︎ 問題：「赤はNG、緑はOK」だけだと色の違いがわからない人には伝わらない
- 〇 解決：テキストやアイコンも一緒に表示する
WCAGに取り組むには？
「難しそう…」と思うかもしれませんが、ちょっとした気配りの積み重ねでぐっとアクセシビリティは良くなります。
できることから始めよう！
- デザインの段階で「これは誰にとってわかりやすいかな？」と考える
- 専門ツール（WAVE、Lighthouseなど）で自動チェックしてみる
- 実際にスクリーンリーダーで自分のサイトを聞いてみるのもおすすめです
最後に
ここまで読んでいただきありがとうございました！
WCAGは「すべての人がWebを使えるようにする」ための道しるべ。
難しいコードを書かなくても、ちょっとした気づきや工夫でアクセシビリティはぐっと良くなります。
「誰かのための対応」ではなく、みんなのためのWebづくりを、一緒に目指してみませんか？✨
🔗 参考リンク
- WCAG公式サイト（英語）
- みんなの公共サイト運用ガイドライン（総務省