人間中心設計で静的サイトの利用可能性を監査する

到達目標

1. WCAG 2.2 Level AAを基準に、キーボード、200%ズーム、読み上げ順を再現可能に監査できる

   • キーボード、ズーム、読み上げ、ユーザビリティの監査記録
   • 標準の地位、観測限界、手動確認を含む監査判断

2. 適合確認とISO 9241-210:2019に基づく利用者タスクの評価を区別できる

   • キーボード、ズーム、読み上げ、ユーザビリティの監査記録
   • 適合、アクセシビリティ、ユーザビリティの境界を説明する5分発表

3. WCAG 3.0 Working DraftとAPCAをWCAG 2.2適合主張へ混同せず、入力方式を変えて再評価できる

   • 標準の地位、観測限界、手動確認を含む監査判断
   • 入力方式だけを変えた再監査の差分と不変条件

能力の進行

1. recognize

   WCAG 2.2 Level AA、WCAG-EM、ISO 9241-210:2019の役割を区別できる

   証拠: キーボード、ズーム、読み上げ、ユーザビリティの監査記録

2. explain

   自動検査合格が読み上げ順や利用者タスクの成功を保証しない理由を説明できる

   証拠: 適合、アクセシビリティ、ユーザビリティの境界を説明する5分発表

3. apply

   固定fixtureでkeyboard、200% zoom、reading order、usabilityを観測できる

   証拠: キーボード、ズーム、読み上げ、ユーザビリティの監査記録

4. diagnose

   失敗を知覚、操作、理解、堅牢性、利用者タスクへ切り分け、反証を残せる

   証拠: 標準の地位、観測限界、手動確認を含む監査判断

5. lead

   適合範囲、手動確認、残余リスク、再評価条件を関係者と合意できる

   証拠: 入力方式だけを変えた再監査の差分と不変条件

なぜ重要か

生成サイトが表示できても、keyboardだけでは到達できない、200% zoomで内容が欠ける、reading orderが意味順と一致しない、目的のタスクを完了できないことがある。品質を「自分の環境で見えた」から利用者が検証できる契約へ変えるには、入力、期待、実測、判定、限界を監査記録へ残す必要がある。

このレッスンの規範的targetはWCAG 2.2 Level AAである。WCAG-EM 1.0を評価手順、ISO 9241-210:2019を人間中心設計とusabilityの枠組みに使う。WCAG 3.0はWorking Draftであり、APCAとともにWCAG 2.2適合の規範ではない。

メンタルモデル

監査を「基準を選ぶ、範囲を固定する、期待を操作可能なcheckへ落とす、実測する、差分を修正へ結ぶ」の循環として扱う。規範へのconformanceと、特定の人が目的を達成できるusabilityは重なるが同義ではない。

一つのcheckは、対象、操作、期待、actual、passed、証拠を持つ。failedを消すのではなく、利用者影響、修正、再試験へ追跡する。入力方式だけを変えるtransferでは、ページと期待結果を固定し、どのcheckが変わるかを観測する。

動く例で考える

固定fixtureから生成サイト監査を導出する

前提

generated-static-curriculumを対象とするlesson-defined synthetic fixtureであり、productionの適合認証ではない。WCAG 2.2 RecommendationのLevel AAをtargetにする。

入力

keyboard、zoom-200、reading-order、usabilityの4観測を使う。各観測は期待値とactualを持ち、usabilityに意図的な差分を1件残す。

操作

actualとexpectedの等価性からpassedを導出し、合格数と失敗数を計算する。pointer中心からkeyboard-onlyへinput modeを変更し、mode別operationとactualを同じ4 dimensionで比較する。

観測

pointer-primaryは3/4、keyboard-onlyは2/4がpassする。transfer後もページ、WCAG target、期待結果は不変だが、keyboard dimensionのoperationとactualが変わり、入力方式に結び付くcheck IDとsummaryも変わる。

結論

監査記録は「問題なし」という印象ではなく、差分を保持する因果証拠である。このfixtureだけからサイト全体のconformance claimは行わない。

python3.13 - <<'PY'
import json

