WCAG — その概要、Web Content Accessibility Guidelines、AAレベル

WCAGとは？

WCAG（Web Content Accessibility Guidelines）は、障害を持つ人々がウェブコンテンツにアクセスできるようにするための推奨事項のセットです。この基準は1999年からW3C Web Accessibility Initiative（WAI）によって開発されています。WCAGは、全盲および視覚障害者、聴覚障害者および難聴者、運動制限のある人々、言語障害および認知障害を持つ人々、さらに加齢に伴う変化がある高齢者を対象としています。

最初のバージョンWCAG 1.0は1999年にリリースされ、14のガイドライン原則が含まれていました。WCAG 2.0（2008年）は技術的に中立となり、HTML、PDF、マルチメディア、モバイルアプリケーションに適用可能になりました。WCAG 2.1（2018年）はモバイルデバイスとタッチ入力の基準を追加しました。WCAG 2.2（2023年）は、アニメーションとフォーカスの新しい基準を備えた現在のバージョンです。WCAGは法律ではありませんが、多くの国が法律で参照しています。

GOST R 52872-2019（ロシア）、European Accessibility Act（EU）、Section 508（米国）はすべてWCAG AA準拠を要求しています。企業および政府のウェブサイトでは、WCAG AAは必須基準であり、遵守しない場合は訴訟につながります。UsableNet（2024年）によると、米国では12,000件以上のウェブアクセシビリティ訴訟が提起されました。

WCAGバージョンの比較

不遵守の法的結果

WCAGに準拠しないことは深刻なリスクを伴います。2025年にEuropean Accessibility Act（EAA）が施行され、EU内のすべての公共ウェブサイトとモバイルアプリケーションにWCAG 2.1 AAが要求されています。罰金は企業の年間売上高の5%に達する可能性があります。米国での訴訟和解額の平均は25,000〜50,000ドルです。アクセシビリティ監査はリリース前だけでなく、開発の各段階で実施する必要があります。

WCAGの4つの原則：POUR

POURは、4つのWCAG原則の頭文字をとったものです：Perceivable（知覚可能）、Operable（操作可能）、Understandable（理解可能）、Robust（堅牢）。各原則にはガイドラインが含まれ、ガイドラインにはテスト可能な成功基準が含まれています。WCAG 2.2には13のガイドラインと86の成功基準があります。各基準にはレベルA、AA、またはAAAがあります。

Perceivable — 知覚可能

Perceivableの原則では、ユーザーが知覚できる形式でコンテンツを提示する必要があります。ガイドライン：1.1 Text Alternatives（テキスト代替）、1.2 Time-based Media（キャプション、文字起こし）、1.3 Adaptable（形式変更時に損失のないコンテンツ）、1.4 Distinguishable（コントラスト4.5:1、色、音）。主要基準1.4.3 Contrast Minimum（AA）は最も頻繁に違反されており、WebAIMによると86%のページがこれに準拠していません。

Operable — 操作可能

Operableの原則では、インターフェースの操作性が要求されます。ガイドライン：2.1 Keyboard Accessible、2.2 Enough Time、2.3 Seizures、2.4 Navigable、2.5 Input Modalities。基準2.1.1 Keyboard（A）は最も重要なものの1つで、すべての機能がマウスなしでキーボードからアクセス可能でなければなりません。クリックでのみ閉じるモーダルウィンドウ、キーボードナビゲーションのないドロップダウン — 典型的な違反です。

Understandable — 理解可能

Understandableの原則では、コンテンツとインターフェースの理解可能性が要求されます。ガイドライン：3.1 Readable、3.2 Predictable、3.3 Input Assistance。基準3.3.4 Error Preventionは、金融および医療アプリケーションにとって特に重要です：入力エラーの深刻な結果を防止します。基準3.2.6 Consistent Help（WCAG 2.2で新規）では、ヘルプボタンが同じ場所にあることが要求されます。

Robust — 堅牢

Robustの原則では、支援技術との互換性が要求されます。ガイドライン4.1 Compatible、主要基準4.1.2 Name, Role, Value（A）：各UIコンポーネントは、プログラムで決定可能な名前、役割、状態を持つ必要があります。ARIA属性（role、aria-label、aria-expanded）が主要なツールです。これらがないと、スクリーンリーダーは要素がボタン、リンク、タブのいずれであるかを判断できません。

WCAG原則の表

WCAG適合レベル：A、AA、AAA

