Webアクセシビリティとは？WCAGとインクルーシブデザインを解説

Webアクセシビリティとは、障がいのある人もWebサイトやアプリを使えるように作ることです。全盲でスクリーンリーダーを使う人、マウスを使えない人、弱視や色覚の多様性がある人、聴覚に障がいのある人、認知や学習に障がいのある人などが対象です。実際には、画像の代替テキスト、十分な色のコントラスト、適切なラベルのあるフォーム、キーボードだけで操作できることといった点に集約されます。その国際的な基準がWCAGで、W3Cが定めるWeb Content Accessibility Guidelines（Webコンテンツアクセシビリティガイドライン）です。

アクセシビリティは、しばしばa11yと略されます。「a」、続く11文字、そして「y」という意味です。

AIで作る場合にアクセシビリティが大切な理由

AIビルダーは、見た目が正しいアプリを作るのが得意です。一方でアクセシビリティは、スクリーンショットではほとんど見えない部分が中心です。ボタンが本当にボタンとして機能しているか、入力欄にスクリーンリーダーが読み上げられるラベルがあるか、Tabキーでメニューまで移動できるか、といった点です。

そのため、次の点を確認することが大切です。

見落としやすいからです。 カスタムで装飾されたドロップダウンは、見た目は完璧でも、マウスなしでは操作できないことがあります。テストしなければ気づきません。
早い段階で正しくするほうが安上がりだからです。 最初のプロンプトでアクセシブルなコンポーネントを頼むのは、ほぼコストがかかりません。完成したアプリを後から直すには、すべての画面に手を入れることになります。
誰にとっても役立つからです。 字幕は騒がしい場所にいる人を助け、十分なコントラストは屋外でスマートフォンを使う人を助け、明確なラベルはすべての人がフォームをより速く埋められるようにします。
SEOと重なるからです。 適切な見出し、説明的なリンク、代替テキストは、検索エンジンがページを理解するのにも役立ちます。AIで作ったWebサイトのSEOを参照してください。
法的に求められる場合があるからです。 どこで事業を行い、誰にサービスを提供するかによって、アクセシビリティは法的な義務になることがあります。

身近なたとえ

建物の入り口を考えてみてください。

階段は多くの人には問題ありません。スロープは車いすの利用者のためのものですが、ベビーカーを押す親、台車を使う配達員、スーツケースを持つ旅行者にも役立ちます。自動ドア、わかりやすい案内表示、エレベーターのボタンの点字、良好な照明は、それぞれ誰かの障壁を取り除きます。

Webアクセシビリティも、デジタル空間について同じ考え方です。アプリのスロープ、案内表示、手すりにあたるものです。そして建物と同じく、設計図の段階でスロープを入れるほうが、コンクリートが固まった後に付け足すよりはるかに簡単です。

WCAGの概要

WCAGは、W3Cのウェブアクセシビリティ・イニシアティブが公開しています。現在のバージョンはWCAG 2.2で、2023年10月に最初に公開されました。後方互換性があり、WCAG 2.2に準拠したコンテンツは、2.1と2.0にも準拠します。W3Cは最新バージョンの利用を推奨しています。WCAG 2.2は国際規格ISO/IEC 40500:2025としても承認されています。全く別のWCAG 3は、完成した規格ではなく、初期の草案として開発中です。

WCAGは、POURと覚えられる4つの原則で構成されています。

原則	意味	例
知覚可能（Perceivable）	使う感覚で、人がコンテンツを受け取れる	画像の代替テキスト、動画の字幕、十分なコントラスト
操作可能（Operable）	人がコントロールを使い、移動できる	キーボードでの操作、延長できない時間制限がないこと、見えるフォーカス
理解可能（Understandable）	コンテンツと動作が理解できる	明確なラベル、役立つエラーメッセージ、一貫したナビゲーション
堅牢（Robust）	さまざまなブラウザや支援技術で動作する	適切なHTML要素、コントロールの正しい名前と役割

各ガイドラインには、3段階のレベルで検証可能な達成基準があります。

