タコでもわかるWebアクセシビリティ② 〜知識編〜

2026年 9月15日　Posted　遠藤(フロントエンドエンジニア)

Webアクセシビリティについて詳しく知りたいけど、「何から学べばいいのか分からない……」という方も多いのではないでしょうか。

そこで今回は、Webアクセシビリティの知識をどこから学び始めれば良いのか、できるだけやさしい言葉でご紹介します。

まずはガイドラインを読もう

実は、Webアクセシビリティには国際的なガイドラインがあります。
それがWCAG（Web Content Accessibility Guidelines）です。
略称の読み方は「ウィーキャグ」または「ダブルシーエージー」で、人によって呼び方は違います。

Understanding WCAG 2.1

ガイドラインでは、どうすればWebアクセシビリティを確保できるのか、方法や手順が示されています。

ガイドラインは数年ごとに更新されますが、この記事では WCAG 2.1 を例に説明します。

原文は海外のW3Cという団体が発行しているものなので、英語で書かれていて理解が難しいかもしれませんが、日本のウェブアクセシビリティ基盤委員会という団体が日本語に翻訳して公開しているものがあります。
そちらの解説書を読むと理解しやすいと思いますので、まずはこちらを読むのがおすすめです。

WCAG 2.1 解説書

ガイドラインを読むうえでの基礎知識

四つの原則がある

ガイドラインではまず「四つの原則」が示されています。

知覚可能：どのような状況においても情報が把握できるようになっていること。

操作可能：どのような状況においてもウェブサイトが操作できるようになっていること。

理解可能：情報や操作もわかりやすくなっていること。

堅牢：さまざまなブラウザ-、デバイスなどでも問題なく使用できること。

この四つの原則に沿って、細かい項目が整理されています。

達成基準がある

• 「達成基準」とは、目標が達成されたかどうかを判断するための明確な基準があり、複数の項目があります。
• 先に説明した四つの原則ごとに大きく分けられています。そこからさらに画像に関すること（代替テキストがあるかなど）だったり、動画に関すること（字幕があるかなど）だったりと項目が分かれていきます。

達成基準にはレベルが3段階ある（A / AA / AAA）

• 達成基準にはA、AA、AAAと3段階のレベルがあります。
• 適合レベルと呼ばれます。
• Aの数が増えるにつれて難易度が上がり、求められる基準が厳しくなります。
• Webアクセシビリティの対応をする際に、どのレベルを目指すか目標を立てる場合が多いです。（AAを目指す／AAと一部AAAの達成を目指すなど）
• 公共サイトにおいてはAAのレベルが求められています。

達成方法がある

• 「達成方法」とは、達成基準を満たすための具体的な手順や実装です。
• 例えば、画像にはaltをつけましょうなど、達成基準を満たすための具体的な方法が示されます。

ガイドラインを読むポイント

ガイドラインの左側に四つの原則に分けられた達成基準の項目が並んでいて、それぞれリンクになっていますので順に見ていきましょう。

まず達成基準の大項目を確認しよう

項目がまず大項目と小項目に分かれています。大項目はカテゴリー分けのようなもので、そのカテゴリーの説明があるので、確認しましょう。

特に意図を読んで、なぜその対応が必要なのかを知ることが大切です。

達成基準の項目を確認しよう

次に実際の項目を確認していきましょう。大項目の下に付随する項目が並んでいますので確認しましょう。

達成基準の概要を確認しよう

ここでは達成基準 1.3.1: 情報及び関係性を理解するのページを例に説明します。

ページを開くと冒頭に達成基準の説明とレベル（難易度）の記載があるので確認しましょう。どうすればアクセシビリティの基準を満たせるかの説明が記載されています。

達成基準の意図やメリットを確認しよう（超重要！）

次に達成基準の意図やメリット部分を確認しましょう。意図やメリットを知ることで、なぜその対応が必要なのか知ることができ、達成基準の項目の理解の手助けになるので重点的に読みましょう。

達成基準の理解が難しい場合は事例を確認しよう

意図やメリットを読んでも理解が難しい場合は、事例部分を確認しましょう。具体的な例の説明がありますので、理解の手助けになるかもしれません。

達成方法を確認しよう

達成方法を確認しましょう。「達成方法」とは、達成基準を満たすための具体的な手順や実装です。

状況によって達成方法が分かれることもあります。状況ごとに確認していきましょう。

リンク先には基準を満たすための方法が詳しく書かれていますので確認しましょう。解説部分があるのでよく確認しましょう。

達成方法の検証部分のとおりにページをチェックすると、実際に基準を満たしているか確認できるので参考にしましょう。実際に基準を満たしているか試験する際に必要になります。

達成方法の注意点（よくある勘違い）

達成方法として多くの方法が掲示されていますが、全て対応しないといけないということではありません。いずれかの方法で対応すれば問題ありません。（複数対応の指定がある場合は複数の対応が必要になります）。

また、達成方法に掲示されている方法はあくまでも一例（推奨方法）になります。もし掲示されている方法以外で達成基準を満たすことができるのならそちらの方法でも問題ありません。

項目を一通り読んでいこう

項目を一通り確認していきましょう。大変ではありますが、一通り確認することでどのような対応をすることでアクセシビリティを確保できるか全体的に大まかに理解できるでしょう。

アクセシビリティを学ぶうえで大切なこと："なぜ"その対応が必要なのかを知ることが大切

例えば、
なぜ（意味のある）画像には代替テキストを提供した方がいいのか、しないとどうなるのか。
なぜ色のコントラストを保つことが大切なのか、保てないとどうなるのか。
その"なぜ"、つまり意図を把握することが大切です。そうすることで本質を理解することにつながります。

本質を知ることで、おのずとWebアクセシビリティを確保するにはどうしたらよいか、柔軟に考えることができるようになるでしょう。

その他参考になりそうなもの

総務省が公的機関のウェブアクセシビリティ対応を支援するために作成したガイドラインがあります。公的機関とはなっていますが、アクセシビリティの説明があり、参考になるかと思います。

みんなの公共サイト運用ガイドライン

まとめ

• Webアクセシビリティは、まずWCAG（Web Content Accessibility Guidelines）の解説書を読むのがおすすめ
• 達成基準の大項目 → 達成基準の概要 → 意図・メリット → 事例 → 達成方法 の流れで読むと理解しやすい
• 達成方法は全部対応する必要はない、いずれかでOK
• 達成方法はあくまでも例なので提示されている方法以外で達成基準を満たしてもOK
• 大切なのは「なぜその対応が必要なのか？」を理解すること

Webアクセシビリティは難しく見えますが、対応の意図を把握し、本質を理解することで誰でもWebアクセシビリティの対応方法について柔軟に考えることができるようになるでしょう。ぜひ気軽に学び始めてみてください。