HARNESS = "hci_accessibility_audit_lab_v1"
SITE = "generated-static-curriculum"
OBSERVATION_FIXTURE = [
    {
        "dimension": "keyboard",
        "expected": "all-controls-reachable-and-focus-visible",
        "actual_by_input_mode": {
            "pointer-primary": "all-controls-reachable-and-focus-visible",
            "keyboard-only": "focus-visible-but-navigation-traps",
        },
        "operation_by_input_mode": {
            "pointer-primary": "click-each-control-in-visual-order",
            "keyboard-only": "tab-and-activate-each-control",
        },
    },
    {
        "dimension": "zoom-200",
        "expected": "no-content-loss-or-two-dimensional-scroll",
        "actual_by_input_mode": {
            "pointer-primary": (
                "no-content-loss-or-two-dimensional-scroll"
            ),
            "keyboard-only": (
                "no-content-loss-or-two-dimensional-scroll"
            ),
        },
        "operation_by_input_mode": {
            "pointer-primary": "zoom-with-pointer-menu-to-200-percent",
            "keyboard-only": "zoom-with-keyboard-shortcut-to-200-percent",
        },
    },
    {
        "dimension": "reading-order",
        "expected": "dom-order-matches-meaning-order",
        "actual_by_input_mode": {
            "pointer-primary": "dom-order-matches-meaning-order",
            "keyboard-only": "dom-order-matches-meaning-order",
        },
        "operation_by_input_mode": {
            "pointer-primary": "inspect-visual-reading-sequence",
            "keyboard-only": "traverse-focus-and-reading-sequence",
        },
    },
    {
        "dimension": "usability",
        "expected": "five-of-five-tasks-completed",
        "actual_by_input_mode": {
            "pointer-primary": "four-of-five-tasks-completed",
            "keyboard-only": "four-of-five-tasks-completed",
        },
        "operation_by_input_mode": {
            "pointer-primary": "complete-five-tasks-with-pointer",
            "keyboard-only": "complete-five-tasks-with-keyboard-only",
        },
    },
]

def derive_observations(fixture, input_mode):
    observations = []
    for index, source in enumerate(fixture, start=1):
        observation = dict(source)
        observation["check_id"] = (
            f"{input_mode}-{index}-{source['dimension']}"
        )
        observation["input_mode"] = input_mode
        actual = source["actual_by_input_mode"][input_mode]
        observation["actual"] = actual
        operation = source["operation_by_input_mode"][input_mode]
        observation["operation"] = operation
        observation.pop("actual_by_input_mode")
        observation.pop("operation_by_input_mode")
        passed = observation["actual"] == observation["expected"]
        observation["passed"] = passed
        observations.append(observation)
    return observations

def summarize(observations):
    passed = sum(item["passed"] for item in observations)
    return {
        "total": len(observations),
        "passed": passed,
        "failed": len(observations) - passed,
    }

def mastery_evidence():
    return {
        "lab_steps": [
            {"step": 1, "evidence": "site、task、target、scopeを固定"},
            {"step": 2, "evidence": "keyboardのexpectedとactual"},
            {"step": 3, "evidence": "zoom-200とreading-orderの観測"},
            {"step": 4, "evidence": "usability差分とmanual review"},
            {"step": 5, "evidence": "input-modeだけを変えたcheck差分"},
        ],
        "assessments": [
            {"assessment": 1, "evidence": "自動化範囲と手動観測の区別"},
            {"assessment": 2, "evidence": "規範targetと非標準候補の分離"},
        ],
        "rubric_dimensions": [
            "technical-correctness",
            "judgment",
            "evidence",
            "communication",
        ],
        "transfer": {
            "task": (
                "pointer操作中心からkeyboard-only利用へ入力方式だけを変え、"
                "生成サイト監査を再評価する"
            ),
            "changed_assumption": "input-mode",
            "evidence": "同じpage、target、expectedでcheckを再導出",
        },
    }

def main():
    baseline = derive_observations(OBSERVATION_FIXTURE, "pointer-primary")
    transferred = derive_observations(
        OBSERVATION_FIXTURE,
        "keyboard-only",
    )
    expected_passes = [
        item["actual_by_input_mode"]["pointer-primary"]
        == item["expected"]
        for item in OBSERVATION_FIXTURE
    ]
    assert (
        [item["passed"] for item in baseline] == expected_passes
    ), "hci-causal-invariant"
    assert summarize(baseline)["failed"] == 1, "hci-causal-invariant"
    baseline_actual = {
        item["dimension"]: item["actual"]
        for item in baseline
    }
    transferred_actual = {
        item["dimension"]: item["actual"]
        for item in transferred
    }
    changed_dimensions = [
        dimension
        for dimension in baseline_actual
        if baseline_actual[dimension] != transferred_actual[dimension]
    ]
    assert "keyboard" in changed_dimensions, "hci-input-mode-invariant"
    baseline_summary = summarize(baseline)
    transferred_summary = summarize(transferred)
    assert (
        baseline_summary != transferred_summary
    ), "hci-input-mode-invariant"
    report = {
        "harness": HARNESS,
        "site_under_audit": SITE,
        "standards": {
            "normative_target": {
                "name": "WCAG",
                "version": "2.2",
                "level": "AA",
                "status": "W3C Recommendation",
                "date": "2024-12-12",
            },
            "human_centred_design": "ISO 9241-210:2019",
            "non_normative_candidates": {
                "WCAG 3.0": "W3C Working Draft 2026-03-03",
                "APCA": "not-a-WCAG-2.2-conformance-standard",
            },
        },
        "audit": {
            "observations": baseline,
            "summary": summarize(baseline),
            "manual_review_required": True,
            "conformance_claim": False,
        },
        "input_mode_transfer": {
            "changed_assumption": "input-mode",
            "changed_fields": ["input_mode"],
            "unchanged": {
                "page_fixture": True,
                "wcag_target": True,
                "expected_outcomes": True,
            },
            "baseline_check_ids": [
                item["check_id"] for item in baseline
            ],
            "transferred_check_ids": [
                item["check_id"] for item in transferred
            ],
            "baseline_observations": baseline,
            "transferred_observations": transferred,
            "changed_dimensions": changed_dimensions,
            "baseline_summary": baseline_summary,
            "transferred_summary": transferred_summary,
        },
        "fixture_metadata": {
            "kind": "synthetic",
            "provenance": (
                "lesson-defined generated static curriculum observations"
            ),
            "limitations": (
                "not a production audit or a complete conformance claim"
            ),
        },
        "runtime_bound": {
            "records": len(baseline) + len(transferred),
            "subprocesses": 0,
        },
        "mastery_evidence": mastery_evidence(),
        "external_network_used": False,
    }
    return report