WCAGは3つのレベルを定義しています：A（最小）、AA（標準）、AAA（最大）。レベルAは必須最低限であり、これがないと一部のユーザーカテゴリにとってコンテンツにアクセスできません。AAは主要なアクセシビリティ障壁を取り除きます。AAAは最高基準ですが、すべてのコンテンツで達成できるわけではありません（たとえば、一部の手話や音声の文字起こしは常に実現可能とは限りません）。

レベルA（30基準）：テキスト代替、キーボード操作、十分な時間、3Hzを超える点滅なし。レベルAA（+24基準）：コントラスト比4.5:1、ビデオのキャプション、テキストサイズ200%まで、明確なキーボードフォーカス。レベルAAA（+32基準）：コントラスト比7:1、手話、アニメーションの無効化（2.3.3）、音声の文字起こし。政府ウェブサイトにはAAで十分です。

WCAG監査プロセス

WCAGアクセシビリティ監査には以下が含まれます：自動テスト（axe DevTools、WAVE、Lighthouse — 30〜40%のエラーを発見）、手動キーボードおよびスクリーンリーダーテスト（VoiceOver、TalkBack、NVDA）、複雑な基準の専門家監査、障害を持つユーザーとのユーザーテスト。監査レポートには、適合レベルと各基準の不適合リストを含める必要があります。

WCAG 2.2の新機能

WCAG 2.2は9つの新しい基準を追加しました。主なもの：2.4.11 Focus Appearance（AA） — 3:1のコントラストで2px以上のフォーカスインジケーター、2.5.8 Target Size Minimum（AA） — 最低24x24ピクセルのタッチターゲット、3.3.7 Accessible Authentication（AA） — CAPTCHAなしの認証。基準2.3.3 Animation from Interactions（AAA） — 無効化可能なアニメーションまたは5秒以内。

Focus Appearanceは最も重要な変更です。以前は、代替なしのoutline: noneは違反でしたが、明確な要件はありませんでした。WCAG 2.2では次のように定められました：太さ2px以上、背景とのコントラスト3:1、インジケーターの面積は少なくとも要素の面積以上。border-radiusのあるカスタムボタンには、outlineの代わりにbox-shadowを使用します。

CSSでのFocus Appearance

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

:focus-visibleのスタイリングは、Focus Appearance基準への準拠を保証します。box-shadowによる代替方法は、border-radiusのある要素に適しています。ダークテーマとHigh Contrastはフォーカスカラーを適応させます。

Accessible Authentication

基準3.3.7 Accessible Authentication（AA）は最も議論されている新機能の1つです。オブジェクト認識を使ったCAPTCHA、パズル、スライダーのドラッグ — 代替手段がない場合は違反となります。許容される方法：メール/SMSによるOTP、生体認証（Face ID、Touch ID）、QRコード、マジックリンク。これにより、認知障害を持つ人々だけでなく、すべてのユーザーの生活が簡素化されます。

モバイルアプリケーションのWCAG

WCAGはネイティブのiOSおよびAndroidアプリケーションに適用されます。4つのPOUR原則はモバイルインターフェースを完全にカバーしています。特定の基準：2.5.1 Pointer Gestures（高精度を必要としないジェスチャー）、2.5.2 Pointer Cancellation（誤タッチのキャンセル）、2.5.3 Label in Name（ボタンテキストがアクセシビリティラベルと一致）。iOSはUIKit/UIAccessibilityを使用し、AndroidはAccessibilityServiceとContentDescriptionを使用します。

モバイルアプリケーションで最も頻繁に違反されるもの：1.1.1 Non-text Content — contentDescriptionのないアイコン、2.4.3 Focus Order — 誤ったナビゲーション順序、2.5.8 Target Size — 24x24dpより小さいボタン、1.4.3 Contrast — 背景画像上のテキスト。iOSはXcodeでAccessibility Inspectorを提供し、Androidは自動監査のためのAccessibility Scannerを提供しています。

WCAG準拠のSwiftUIコード

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("アクションのためにクリック")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("メール")
                TextField("メールを入力", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("メール入力フィールド")
                    .accessibilityHint("メールアドレスを入力")
            }
            AccessibleButton(
                action: { },
                title: "送信",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

accessibilityLabel、accessibilityHint、minWidth/minHeight >= 48ptを備えたSwiftUIコンポーネントは、WCAG 2.5.8（Target Size）および2.5.3（Label in Name）への準拠を保証します。Xcode Accessibility Inspectorを使用して、VoiceOverフォーカス、ナビゲーション順序、タッチターゲットサイズを確認します。同様の要件は、Modifier.semanticsを介してJetpack Composeにも適用されます。