アクセシビリティ：WCAG・JIS X 8341-3と、誰でも使える画面の基本｜UI・UXデザイン入門 第7回

WCAG：国際的な指針

ウェブのアクセシビリティについて、世界で最も広く参照されているのが、ウェブの標準化団体W3Cが作ったWCAG（Web Content Accessibility Guidelines、ウェブコンテンツ・アクセシビリティ・ガイドライン）です。最新の版はWCAG 2.2で、2024年12月12日付のW3C勧告として公開されています（参考資料2）。

4つの原則

WCAGは、アクセシビリティの土台として、次の4つの原則を掲げています（参考資料2）（図2）。英語の頭文字をとって「POUR」と呼ばれることもあります。

1. 知覚可能（Perceivable）：情報が、利用者が気づける形で示されていること。画像には代わりの文章がある、動画には字幕がある、など。
2. 操作可能（Operable）：画面の部品やナビゲーションが操作できること。キーボードだけでも操作できる、など。
3. 理解可能（Understandable）：情報や操作のしかたが理解できること。エラーの内容が分かる、など。
4. 堅牢（Robust）：読み上げソフトなど、さまざまな利用者の道具で正しく解釈できること。

適合レベル：A・AA・AAA

WCAGの具体的な基準は「達成基準」と呼ばれ、それぞれにA（最低）、AA、AAA（最高）の3つの適合レベルが割り当てられています（参考資料2）。総務省の資料によると、日本の公的機関向けの「みんなの公共サイト運用ガイドライン（2016年版）」では、公的機関のサイトに適合レベルAAを満たすことが求められています（参考資料3）。民間のサイトでも、目安としてAAを目標にすることが多いです。

日本の規格と法律での位置づけ

JIS X 8341-3とWCAGの関係

日本には、ウェブのアクセシビリティに関する日本産業規格JIS X 8341-3:2016があります。総務省の資料によると、JIS X 8341-3:2016は、国際標準であるWCAG 2.0と「一致規格」、つまり中身が同じ規格になっています（参考資料3）。同じ資料では、達成基準の数を適合レベルA：25項目、AA：13項目、AAA：23項目と整理しています（参考資料3）。

WCAGはその後、2.1、2.2と版を重ね、新しい達成基準が加わっています。デジタル庁のデザインシステムでも、WCAGの最新版が2.2であること、2.0がJIS X 8341-3:2016と互換性があることが示されています（参考資料1）。つまり、JISに沿うことは「WCAG 2.0に沿うこと」とほぼ同じで、より新しいWCAG 2.2には、それ以降に加わった基準もある、と理解しておくとよいでしょう。

改正障害者差別解消法

2024年（令和6年）4月1日に改正障害者差別解消法が施行され、民間の事業者にも、障害のある人への「合理的配慮」の提供が義務づけられました（参考資料4）。合理的配慮とは、障害のある人から求めがあったときに、負担が重すぎない範囲で対応することです（参考資料4）。

ウェブアクセシビリティとの関係について、デジタル庁のデザインシステムでは、改正法の中で、環境の整備の努力義務としてウェブアクセシビリティの確保が位置づけられていると説明しています（参考資料1）。法律の解釈や自社にどこまで求められるかは、内閣府やデジタル庁の資料を確認し、必要に応じて専門家に相談してください。

まず押さえたい基本の確認項目

WCAGの達成基準はたくさんありますが、すべてを一度に覚える必要はありません。ここでは、画面づくりで特によく問題になる項目を取り上げます（図3）。

1. 文字と背景のコントラスト

WCAG 2.2の達成基準1.4.3（レベルAA）では、通常の文字と背景のコントラスト比を4.5:1以上、大きな文字（18ポイント以上、または14ポイント以上の太字）は3:1以上にすることが求められています（参考資料2）。薄い灰色の文字を白い背景に置くデザインは、おしゃれに見えても、この基準を満たさないことがよくあります（図4）。コントラスト比は、ブラウザの開発者ツールや、無料のチェックツールで簡単に確かめられます。

2. 色だけで情報を伝えない

達成基準1.4.1（レベルA）では、色を、情報や操作、違いを示す唯一の手段にしてはいけないとされています（参考資料2）。前回のフォームで、エラーの欄を赤くするだけでなくアイコンと文字を添えるとしたのは、このためです。グラフの線を色だけで区別している場合も、線の形や、ラベルを添えると分かりやすくなります。

3. 画像に代わりの文章（代替テキスト）をつける

達成基準1.1.1（レベルA）では、画像など文字以外のコンテンツに、同じ目的を果たす文章の代わり（代替テキスト）を用意することが求められています。一方、純粋な飾りの画像は、読み上げソフトが無視できるようにします（参考資料2）。代替テキストは「画像」「写真」ではなく、その画像が伝えている内容を書きます。たとえば、手順を示す図なら、手順の中身を文章で書きます。

4. キーボードだけで操作でき、どこにいるかが見える

達成基準2.1.1（レベルA）では、すべての機能をキーボードで操作できることが求められています。また、達成基準2.4.7（レベルAA）では、キーボードで操作しているときに、いまどこにフォーカス（操作の対象）があるかが見えることが求められています（参考資料2）。デザインの都合でフォーカスの枠線を消してしまうと、キーボードで操作する人は、自分がどこにいるのか分からなくなります。