print(json.dumps(main(), ensure_ascii=False, indent=2))
PY

トレードオフと失敗モード

• 誤診: automated checkerが0件を報告したのでサイトはWCAG 2.2 Level AAに完全適合する。反証: keyboardの操作順、reading orderの意味、usabilityのタスク成功は自動結果だけで証明できず、WCAG-EMのscopeと手動証拠が必要である。
• 誤診: APCAは新しいcontrast計算なのでWCAG 2.2の比率に置き換えてよい。反証: この監査の規範targetはWCAG 2.2であり、APCAは非標準の候補として分離する。Working DraftのWCAG 3.0も同じ適合根拠にはできない。
• 失敗モード: 200% zoomで見た目を戻すため文字を小さくすると、reflow問題を隠して利用者の可読性を悪化させる。
• 失敗モード: DOM順を変えず視覚位置だけをCSSで入れ替えると、見た順と読み上げ順が分岐する。

知識チェック

1. WCAG 2.2 Level AAのconformanceと特定タスクのusabilityはどう違うか。
2. 200% zoomで保持すべき内容と操作を二つ挙げよ。
3. reading orderを視覚順だけで判定できない理由は何か。
4. input modeだけを変えるtransferで固定すべき条件は何か。

出典と次の学習

適合targetはWeb Content Accessibility Guidelines 2.2のRecommendation、評価手順はWCAG-EM 1.0、人間中心設計はISO 9241-210:2019へ版を固定する。W3C Accessibility Guidelines 3.0は03 March 2026のWorking Draftとして地位を明示し、APCAとともに非標準候補へ分離する。

次は、roadmapとquantitative chartをsemantic HTMLとCSSで表し、視覚表現と同じ関係と値を同等のテキスト構造へ残す。

実践ラボ

生成済み静的カリキュラムをWCAG 2.2 Level AAで監査する

提出成果物: キーボード、ズーム、読み上げ、ユーザビリティの監査記録

1. generated-static-curriculumのページfixture、利用者タスク、適合範囲、除外事項を固定する
2. keyboard操作の到達順、フォーカス可視性、操作完了を観測し、期待値と比較する
3. 200% zoomでreflow、欠落、重なりを確認し、reading orderを文書順と照合する
4. 代表利用者タスクのusabilityを成功条件と観測証拠で評価し、手動確認と残余リスクを記録する
5. 同じページ、WCAG target、期待結果のままpointer中心からkeyboard-onlyへinput modeだけを変えて再監査する

説明して理解を確かめる

5分で、WCAG 2.2 Level AAへの適合主張、WCAG-EMの評価手順、ISO 9241-210:2019の人間中心設計、WCAG 3.0とAPCAの非標準扱いを説明する。

アセスメント

1. 問い: 自動検査が全件合格した生成サイトを、なぜkeyboardとreading orderで手動確認するのか。

   期待する証拠: 自動化の観測範囲、操作順、意味順、タスク成功、支援技術差異、適合主張の限界

2. 問い: APCAの値を満たしたためWCAG 2.2 Level AA適合と報告してよいか。

   期待する証拠: 規範的target、非標準候補、WCAG 3.0 Working Draft、手動証拠、主張範囲の区別

別問題へ転用する

pointer操作中心からkeyboard-only利用へ入力方式だけを変え、生成サイト監査を再評価する

復習スケジュール

1. 1日後

   自動検査だけでは証明できないkeyboard観測を一つ挙げる

2. 7日後

   WCAG 2.2適合とISO 9241-210:2019のusability評価はどう異なるか

3. 30日後

   WCAG 3.0とAPCAを適合報告でどう位置付けるか

4. 90日後

   自動検査だけでは証明できないkeyboard観測を一つ挙げる

評価ルーブリック

出典

以下の外部資料は利用者が選択したときだけ開きます。

• Web Content Accessibility Guidelines (WCAG) 2.2 (standard)
• Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 (standard)
• ISO 9241-210:2019 - Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems (standard)
• W3C Accessibility Guidelines (WCAG) 3.0 Working Draft 03 March 2026 (primary)