レベルA：最低限の基準です。これに失敗すると、一部の人が完全に利用できなくなります。
レベルAA：標準的な目標で、ほとんどの法律や方針が基準にしているレベルです。
レベルAAA：最も高いレベルです。部分的には目指す価値がありますが、一部のコンテンツはこれを満たせないため、W3Cはサイト全体に必須とすることを推奨していません。

WCAG 2.2では、2.1に9つの達成基準が追加されました。レベルAAの**ターゲットサイズ（最小）は、クリックできる部分を、原則として24×24 CSSピクセル以上にすることを求めます（例外あり）。またアクセシブルな認証（最小）**は、記憶やパズルに頼るログインの手順を制限します。例えば、パスワードの貼り付けを禁止したまま、手で入力し直させるような場合です。古い「構文解析（Parsing）」の基準は、時代遅れとして削除されました。

実例：サインアップフォーム

AIが作るかもしれないサインアップフォームと、アクセシビリティのチェックで見つかる問題を見てみましょう。

問題	影響を受ける人	修正
入力欄が、ラベルではなくプレースホルダーのテキスト（「Email」）を使っている	スクリーンリーダーの利用者。入力を始めると、その欄が何だったか忘れてしまう人	入力欄ごとに、画面に見える`<label>`を関連付ける
白背景の薄い灰色の文字で、4.5:1を大きく下回るコントラスト	弱視の人、屋外にいる人	4.5:1のコントラスト比を満たす、より濃い文字にする
エラーが赤い枠線だけで示される	色覚の多様性がある利用者、スクリーンリーダーの利用者	欄の横にテキストのメッセージを表示し、スクリーンリーダーにも読み上げさせる
「サインアップ」が、`<button>`ではなく、装飾された`<div>`になっている	キーボードやスクリーンリーダーの利用者は、それを起動できない	本物の`<button>`要素を使う
入力欄をTabで移動しても、見える枠線がない	キーボードの利用者が、今どこにいるかわからなくなる	わかりやすいフォーカスのスタイルを付ける
ロゴ画像に代替テキストがない	スクリーンリーダーの利用者にはファイル名が読み上げられる	「Acme Bookings」のような代替テキストを付ける

これらの修正のどれも、フォームの見た目をあまり変えません。しかし、どれも一部の人がそのフォームを使えるかどうかを変えます。

主要な用語

用語	意味
スクリーンリーダー	画面を音声や点字ディスプレイで読み上げるソフトウェアです。VoiceOver、NVDA、JAWSなどがあります。
代替テキスト（Alt text）	画像の文字による説明で、スクリーンリーダーが読み上げます。装飾のための画像には、空の代替テキストを付けて、読み飛ばされるようにします。
コントラスト比	文字の色と背景の色の違いを、1:1から21:1の範囲で表したものです。
キーボード操作	マウスの代わりに、Tab、Enter、Space、矢印キーを使ってサイトを操作することです。
フォーカスインジケーター	キーボードでどの要素を選択しているかを示す、見える枠線です。
セマンティックHTML	`<button>`、`<nav>`、`<h2>`など、目的に合った要素を使うことです。ブラウザや支援技術がページを理解できるようにします。
ARIA	カスタムコントロールを支援技術に説明するための追加の属性です。使いすぎを避け、まずネイティブのHTML要素を優先します。
支援技術	スクリーンリーダーから、スイッチ装置、音声操作まで、コンピューターにアクセスするために人が使う道具です。

よくある誤解

「アクセシビリティは全盲の人にだけ関係する」。 視覚、運動、聴覚、音声、認知に関する障がいや、腕の骨折のような一時的な状況も含まれます。
「アクセシブルなサイトは地味になる」。 アクセシビリティは、コントラスト、フォーカスのスタイル、文字の大きさなど、いくつかの点に制約を与えます。しかし、見た目の良いアクセシブルなサイトは、例外ではなく標準です。
「自動チェッカーが100点なら、もう終わり」。 自動ツールが検出できるのは、一部の問題だけです。代替テキストが本当に意味を持っているか、スクリーンリーダーで操作したときに流れが自然かは、人が確認する必要があります。
「オーバーレイのウィジェットを入れれば準拠できる」。 後から重ねたツールバーでは、コードにあるラベルの欠落やキーボード操作の不具合は直せません。元のコードを直してください。
「障がいのある利用者はいない」。 気づいていないだけかもしれません。多くの障がいは見えません。また、障壁に突き当たった人は、たいてい単に立ち去ってしまいます。

