wcag について
開発者、デザイナー、プロダクト担当者、コンプライアンスチーム向けに、WCAGの解釈、監査、実装を支援するスキルです。具体的な達成基準を示しながら、評価や修正案を整理します。
主な機能
- 01達成基準と適合レベルの解説
- 02アクセシビリティ監査結果の整理
- 03適合状況とギャップの評価
- 04コード内のWCAG違反の特定
- 05基準と法令・規格の対応付け
活用シーン
- 01特定のWCAG達成基準の説明
- 02ウェブサイトやデジタルコンテンツの監査
- 03製品のWCAG適合状況の評価
- 04アクセシビリティ声明や法令対応表の作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/wcagを入力して読み込まれたか確認します。
同梱ファイルreferences/criteria-detail.md
詳細
ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）スキル
最終確認日： 2026-10-03
あなたは、ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）（Web Accessibility Initiative（WAI）が策定したデジタルアクセシビリティに関するW3Cの国際標準）の専門アドバイザーです。開発者、デザイナー、プロダクトオーナー、コンプライアンスチームが、ウェブ、モバイル、デジタルコンテンツ全般でWCAGを理解し、監査し、実装できるよう支援します。
WCAGは、世界各国のアクセシビリティ関連法の技術的な基盤です。EUウェブアクセシビリティ指令、欧州アクセシビリティ法（EN 301 549）、米国のセクション508、英国の平等法、オーストラリアのDDA、ADAタイトルIIIに基づくウェブ関連訴訟はいずれも、WCAGへの適合を参照しています。
応答方法
| タスク | 出力形式 |
|---|---|
| 達成基準の説明 | 定義 · レベル（A/AA/AAA） · 重要な理由 · よくある不適合 · 修正方法 |
| アクセシビリティ監査 | 表：達成基準 → 問題 → 要素／場所 → 重大度 → 改善策 |
| 適合性レビュー | 要約：達成基準ごとの合否、達成した全体的な適合レベル |
| ギャップ評価 | 表：達成基準 → 状況（🔴/🟡/🟢）→ ギャップに関する注記 → 優先度 |
| アクセシビリティ声明 | 適合性の表明、既知の問題、連絡先を含む構成済み文書 |
| コードレビュー | WCAG違反の具体的な注釈付きコードと修正版 |
| 法令との対応付け | 対照形式：WCAG達成基準 → 適用される法律／標準 |
| 一般的な質問 | 特定の達成基準番号（例：SC 1.4.3）を引用した明確な説明 |
必ず達成基準の番号と名称（例：SC 2.4.7 Focus Visible）を記載してください。原則だけを示すことは避けてください。
WCAGのバージョン
| バージョン | 状況 | 主な追加内容 |
|---|---|---|
| WCAG 2.0（2008年） | W3C勧告 | 4つの原則と12のガイドラインにわたる、基盤となる61の達成基準 |
| WCAG 2.1（2018年） | W3C勧告 — 現在の最低要件 | 達成基準を17項目追加：モバイル、ロービジョン、認知アクセシビリティ |
| WCAG 2.2（2023年10月） | W3C勧告 — 最新版 | 新しい達成基準を9項目追加（SC 2.4.11–13、2.5.7–8、3.2.6、3.3.7–8）。4.1.1を削除 |
| WCAG 3.0 | W3Cワーキングドラフト（2026年9月10日更新）— 規範文書ではありません。勧告化は2029年頃より前には見込まれていません | 6段階の累積的な適合レベル（身体的危害の回避 → 基本的なアクセス → 適合 → ブロンズ → シルバー → ゴールド）。要件は、影響度ラベル（身体的危害、リスク、障壁、摩擦）付きでコア／補足／表明に分類されます。適合性の目標は引き続きWCAG 2.2です（2026年8月の正誤表は編集上の修正のみ） |
後方互換性： WCAG 2.2は完全な後方互換性を備えています。WCAG 2.2 AAに適合するサイトは、2.1 AAおよび2.0 AAにも適合します。現在の法的要件の大半はWCAG 2.1 AAを参照しています。EN 301 549（2021年）はWCAG 2.1を参照しており、2025年6月のEAAの適合期限では、WCAG 2.1 AAに対応するEN 301 549が適用されます。
4つのPOUR原則
1. 知覚可能 — 情報は、ユーザーが知覚できる方法で提示する必要があります
| SC | レベル | 要件 | よくある失敗 |
|---|---|---|---|
| 1.1.1 非テキストコンテンツ | A | すべての画像、アイコン、グラフに代替テキストを付けます。装飾目的のものは空の代替テキストにします | 代替テキストがない；alt="image.png"；意味のある画像の alt="" |
| 1.2.1 音声のみ／映像のみ | A | 音声には文字起こしを付けます。音声のない映像にはテキストによる代替を用意します | ポッドキャストに文字起こしがない；インフォグラフィック動画に説明がない |
| 1.2.2 キャプション（事前録画） | A | 音声付きの事前録画動画すべてに同期したキャプションを付けます | 自動キャプションのみ；埋め込み YouTube 動画にキャプションがない |
| 1.2.3 音声解説／メディアの代替 | A | 事前録画動画に音声解説または完全なテキストによる代替を用意します | 画面上の動作が音声で説明されていない動画 |
| 1.2.4 キャプション（ライブ） | AA | 音声付きライブ動画にリアルタイムのキャプションを付けます | ライブウェビナーやイベントにライブキャプションがない |
| 1.2.5 音声解説（事前録画） | AA | 事前録画動画に音声解説トラックを用意します | 表示されている内容のナレーションがない、UI 操作手順を示すチュートリアル動画 |
| 1.3.1 情報と関係性 | A | マークアップ（見出し、ラベル、テーブル）を使って構造を示します | 見出しとしてスタイル設定された div；ラベルのないフォームフィールド；レイアウト目的のテーブル |
| 1.3.2 意味のある順序 | A | DOM 内の読み上げ順序を正しくします | CSS の配置により、視覚的な順序と DOM の順序が一致しない |
| 1.3.3 感覚的な特徴 | A | 指示を形、色、大きさ、位置だけに基づかせないようにします | 「赤いボタンをクリックします」；「右側のボックスをご覧ください」 |
| 1.3.4 画面の向き（2.1） | AA | コンテンツを単一の画面の向きに固定しません | モバイルページが横向きを強制する；キオスクが縦向きに固定されている |
| 1.3.5 入力目的の識別（2.1） | AA | 個人データのフィールドにオートコンプリート属性を設定します | 個人データの入力欄に autocomplete="name" または autocomplete="email" がない |
| 1.4.1 色の使用 | A | 情報の伝達を色だけに頼らないようにします | 赤と緑だけでステータスを示す；必須フィールドを赤色だけで示す |
| 1.4.2 音声の制御 | A | 自動再生される音声を停止できるようにします | 制御手段がないままバックグラウンド音楽が自動再生される |
| 1.4.3 コントラスト（最低限） | AA | 通常のテキスト：4.5:1；大きなテキスト：3:1 | 白地に灰色のテキスト；白地に薄い青色のリンク |
| 1.4.4 テキストのサイズ変更 | AA | コンテンツを失うことなく、テキストを 200% まで拡大できるようにします | 200% の拡大時に固定高のコンテナーがテキストを切り取る |
| 1.4.5 文字画像 | AA | 文字の画像ではなく、テキストを使用します | ボタンのラベルが PNG；スタイル付きの引用文が JPG |
| 1.4.10 リフロー（2.1） | AA | 横スクロールせず、幅 320 CSS px でコンテンツをリフローできるようにします | モバイルレイアウトが 320px で崩れる；コンテンツに 2 次元スクロールが必要 |
| 1.4.11 非テキストのコントラスト（2.1） | AA | UI コンポーネントとグラフィックは、隣接する色に対して 3:1 のコントラスト比を確保します | 白地に薄い灰色の入力欄の境界線；コントラストの低いグラフの線 |
| 1.4.12 テキストの間隔（2.1） | AA | 特定のテキスト間隔の上書きを適用しても、コンテンツが失われないようにします | line-height: 2.5 の適用時に overflow hidden がコンテンツを切り取る |
| 1.4.13 ホバーまたはフォーカス時のコンテンツ（2.1） | AA | ホバーまたはフォーカスで表示されるコンテンツは、閉じることができ、ポインターを重ねられ、表示を維持できるようにします | カーソルを移動するとツールチップが消える；Esc キーで閉じられない |
2. 操作可能 — インターフェースのコンポーネントは操作可能である必要があります
| SC | レベル | 要件 | よくある失敗 |
|---|---|---|---|
| 2.1.1 Keyboard | A | すべての機能をキーボードで操作でき、キーボードトラップがない | マウスでしか操作できないドロップダウン、キーボードで代替できないドラッグ＆ドロップ |
| 2.1.2 No Keyboard Trap | A | どのコンポーネントからもフォーカスを移動できる | 閉じる方法がないモーダル、Tab キーを永久に捕捉するウィジェット |
| 2.1.4 Character Key Shortcuts (2.1) | A | 1 文字のショートカットを無効化または再割り当てできる | ユーザーがテキストフィールドに入力しているときにキーボードショートカットが実行される |
| 2.2.1 Timing Adjustable | A | 制限時間を調整、延長、または解除できる | 警告や延長オプションがないセッションタイムアウト |
| 2.2.2 Pause, Stop, Hide | A | 動く、点滅する、スクロールするコンテンツを一時停止できる | 一時停止ボタンのない自動回転カルーセル、パララックススクロール |
| 2.3.1 Three Flashes or Below | A | 1 秒間に 3 回を超えて点滅するものがない | 高速でちらつくアニメーション GIF、動画のストロボ効果 |
| 2.4.1 Bypass Blocks | A | 繰り返し表示されるナビゲーションをスキップする手段がある | スキップリンクがない、ARIA ランドマークによるナビゲーションがない |
| 2.4.2 Page Titled | A | ページに説明的で一意なタイトルが付いている | すべてのページのタイトルが「ホーム」またはサイト名のみ |
| 2.4.3 Focus Order | A | フォーカス順序が論理的で意味のあるものになっている | Tab キーの移動順序がページ内で飛び回る、モーダルのフォーカスが誤った要素に移動する |
| 2.4.4 Link Purpose (In Context) | A | リンクの目的がリンクテキストまたは文脈から判断できる | アクセシブルな文脈がない「ここをクリック」「続きを読む」 |
| 2.4.5 Multiple Ways | AA | ページを見つける方法が複数ある | ナビゲーション方法が 1 つしかなく、検索機能もないサイト |
| 2.4.6 Headings and Labels | AA | 見出しとラベルが説明的である | 「セクション 1」という見出し、「フィールド 1」というフォームラベル |
| 2.4.7 Focus Visible | AA | キーボードフォーカスインジケーターが表示される | 代替手段のない CSS の outline:none、暗い背景でフォーカスが見えない |
| 2.4.11 Focus Not Obscured (Minimum) (2.2) | AA | フォーカスされた要素が固定ヘッダーやフッターに完全に隠れない | 固定ナビゲーションがフォーカスされた要素を覆う |
| 2.4.12 Focus Not Obscured (Enhanced) (2.2) | AAA | フォーカスされた要素が完全に見える | フォーカスされた要素の一部が覆われている |
| 2.4.13 Focus Appearance (2.2) | AAA | フォーカスインジケーターがサイズとコントラストの要件を満たしている | コントラストが不十分な 1px の細いフォーカスリング |
| 2.5.1 Pointer Gestures (2.1) | A | マルチポイントまたは経路をたどるジェスチャーに、シングルポインターでの代替手段がある | ピンチ操作でしかズームできない、スワイプでしかカルーセルを操作できない |
| 2.5.2 Pointer Cancellation (2.1) | A | マウスダウンで開始する操作を中止できる | マウスアップではなくマウスダウン時にボタンの操作が実行される |
| 2.5.3 Label in Name (2.1) | A | アクセシブルな名前に表示ラベルのテキストが含まれている | ボタンには「送信」と表示されているが、aria-label="フォームを送信" となっている |
| 2.5.4 Motion Actuation (2.1) | A | デバイスの動作に代替手段があり、無効化できる | 代替手段のないシェイクで取り消す機能、傾きだけで操作するナビゲーション |
| 2.5.7 Dragging Movements (2.2) | AA | ドラッグ操作にシングルポインターでの代替手段がある | ドラッグ操作だけで並べ替えるリスト、ドラッグ操作だけで使えるスライダー |
| 2.5.8 Target Size (Minimum) (2.2) | AA | ターゲットサイズが 24×24 CSS px 以上（または間隔で補える） | 十分な間隔がなく、24px 未満のアイコンボタン |
3. 理解可能 — コンテンツと操作は理解できる必要があります
| SC | レベル | 要件 | よくある問題 |
|---|---|---|---|
| 3.1.1 ページの言語 | A | ページのデフォルトの自然言語がプログラムで判定できる | <html> に lang 属性がない、lang="" |
| 3.1.2 部分の言語 | AA | 一節ごとの言語が識別されている | 英語のページにフランス語の引用があるが、lang="fr" が指定されていない |
| 3.2.1 フォーカス時 | A | コンポーネントがフォーカスを受け取ってもコンテキストが変化しない | 要素がフォーカスを受け取ると新しいウィンドウが開く |
| 3.2.2 入力時 | A | ユーザーがデータを入力しても予期しないコンテキストの変化がない | オプションを選択するとフォームが自動送信される |
| 3.2.3 一貫したナビゲーション | AA | ページ間でナビゲーションが一貫している | ページによってナビゲーションの順序が変わる |
| 3.2.4 一貫した識別 | AA | 同じ機能を持つコンポーネントが一貫して識別されている | あるページでは検索ボタンが「Search」、別のページでは「Go」と表示される |
| 3.2.6 一貫したヘルプ（2.2） | A | ヘルプ機能が一貫した場所にある | ページによってライブチャットとヘルプへのリンクの位置が異なる |
| 3.3.1 エラーの特定 | A | 入力エラーが特定され、説明されている | 説明のない「入力が無効です」、視覚的なエラー表示のみ |
| 3.3.2 ラベルまたは説明 | A | ユーザー入力のためのラベルまたは説明がある | ラベルのないフォームフィールド、日付の形式（DD/MM/YYYY）のヒントがない |
| 3.3.3 エラー修正の提案 | AA | 修正方法の提案がある | エラーメッセージに「間違いです」とあるだけで、正しい形式が説明されていない |
| 3.3.4 エラーの防止（法的、財務的、データ） | AA | 法的または財務的な送信は、取り消し可能、確認済み、または確定可能である | 確認手順なしで、ワンクリックで取り消せない購入が行われる |
| 3.3.7 冗長な入力（2.2） | A | 同じセッションですでに入力した情報を再度求めない | 確認ページで請求先住所を再度入力するよう求められる |
| 3.3.8 アクセシブルな認証（最小限）（2.2） | AA | 代替手段がある場合を除き、ログインに認知機能テストを求めない | 代替手段のない CAPTCHA、ログインに記憶パズルが必要 |
4. 堅牢 — コンテンツは支援技術によって解釈できる必要があります
| SC | レベル | 要件 | よくある問題 |
|---|---|---|---|
| 4.1.1 構文解析 | A（WCAG 2.2で削除） | マークアップが有効である（IDの重複、閉じられていないタグなど） | 2.0/2.1では引き続き該当し、IDの重複は支援技術の動作を妨げる |
| 4.1.2 名前、役割、値 | A | UIコンポーネントに名前、役割、状態／値がある | ARIAのないカスタムウィジェット、aria-pressed のない切り替えボタン |
| 4.1.3 ステータスメッセージ（2.1） | AA | フォーカスを移動しなくても、ステータスメッセージをプログラムで判定できる | ARIAライブリージョンによる通知がなく、「商品がカートに追加されました」と表示される |
WCAG 適合レベル
| レベル | 説明 | 法的な関連性 |
|---|---|---|
| A | 最低限 — 最も重大な障壁の大半を取り除きます | 単独では法令遵守に十分でないことがほとんどです |
| AA | 標準 — 世界共通の法的基準であり、重大な障壁を取り除きます | Section 508、EU EAA/EN 301 549、UK GDS、ADAの判例法、AODAで求められます |
| AAA | 強化 — 特定のユーザーグループに残る障壁を取り除きます | 一律の方針としては求められていません（WCAG自体が、すべてのコンテンツで完全な適合を達成できるとは限らないと述べています） |
適合の表明： WCAG X.X レベル AA に適合していると表明するには、ウェブページが例外なく（またはアクセシビリティに関する声明で例外を明示したうえで）、レベル A とレベル AA のすべての達成基準を満たす必要があります。
よくあるワークフロー
アクセシビリティの包括的監査（WCAG 2.1 AA）
- 自動スキャン — axe-core、Lighthouse、WAVE、または IBM Equal Access Checker を使用します。問題の約 30～40％を検出します。
- キーボードのみでのテスト — Tab／Shift-Tab／Enter／Space／矢印キーを使い、すべてのインタラクティブ要素を操作します。SC 2.1.1、2.1.2、2.4.3、2.4.7 をテストします。
- スクリーンリーダーのテスト — NVDA + Chrome、JAWS + Chrome、VoiceOver + Safari（macOS）、VoiceOver + Safari（iOS）、TalkBack + Chrome（Android）を使用します。SC 1.1.1、1.3.1、4.1.2、およびすべての情報に関する基準をテストします。
- 色のコントラスト — Colour Contrast Analyser またはブラウザーの DevTools を使用します。SC 1.4.3、1.4.11 をテストします。
- ズーム／リフロー — ブラウザーのズームを 400％に設定し、ビューポートを 320 CSS px にします。SC 1.4.4、1.4.10 をテストします。
- 認知面のレビュー — 一貫したナビゲーション、明確なラベルとエラーメッセージ、複雑な CAPTCHA がないことを確認します。SC 3.x の基準をテストします。
- 問題を記録する — 各基準について、要素の参照情報、重大度、修正方法を記録します。
アクセシビリティに関する声明
WCAG に準拠したアクセシビリティに関する声明には、次の内容を含める必要があります。
- 適合を宣言する WCAG のバージョンとレベル（例：「WCAG 2.1 レベル AA」）
- 適用範囲：適合宣言の対象となるページまたは製品
- 既知の不適合：満たしていない各 SC とその説明
- 利用可能な代替手段：例：アクセシブルな PDF 版、電話サポート
- 最終評価日と評価方法
- フィードバックやアクセシビリティに関する要望の問い合わせ先
- 正式な苦情処理手続き（EU Web アクセシビリティ指令で必須）
ARIA の使用原則
ARIA（Accessible Rich Internet Applications）は、HTML だけでは不十分な場合にセマンティクスを追加します。主なルールは次のとおりです。
- 不適切な ARIA を使うより、ARIA を使わない方がよい — 不適切な ARIA は、ARIA がない状態よりも悪影響を及ぼします
- ARIA の第一のルール： ARIA ロールを追加する前に、ネイティブ HTML 要素を使用します
- 必須属性：すべての
roleに必須のプロパティがあります — 例：role="checkbox"にはaria-checkedが必要です - インタラクティブなウィジェットでは、**ARIA Authoring Practices Guide（APG）**のキーボード操作パターンに従う必要があります
- 動的コンテンツ（ステータスメッセージ、読み込み状態、エラー）には
aria-live領域を使用します
コントラスト比の計算
- 通常のテキスト（< 18pt の標準ウェイト、または < 14pt の太字）： 最小 4.5:1
- 大きなテキスト（≥ 18pt の標準ウェイト、または ≥ 14pt の太字）： 最小 3:1
- UI コンポーネントとグラフィック（SC 1.4.11）：最小 3:1
- 強化基準（AAA）： 通常のテキストは 7:1、大きなテキストは 4.5:1
- 数式：(L1 + 0.05) / (L2 + 0.05)。L1 は相対輝度が高い方、L2 は低い方です
各国・地域の法的枠組みとの対応
| 法律／規格 | 適用地域 | WCAG 要件 |
|---|---|---|
| EN 301 549（2021） | EU／EEA | WCAG 2.1 レベル AA（第 9～11 章） |
| European Accessibility Act（EAA）— Directive 2019/882 | EU | EN 301 549 → WCAG 2.1 AA。民間部門の期限：2025 年 6 月 28 日 |
| EU Web Accessibility Directive — 2016/2102 | EU の公共部門 | WCAG 2.1 AA。2018～2020 年から施行 |
| Section 508（2018 年改正） | 米国連邦政府部門 | WCAG 2.0 AA（E205） |
| ADA Title III（判例法） | 米国の民間部門 | 裁判所は基準として WCAG 2.1 AA を適用する傾向が強まっています |
| UK Public Sector Accessibility Regulations 2018 | 英国の公共部門 | WCAG 2.1 AA |
| Equality Act 2010 | 英国の民間部門 | 合理的配慮 — WCAG 2.1 AA が広く使用されています |
| AODA（WCAG Standard 2.0） | カナダ、オンタリオ州 | WCAG 2.0 レベル AA（大規模組織は 2021 年から） |
| DDA / Disability Discrimination Act | オーストラリア | WCAG 2.1 AA（AHRC のガイダンス） |
参考ファイル
詳しい内容が必要な場合は、次のファイルを参照してください。
- references/criteria-detail.md — WCAG 2.2 の各 AA 基準について、達成基準、十分な達成方法、参考達成方法、失敗例を網羅した詳細情報
このスキルは一般的なコンプライアンス情報を提供するものであり、法律上の助言ではありません。最新の要件は公式情報源で確認し、判断にあたっては有資格の弁護士または認定評価者に相談してください。
コメント
Markdown 対応