WCAG — 什么是 Web 内容无障碍指南及 AA 级别

什么是 WCAG？

WCAG（Web 内容无障碍指南）— 为确保残障人士能够访问 Web 内容而制定的一系列建议。该标准自 1999 年起由 W3C Web 无障碍倡议 (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 以及美国的 Section 508 — 都要求符合 WCAG AA 标准。对于企业网站和政府网站，WCAG AA 是强制性标准，不遵守将导致诉讼。根据 UsableNet（2024 年）的数据，美国提起了超过 12,000 起关于网站不可访问性的诉讼。

WCAG 版本比较

不合规的法律后果

不遵守 WCAG 会带来严重风险。2025 年，European Accessibility Act (EAA) 生效，要求欧盟所有公共网站和移动应用程序符合 WCAG 2.1 AA。罚款可达公司年营业额的 5%。美国诉讼的平均和解金额为 25,000–50,000 美元。可访问性审计应在开发的每个阶段进行，而不仅仅是在发布前。

WCAG 四项原则：POUR

POUR — 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) — 最关键的标准之一：所有功能必须可通过键盘操作，无需鼠标。仅通过点击关闭的模态窗口、没有键盘导航的下拉菜单 — 典型的违规行为。

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 定义了三个级别：A（最低）、AA（标准）和 AAA（最高）。A 级别 — 强制最低要求：没有它，内容对某些类别的用户无法访问。AA 消除了主要的可访问性障碍。AAA — 最高标准，但并非对所有内容都能实现（例如，某些手语或音频转录并非总是可行）。

A 级别（30 个标准）：文本替代、键盘操作、充足时间、无高于 3 Hz 的闪烁。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) — 焦点指示器 >= 2px，对比度 3:1；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 的自定义按钮，使用 box-shadow 代替 outline。

CSS 中的焦点外观

/* 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 的样式设置确保符合焦点外观标准。通过 box-shadow 的替代方案适用于带有 border-radius 的元素。深色主题和高对比度模式会调整焦点颜色。

无障碍身份验证

标准 3.3.7 Accessible Authentication (AA) — 最具争议的创新之一。带有对象识别的 CAPTCHA、谜题、拖动滑块 — 如果没有替代方案，现属违规行为。允许的方法：通过电子邮件/SMS 发送 OTP、生物识别（Face ID、Touch ID）、QR 码、Magic link。这不仅方便了认知障碍人士，也方便了所有用户。

移动应用程序的 WCAG

WCAG 适用于原生 iOS 和 Android 应用程序。四项 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（目标大小）和 2.5.3（名称中的标签）。使用 Xcode Accessibility Inspector 检查 VoiceOver 焦点、导航顺序和触摸目标尺寸。类似要求通过 Modifier.semantics 适用于 Jetpack Compose。