5. 文字を大きくしても使える

達成基準1.4.4（レベルAA）では、支援技術を使わなくても、文字を200％まで拡大して、内容や機能が失われないことが求められています（参考資料2）。拡大すると文字が重なったり、ボタンが画面の外にはみ出したりしないかを確かめます。

6. ラベル・エラー・押しやすさ

前回学んだとおり、入力が必要な箇所にはラベルか説明を用意し（3.3.2、レベルA）、自動で検出したエラーは項目を特定して文字で説明します（3.3.1、レベルA）（参考資料2）。また、WCAG 2.2で加わった達成基準2.5.8（レベルAA）では、押したりクリックしたりする対象の大きさを、原則として24×24 CSSピクセル以上にすることが求められています（間隔が十分ある場合などの例外あり）（参考資料2）。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

よくある誤解

誤解1：アクセシビリティは、障害のある人だけのための対応
ここまで見たとおり、コントラストや文字の大きさ、キーボード操作、分かりやすいエラーは、明るい屋外で使う人、片手しか使えない人、高齢の人など、多くの人の使いやすさにつながります。

誤解2：あとから専用の「読み上げ用ページ」を作ればよい
別のページを作ると、元のページと内容がずれていき、管理の手間も増えます。基本は、同じページを誰でも使えるように作ることです。

誤解3：ツールで自動チェックすれば十分
自動チェックのツールは、コントラストや代替テキストの有無など、機械で判断できる問題を見つけるのには便利です。しかし、代替テキストの中身が適切か、キーボードでの操作の順番が自然かといった点は、人が実際に確かめる必要があります。

実務ではこう使う：小さく始める点検の手順

アクセシビリティへの対応は、一度にすべてを完璧にしようとすると進みません。次の手順で、影響の大きいところから始めます（図5）。

1. 主な画面を選ぶ：トップページ、問い合わせ・申し込みのフォーム、よく見られるページなど、利用者にとって大事な画面から始めます。
2. 自動チェックをかける：無料のチェックツールで、コントラストや代替テキストの抜けなど、機械で見つけられる問題を洗い出します。
3. キーボードだけで操作してみる：マウスを使わずに、Tabキーで移動して、問い合わせを送信できるかを試します。フォーカスが見えるか、順番は自然かを確かめます。
4. 拡大と読み上げで確かめる：ブラウザで文字を200％に拡大してみる。パソコンやスマートフォンに標準で入っている読み上げ機能で、主な画面を聞いてみる。
5. 直して、記録する：見つけた問題を一覧にし、第4回で学んだ深刻度の考え方で優先順位をつけて直します。対応した内容と、まだ対応できていない内容を記録しておくと、次の改善につながります。

制作を依頼するときに伝えること

制作会社に依頼するときは、「WCAG 2.2のレベルAAを目標にする」「コントラスト比を確認する」「キーボードで操作できることを確認する」など、目標と確認方法を最初に伝えておきます。デザインの段階で配慮しておけば、あとから直すより、ずっと少ない手間で対応できます。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」（参考資料5）は、取り組みの全体像をつかむのに役立ちます。

この回のまとめ

• アクセシビリティは、障害のある人や高齢の人を含め、できるだけ多くの人が使えるようにすること。多くの人の使いやすさにもつながる。
• WCAG 2.2は、知覚可能・操作可能・理解可能・堅牢の4つの原則と、A・AA・AAAの適合レベルからなる。目安としてAAを目標にすることが多い。
• JIS X 8341-3:2016はWCAG 2.0と一致規格。WCAG 2.2には、その後に加わった基準もある。
• 改正障害者差別解消法（2024年4月施行）で、事業者の合理的配慮の提供が義務化。ウェブアクセシビリティの確保は環境の整備の努力義務として位置づけられている（デジタル庁）。
• まずは、コントラスト（4.5:1）、色だけに頼らない、代替テキスト、キーボード操作とフォーカス、200％拡大、ラベルとエラーから点検する。

確認テスト

次回予告

第8回は、この講座の総まとめとなる「ユーザビリティテストと改善」です。5人の利用者に試してもらい、観察し、直すという、もっとも効果的で手軽な改善の進め方を学び、全8回をふりかえります。

参考資料

1. デジタル庁「アクセシビリティ｜デジタル庁デザインシステムβ版」 https://design.digital.go.jp/dads/guidance/accessibility/ （確認日：2026年11月12日）
2. W3C「Web Content Accessibility Guidelines (WCAG) 2.2」（2024年12月12日 勧告） https://www.w3.org/TR/WCAG22/ （確認日：2026年11月12日）
3. 総務省「令和4年度 公的機関向けウェブアクセシビリティ対応講習会 解説資料」（2022年12月） https://www.soumu.go.jp/main_content/000852142.pdf （確認日：2026年11月12日）
4. 内閣府「改正障害者差別解消法が施行されました」 https://www.cao.go.jp/press/new_wave/20240520.html （確認日：2026年11月12日）
5. デジタル庁「ウェブアクセシビリティ導入ガイドブック」 https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook （確認日：2026年11月12日）