AIビルダーに頼む内容

「このアプリをWCAG 2.2のレベルAAに準拠するように作ってください。」
「セマンティックHTMLを使ってください。本物のボタン、リンク、順序の正しい見出し、すべてのフォーム欄のラベルを用意してください。」
「すべての操作要素が、キーボードだけで動き、見えるフォーカスのスタイルを持つようにしてください。」
「すべての文字とアイコンの色のコントラストを確認してください。通常の文字は4.5:1、大きな文字とアイコンは3:1です。」
「情報を伝える画像には意味のある代替テキストを、装飾の画像には空の代替テキストを付けてください。」
「フォームのエラーは、色だけでなくテキストで、その欄に結びつけて表示してください。」
「アニメーションには、ユーザーのモーション軽減の設定を尊重してください。」
「自動のアクセシビリティチェックを実行し、それでは検査できない項目を一覧にしてください。そうすれば、私が手作業で確認できます。」

そのあとは、自分でもテストしてください。マウスを脇に置き、Tab、Shift+Tab、Enter、Spaceだけで、主要な操作を完了できるか試してください。スマートフォンの標準のスクリーンリーダーで、メインのページを読んでみてください。ブラウザのズームを200%にして、崩れている箇所がないか確認してください。

Mythexでのアクセシビリティ

Mythexには、専用のアクセシビリティチェッカーは含まれていません。そのため、アクセシビリティはプロンプトとテストの一部として扱ってください。最初のプロンプトからWCAG 2.2 AAを依頼し、プレビューでキーボードを使って結果を確認し、公開前には/testを使って、エージェントに主要な操作の流れをクリックして確かめてもらってください。詳しくはApp Testingをご覧ください。SEOのレシピでも、セマンティックな見出しと意味のある代替テキストを求めており、どちらも両方の目的に役立ちます。

ハンズオンのチェックリストについては、Webサイトをアクセシブルにする方法をご覧ください。デザインについては、AIで見栄えのよいアプリをデザインする方法を読み、公開前には公開前にアプリをテストする方法をご覧ください。W3CのWCAGの概要が、正式な情報源です。

よくある質問

Webアクセシビリティとは簡単に言うと何ですか？

Webアクセシビリティとは、障がいのある人がWebサイトやアプリを知覚し、理解し、操作し、利用できるように設計・構築することです。スクリーンリーダーを使う全盲の人、マウスを使えない人、弱視や色覚の多様性がある人、聴覚に障がいのある人、認知に障がいのある人などが対象になります。

WCAGとは何ですか？

WCAG（Web Content Accessibility Guidelines）は、W3Cが公開しているWebアクセシビリティの国際規格です。現在のバージョンはWCAG 2.2で、2023年10月に最初に公開されました。達成基準はA、AA、AAAの3段階に分かれており、多くの組織や法律が参照する目標はレベルAAです。

WCAGはどの程度の色のコントラストを求めていますか？

レベルAAでは、通常の文字は背景に対して少なくとも4.5:1のコントラスト比が必要です。大きな文字（おおよそ18ポイント、または太字の14ポイント）は少なくとも3:1が必要です。アイコンや、コントロールの見える部分は、隣接する色に対して少なくとも3:1が必要です。

Webアクセシビリティは法的な要件ですか？

多くの場所で、多くの組織にとっては、はい。法律は国や分野によって異なります。例えば欧州アクセシビリティ法は、EUの多くの消費者向けデジタル製品やサービスを対象にしています。自分に適用されるルールを確認するか、法律の専門家に相談してください。

アクセシビリティのオーバーレイやウィジェットを入れれば、サイトは準拠しますか？

それだけでは準拠しません。オーバーレイはサイトの上にツールバーを重ねますが、ラベルの欠落、キーボードでは操作できないナビゲーション、わかりにくい構造といった根本的な問題を確実に直すことはできません。信頼できる方法は、サイトのコードとコンテンツを直すことです。