想象你正在规划一栋服务全体市民的商场。设计师不光要考虑“好看”，还要回答：坐轮椅的顾客怎么进大门？盲人怎么找到电梯？老人看不清指示牌怎么办？于是建筑行业有了一套《无障碍设计规范》，把“坡道宽度”“按键高度”“指示灯亮度”都写成可验收的硬指标。做网站也是一样，Web 内容无障碍指南（WCAG）就是网页世界的这套“建筑规范”。 WCAG 把无障碍要求拆成数十条可检验的“成功标准”，再按严格程度挂在三个等级下：A 级是“能用”，AA 级是“好用”，AAA 级是“极致体验”。绝大多数公司和法律把 AA 当作合规目标，而 AI 正在成为检测和治理这些标准的头号助手。这篇文章会用一座商场的改造故事，帮你把这套标准、三个等级和 AI 应用一次看懂。

岗位关联

一句话价值：懂得 WCAG 和 A/AA/AAA 的差异，是前端、产品与合规团队协作的基础；当你能把一个网站的合规等级说清楚，你就不再只是“写代码的人”，而是能推动产品质量和用户包容性的关键角色。

目录
  1. 可视化演示
  2. 1. 基础概念——WCAG 是什么
  3. 2. 四大原则——POUR 四铁律
  4. 3. 三个等级——A/AA/AAA 总览
  5. 4. A 级要点——基础无障碍
  6. 5. AA 级要点——主流基准
  7. 6. AAA 级要点——极致体验
  8. 7. 合规检测——工具与审计
  9. 8. AI 辅助——智能无障碍
  10. AI 应用场景
  11. Python 演示
  12. 常见误区
  13. 面试题

可视化演示

展示WCAG的POUR四大原则、A/AA/AAA三级合规标准差异及2.1与2.2版本新增准则对比。

本节配有交互动效（进入视口后自动加载，约 3KB）。

POUR四大原则 可感知：信息必须能被用户感知到 可操作：界面组件必须可操作 POUR=P+O+U+R 四大原则构建无障碍基础

1. 基础概念——WCAG 是什么

你负责建设一座服务全体市民的商场。施工队进场后，监工先递来一本《建筑无障碍设计规范》，里面不规定商场卖什么货、装什么吊灯，只规定“大门宽度不得小于 80 厘米”“坡道坡度不得超过 1:12”“电梯按钮离地 0.9 到 1.2 米”。这本规范是所有人使用建筑的最小公约数，也是验收时无法讨价还价的硬指标。对 Web 工程师来说，WCAG 就是这本“规范”。

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）由万维网联盟 W3C 发布。它从 1999 年的 1.0 走到 2008 年的 2.0，再到 2018 年的 2.1 和 2023 年的 2.2，每一版都保持向下兼容——符合 2.2 的网站必然符合 2.1。WCAG 2.2 相比 2.1 新增了 9 条成功标准，重点覆盖“键盘焦点是否显眼”“触摸目标是否够大”“认证流程是否有替代方案”这些新场景。它是全球法律引用最频繁的无障碍基准：美国的 ADA、欧洲《欧洲无障碍法案》、国内很多政务与金融合规要求，全都以它为依据。

WCAG 规范采用严格的三层金字塔：最顶层是 4 条原则，中间层是 13 条指南，最底层是数十条“成功标准”。每条成功标准都明确标注等级 A、AA 或 AAA，不存在“模糊地带”。

所以，当你听到“我们网站要过 AA”，它并不是一句口号，而是指“必须逐条满足 AA 清单上的每一道题”。就像商场验收时，监工会捧着规范一条条核对：坡道有了没有、宽度够不够、扶手装没装——少一项，验收就过不去。

WCAG={原则}×{指南}×{成功标准},∣指南∣=13\text{WCAG} = \{\text{原则}\} \times \{\text{指南}\} \times \{\text{成功标准}\},\quad |\text{指南}| = 13
通俗理解：WCAG 像一套层层拆解的验收清单——先定大原则，再把原则拆成操作步骤，最后变成能打勾的体检项。
  1. 集合描述法WCAG 的规范体系是一个三层嵌套结构，从上到下逐级细化。
    WCAG={原则}×{指南}×{成功标准}\text{WCAG} = \{\text{原则}\} \times \{\text{指南}\} \times \{\text{成功标准}\}
  2. 指南数量WCAG 2.2 官方定义为 13 条指南，每条指南下挂着若干成功标准。
    ∣指南∣=13|\text{指南}| = 13
  3. 版本增量从 2.1 到 2.2，新增 9 条成功标准，紧跟移动端和认知障碍的新需求。
    ∣WCAG 2.2∣=∣WCAG 2.1∣+9|\text{WCAG 2.2}| = |\text{WCAG 2.1}| + 9

2. 四大原则——POUR 四铁律

商场有一张四行大字报贴在工地上：顾客要能“看见”入口，这是可感知；顾客要能“走进”每个楼层，这是可操作；指示牌要能“看懂”，这是可理解；无论晴天暴雨标识系统都不能失效，这是健壮性。这四条，是商场无障碍设计的四铁律。

WCAG 把这四个英文词的首字母凑在一起：Perceivable、Operable、Understandable、Robust，正好拼成单词 POUR（倒水）。说起来很有意思——无障碍就像往杯子里倒水，任何一个环节断了，水就洒了。

展开来看：

  • 可感知：信息不能只靠一种感官传递。图片必须有替代文本，视频必须有字幕，颜色不能是唯一的提示手段。
  • 可操作：所有功能不能只靠鼠标完成——纯键盘、语音控制、眼动设备都能操作。
  • 可理解：界面文案没有歧义，导航位置可预测，报错信息能看懂。
  • 健壮性：代码与屏幕阅读器等辅助技术兼容，且随时间演进不失效。

四原则就是商场质检单的四个栏目。栏目本身不判定过不过，真正打勾的是栏目下的具体条款——也就是下一节即将登场的 A、AA、AAA 三个等级。

POUR={P, O, U, R}={可感知, 可操作, 可理解, 健壮性}\text{POUR} = \{P,\ O,\ U,\ R\} = \{\text{可感知},\ \text{可操作},\ \text{可理解},\ \text{健壮性}\}
通俗理解：四条原则像商场质检单上的四个栏目，下面再列具体检查项；所有 A/AA/AAA 条款都是从这四个栏目里长出来的。
  1. P—可感知用户必须能通过视觉、听觉或其他感官获取信息。
    P=可感知 (Perceivable)P = \text{可感知}\ (\text{Perceivable})
  2. O—可操作交互不能绑定单一设备，键盘、触屏、语音都要能完成操作。
    O=可操作 (Operable)O = \text{可操作}\ (\text{Operable})
  3. U—可理解文案、导航、报错都要让人一读就懂。
    U=可理解 (Understandable)U = \text{可理解}\ (\text{Understandable})
  4. R—健壮性代码结构能被辅助技术正确解析并长期兼容。
    R=健壮性 (Robust)R = \text{健壮性}\ (\text{Robust})

3. 三个等级——A/AA/AAA 总览

商场验收分三档。第一档是“能用但粗糙”：坡道有了，但窄到只能一个人推轮椅过；第二档是“舒适顺手”：坡道加宽还配了扶手，电梯直达每层；第三档是“极致体验”：自动门、专属引导员、手语服务，为最挑剔的需求而备。WCAG 的三个合规等级，几乎就是这三档验收标准。

  • A 级：清除最致命的障碍，保证某类用户不被完全挡在门外。比如没有替代文本的图片、纯鼠标才能点的按钮，都属于 A 级必须解决的问题。
  • AA 级：绝大多数法律法规和企业合规的基准线。在满足 A 的基础上，AA 再要求对比度、焦点可见、错误提示等“体验级”指标。
  • AAA 级：W3C 官方明确说不建议全站追求，因为部分要求（如手语翻译）成本极高，通常只建议对特定内容（帮助中心、核心操作流程）单独达标。

三个等级之间不是互相独立的评分体系，而是层层嵌套：网站满足 AA，自动满足 A；满足 AAA，自动满足前两者。

这就是为什么想宣称“我们达到 AAA”很难——它不是多选几道附加题，而是要把 A、AA、AAA 三层所有题目全部答完。想直接拿满分，得先把基础学分修够。

A⊂AA⊂AAAA \subset AA \subset AAA
通俗理解：等级就像楼房——AAA 级是第 3 层，要上到第 3 层，必须先通过第 1、2 层。
  1. 集合包含$A \subset AA$ 表示 A 级的全部要求都包含在 AA 级的要求集合里。
    A⊂AAA \subset AA
  2. 等级递进$AA \subset AAA$ 表示 AAA 级进一步包含了 AA 级的全部要求。
    AA⊂AAAAA \subset AAA
  3. 达标判定如果网站满足 AA 级，那么对 A 级中的任意一条成功标准也都自动满足。
    ∀ s∈A,满足 AA⇒满足 s\forall\ s \in A,\quad \text{满足 } AA \Rightarrow \text{满足 } s

4. A 级要点——基础无障碍

A 级像商场把坡道修好、给玻璃门贴上防撞条，目标只有一个：别把人挡在门外。它对设计美感没有任何要求，甚至不太讲究体验，只求“最低可用”。但恰恰是这条“最低线”，决定了盲人用户能不能用你的产品。

A 级成功标准专注处理四类最要命的问题。第一，替代文本：所有非文本内容（图片、图标、图表）必须有文字替代，让屏幕阅读器能读出来。第二，键盘操作：所有功能不能只绑定鼠标事件，用户 Tab 键走一遍就能完成全部操作。第三，字幕需求：预录视频必须提供同步字幕，聋人用户才能跟上内容。第四，页面要正确声明语言，辅助技术才知道用哪种语音库朗读。

为了量化“替代文本”这个要求，可以把它写成一条必须被满足的断言：页面中每一张图片，其 alt 属性都不能是空的。

A 级条款看起来最“笨”，但它是最诚实的一道门槛。很多团队急着冲 AA，回头一看，A 级还挂着一堆图片没有 alt、按钮不能键盘操作——就像商场还没铺好坡道就急着装电梯，本末倒置了。

∀ img∈页面,alt(img)≠∅\forall\ \text{img} \in \text{页面},\quad \text{alt}(\text{img}) \neq \varnothing
通俗理解：页面上每张图片都配了一句“画外音”；哪张图片没有画外音，A 级就判不通过。
  1. 全称量词$\forall$ 表示“遍历页面中所有图片，无一例外”。
    ∀ img∈页面\forall\ \text{img} \in \text{页面}
  2. 替代文本函数$\text{alt}(\text{img})$ 是图片的替代文本属性，$\varnothing$ 代表空字符串。
    alt(img)≠∅\text{alt}(\text{img}) \neq \varnothing
  3. 推论约束一旦存在任意一张图片缺失 alt，A 级整体判定即为不通过。
    ∃ img, alt=∅⇒不达标\exists\ \text{img},\ \text{alt} = \varnothing \Rightarrow \text{不达标}

5. AA 级要点——主流基准

如果说 A 级是“能用”，AA 级就是“好用”。商场把坡道加宽到两个轮椅能并排，电梯按钮加上凸起盲文，指示牌换成高对比度黑底白字。普通顾客几乎察觉不到这些变化，但需要的人会觉得：这地方的设计者，真的考虑过我。

AA 级在 A 级基础上增加了一批“体验级”指标，其中最常被检查的就是颜色对比度。WCAG 规定，普通大小文字的前景色与背景色对比度必须不低于 4.5:1。W3C 甚至给出了精确计算公式：先把 sRGB 颜色线性化，合成相对亮度，再做比值。

其中 $L_1$ 是较亮颜色的相对亮度，$L_2$ 是较暗颜色的相对亮度。这个数字不是拍脑袋定的，它经过大量实验：弱视用户在室内常见光照下，能稳定分辨的最低对比度就是 4.5:1 左右。

除了对比度，AA 级还要求：键盘焦点必须清晰可见（Tab 到哪，哪里要有高亮边框）；重复的导航组件在多个页面保持相同顺序；输入错误不但要提示，还要给出具体修改建议（例如“邮箱格式不正确，示例：name@example.com”）。

AA 级是大多数公司真正要过的关。它不会像 AAA 那样昂贵，又能覆盖绝大多数用户的实际需求，是性价比最高的合规目标。

C=L1+0.05L2+0.05≥4.5C = \frac{L_1 + 0.05}{L_2 + 0.05} \ge 4.5
通俗理解：对比度是“字能不能看清”的量化底线，像商场指示牌必须用深底浅字，而不是淡黄底配白字。
  1. 相对亮度每个颜色通道先做伽马解码，再按人眼敏感度加权，绿色权重最大。
    L=0.2126 Rlin+0.7152 Glin+0.0722 BlinL = 0.2126\,R_{\text{lin}} + 0.7152\,G_{\text{lin}} + 0.0722\,B_{\text{lin}}
  2. 对比度比值较亮亮度加 0.05 做分子，较暗亮度加 0.05 做分母，防止纯黑时除零。
    C=L亮+0.05L暗+0.05C = \frac{L_{\text{亮}} + 0.05}{L_{\text{暗}} + 0.05}
  3. AA 级阈值普通小号文本的对比度必须不少于 4.5。
    C≥4.5C \ge 4.5

6. AAA 级要点——极致体验

AAA 级是商场里的“最高礼遇”：进门有迎宾人员全程陪同，广播配手语翻译，关键区域铺设盲道和震动提示。每一处都在为少数用户投入超额资源，代价不低，效果却极其温暖。

AAA 级在 AA 基础上追加三项标志性要求。第一，极致对比度：普通文本的对比度从 4.5:1 提升到 7:1，确保弱视用户在强光环境下也能看清。第二，手语翻译：所有预录视频必须内置手语翻译画面，注意这不是字幕，而是真人手语窗口。第三，扩展字幕：字幕不只覆盖对白，连风声、脚步声、门铃声等音效都要用文字描述。

可以把它写成一组必须同时成立的条件：

正因为这些要求成本高，W3C 才明确建议不要在整站范围盲目追求 AAA。正确姿势是：主流程做 AA，帮助中心、无障碍说明页这类“关键时刻”单独做 AAA。

CAAA≥7∧手语∈视频轨道∧字幕⊇全部声音信息C_{\text{AAA}} \ge 7 \quad \land \quad \text{手语} \in \text{视频轨道} \quad \land \quad \text{字幕} \supseteq \text{全部声音信息}
通俗理解：AAA 级等于把“看得见”的标准拉到极致，还额外配了手语向导和对全部声音的文字转述。
  1. 对比度升级同样的对比度公式，达标线从 4.5 抬升到 7，视觉辨识更轻松。
    CAAA≥7C_{\text{AAA}} \ge 7
  2. 手语嵌入预录视频媒体中必须包含手语翻译轨道。
    手语∈视频轨道\text{手语} \in \text{视频轨道}
  3. 扩展字幕覆盖字幕集合要包含所有声音信息，而不只是人物对白。
    字幕⊇全部声音信息\text{字幕} \supseteq \text{全部声音信息}

7. 合规检测——工具与审计

商场完工后，要请第三方机构验收。自动扫描工具像一台电子检测仪，刷地扫过墙面，能查出“这盏应急灯没亮”；但它查不出“应急灯位置放得是否顺手”——那得靠专家亲手推着轮椅走一遍。WCAG 合规检测，正是这两种手段的配合。

自动检测：常见的工具包括 axe-core、Lighthouse、WAVE。它们能快速发现约 30%～40% 的成功标准问题，比如缺 alt、对比度不足、ARIA 属性错误。自动检测可以集成进 CI/CD，每次提交代码都跑一遍，是性价比最高的事前拦截。

人工审计：剩余 60%～70% 的标准，比如“alt 描述是否准确”“焦点顺序是否自然”“按钮语义是否合理”，机器判断不了，需要认证专家按照 W3C 的 WCAG-EM（评估方法论）逐步核查，并配合 NVDA、VoiceOver 等真实读屏软件做用户测试。最终验收：出具 VPAT（自愿产品无障碍模板）报告，对目标级别下的每一条成功标准标注“支持 / 部分支持 / 不支持”。

WCAG 的合规判定是“全有或全无”：

好比消防验收：十个灭火器坏了一个，验收就是不通过，哪怕坏的那个藏在楼梯间角落。合规审计要的就是这种“零容忍”态度。

R=N通过N要求×100%=100%R = \frac{N_{\text{通过}}}{N_{\text{要求}}} \times 100\% = 100\%
通俗理解：WCAG 没有“及格线”这回事。目标 AA，就必须 100% 满足 AA 和 A 的所有条目，缺一条都不算合规。
  1. 通过项$N_{\text{通过}}$ 表示你已满足的成功标准数量。
    N通过N_{\text{通过}}
  2. 要求项$N_{\text{要求}}$ 表示目标等级下必须满足的标准总数。
    N要求N_{\text{要求}}
  3. 严格达标比例必须精确等于 100%，99% 和 0% 在合规判定上都是“不通过”。
    R=N通过N要求×100%R = \frac{N_{\text{通过}}}{N_{\text{要求}}} \times 100\%

8. AI 辅助——智能无障碍

商场进入日常运营后，请了一位不知疲倦的 AI 巡检员。它每晚走遍每个楼层拍照、对着规范自动比对，天亮前生成一份问题清单，还附上维修建议。但它永远不会说“全修好了”——最终拍板的还是人。

AI 在 WCAG 合规流程里有三个典型角色。智能扫描：把 axe-core 集成进 CI，每次代码提交自动跑无障碍检测，AI 把原始错误堆栈整理成“哪个组件、哪一行、违反哪条标准”的可读报告。修复建议：大模型针对缺失的 alt 文本自动生成描述草稿；对错误的 ARIA 标签给出修正代码；对对比度不足的颜色对推荐替代色。持续监控：定时抓取核心页面，自动生成合规趋势报告，发现等级回落立刻告警。

但要清醒：AI 不是神。它可能漏判，也可能误报。我们用“召回率”来度量它的能力：

AI 在这条流水线里像一个永不出差的助手：它让“发现”更快、报告更清晰、修复更省力，但“标准是什么”“怎么改最合适”仍要由人定夺。最高效的团队，是人和 AI 各司其职。

召回率=∣自动发现的问题∣∣全部真实问题∣≤1\text{召回率} = \frac{|\text{自动发现的问题}|}{|\text{全部真实问题}|} \le 1
通俗理解：召回率是“真实问题里 AI 找到多少”。上限是 1，意味着 AI 最好也只能找全，永远做不到“找对每一处”。
  1. 召回率定义召回率等于自动发现的问题数除以真实存在的问题总数。
    Recall=∣自动发现问题∣∣真实问题∣\text{Recall} = \frac{|\text{自动发现问题}|}{|\text{真实问题}|}
  2. 集合大小关系发现的集合不可能大于真实的集合，所以比值最大是 1。
    ∣自动发现问题∣≤∣真实问题∣|\text{自动发现问题}| \le |\text{真实问题}|
  3. 人工兜底正因为 $\le 1$ 恒成立，高风险项的最终确认必须保留人工环节。
    Recall≤1\text{Recall} \le 1

AI 应用场景

场景1：无障碍合规自动审计

阶段：质量检测

解决的问题：对照 WCAG 清单手动审计一个页面要花大半天，几百个页面做下来，漏项是常事。AI 先用 axe-core 自动扫描代码级问题（缺失 alt、对比度不足、ARIA 错误），再由大模型把原始报告整理成“问题-位置-修复建议”的可读清单，人工只复核语义层面的判断，审计效率提升数倍。

具体案例：某银行手机银行要做 AA 合规改造。团队在 CI 里接入自动扫描，每天跑 200 个核心页面；Lighthouse 输出对比度评分，AI 把不合格的颜色对按“修改成本-影响用户数”排序，生成工单自动分配给对应前端。一周内 A 级问题清零，两个月通过 AA 外部审计。

场景2：商品图片 alt 自动生成

阶段：内容增强

解决的问题：电商平台几十万张商品图没有替代文本，雇人逐张写不现实。视觉-语言模型能理解图片内容，生成描述性 alt 草稿（例如“银色金属外壳无线耳机，配黑色充电盒”），再经人工抽检后批量上线。这让 A 级“非文本内容必须有替代文本”这条标准从不可能变为可能。

具体案例：某电商团队用视觉模型处理 30 万张商品图，alt 覆盖率从 58% 提升到 97%，A 级违规从上千条降到几十条；人工抽检 5% 的样本，将错误率控制在 1% 以内。

场景3：合规周报自动生成与监控预警

阶段：监控预警

解决的问题：合规不是一次性的——每次发版、每张新上传的图片都可能引入新违规。AI 巡检每周定时抓取核心页面，跑全量检测后自动汇成报告：“本周 AA 符合率 83%，环比下降 5%，主因是促销页对比度不达标”，并按严重程度自动派发修复工单。

具体案例：某政务网站把 200 个频道纳入自动巡检，每周一自动产出无障碍周报，问题页面自动生成工单，整改后自动复验。该网站连续三个季度保持 AA 级，审计成本降低约 70%。

Python 演示

python55 行
def linearize(channel):    """将 sRGB 通道值转换为线性亮度度量"""    c = channel / 255.0    if c <= 0.03928:        return c / 12.92    return ((c + 0.055) / 1.055) ** 2.4  def relative_luminance(rgb):    """计算 WCAG 定义的相对亮度"""    r = linearize(rgb[0])    g = linearize(rgb[1])    b = linearize(rgb[2])    return 0.2126 * r + 0.7152 * g + 0.0722 * b  def contrast_ratio(fg, bg):    """计算两组 RGB 颜色间的对比度"""    l1 = relative_luminance(fg)    l2 = relative_luminance(bg)    if l1 < l2:        l1, l2 = l2, l1    return (l1 + 0.05) / (l2 + 0.05)  def wcag_level(ratio, is_large_text=False):    """根据比例返回 AA/AAA 或 '不通过'"""    if is_large_text:        if ratio >= 4.5:            return 'AAA'        if ratio >= 3.0:            return 'AA'    else:        if ratio >= 7.0:            return 'AAA'        if ratio >= 4.5:            return 'AA'    return '不通过'  def main():    cases = [        ((0, 0, 0), (255, 255, 255), False),        ((120, 120, 120), (255, 255, 255), False),        ((255, 255, 255), (0, 0, 0), True),        ((200, 200, 200), (255, 255, 255), False),    ]    for fg, bg, large in cases:        ratio = contrast_ratio(fg, bg)        level = wcag_level(ratio, large)        print('前景%s 背景%s 比例%.2f:1 等级%s' % (fg, bg, ratio, level))  if __name__ == '__main__':    main()
目的：给定前景色与背景色的 RGB 值，自动计算 WCAG 对比度并输出 AA/AAA 合规等级。
  1. if c <= 0.03928:亮度极低时人眼感知接近线性，使用分段函数避免高次幂在暗部失真。
  2. return ((c + 0.055) / 1.055) ** 2.4sRGB 的伽马解码，把“编码值”还原成“物理亮度值”。
  3. return 0.2126 * r + 0.7152 * g + 0.0722 * b人眼对绿色最敏感，所以绿色权重最高。
  4. if l1 < l2: l1, l2 = l2, l1交换两亮度值，保证较亮色永远在分子，对比度结果始终大于等于 1。
  5. return (l1 + 0.05) / (l2 + 0.05)分子分母各加 0.05，防止极端黑导致除零，这是 WCAG 官方公式。
  6. if ratio >= 7.0:7:1 是普通文本的 AAA 级底线；4.5:1 则是 AA 级底线。

常见误区

误区我们网站又没做给盲人用，用户里没有视障者，无障碍改造没必要花时间。

正解WCAG 服务的对象远不止盲人，还包括低视力、色盲、听觉障碍、运动障碍、认知障碍，以及大量“临时性障碍”人群——比如手臂受伤只能用键盘的工程师、在户外强光下看不清屏幕的用户、环境嘈杂必须看字幕的人。商场坡道不只是给轮椅用的，推婴儿车、拉行李箱的人都在受益。

为何常见：因为“无障碍”三个字让人条件反射地联想到“视障”，忽略了情境性障碍其实人人都会遇到。

误区Lighthouse 跑出来 100 分，所有检查项都绿了，我们的网站肯定符合无障碍标准。

正解自动工具最多覆盖约 30%～40% 的成功标准。它能查“alt 是否存在”，但查不出“alt 描述是否准确”；能查“对比度数值”，但查不出“焦点顺序是否顺手”。要正式宣称合规，必须有专家按 WCAG-EM 方法做人工审计，配合真实读屏软件测试，再出具 VPAT 报告。

为何常见：程序输出自带“权威感”，而且审计报告长得很专业，容易让人误以为机器已经替人做了全部判断。

误区既然存在 AAA 级，说明它最好，我们直接全站按 AAA 来做，一步到位不是更省事？

正解W3C 官方明确建议不要追求全站 AAA。因为手语翻译、扩展字幕等标准的成本极高，而且对手语用户之外的人反而可能造成干扰。正确做法是主流程做 AA，帮助中心、无障碍说明等关键页面单独做 AAA，把资源花在刀刃上。

为何常见：人们习惯用“等级越高越好”的直觉思考，忽略了无障碍设计本质上是在不同需求之间做平衡。

误区对比度 21:1 的纯黑配纯白肯定最清晰，把所有页面都改成黑底白字不就好了？

正解高对比度确实容易辨识，但纯黑白长时间阅读会引发视觉疲劳和残像感。WCAG 的数字只是“下限门槛”，不是“最优目标”。深灰配浅灰、品牌色做多层级搭配，也能稳定通过 AA，同时让阅读更舒适。

为何常见：因为人们把考试及格线当成了满分标准，忽略了人眼舒适区。

误区这个季度我们把 alt 和对比度全改完了，也通过审计了，以后不用再管无障碍了。

正解网站每周都在变——新功能上线、运营传新图、组件库升级，都可能引入新的违规。无障碍是持续运营，不是一次性项目。标准做法是把自动扫描接入 CI，每次提交跑一遍，合并后人工复查变更页面。

为何常见：人们习惯把它当作“修 bug”式的项目，没意识到内容持续变化必然带来合规状态的持续变化。

面试题

Q1. WCAG 四大原则的英文缩写是？

单选题 · easy

  • A.POUR（四项原则首字母）← 正确答案
  • B.WAI-ARIA 的缩写名称
  • C.WCAG 的版本编号规则
  • D.HTML 的语义标签体系

答案：A。四大原则分别是可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮性（Robust），首字母正好拼成 POUR。WAI-ARIA 是另一套辅助技术规范，WCAG 和 HTML 的缩写与四大原则无关。

Q2. WCAG 2.2 相比 2.1 主要增加了哪类要求？

单选题 · easy

  • A.焦点外观目标尺寸认证相关要求← 正确答案
  • B.颜色偏好字体大小动效减速设置
  • C.网络协议缓存策略压缩算法优化
  • D.用户登录支付流程订单管理功能

答案：A。WCAG 2.2 新增的 9 条成功标准集中在键盘焦点可见性（2.4.11）、触摸目标最小尺寸（2.5.8）、拖拽替代操作（2.5.7）和无障碍认证流程（3.3.8/3.3.9）等方向。颜色偏好、网络优化和支付功能都不是 WCAG 的范畴。

Q3. 普通小号文本达到 AA 级的最低对比度是？

单选题 · easy

  • A.对比度 4.5 比 1← 正确答案
  • B.对比度 3 比 1
  • C.对比度 7 比 1
  • D.对比度 1.5 比 1

答案：A。WCAG 规定普通文本的 AA 级对比度下限为 4.5:1；3:1 是大文本（18pt 以上或 14pt 粗体）的 AA 要求；7:1 是普通文本的 AAA 要求，属于更严格的档位。

Q4. 键盘可操作性要求属于哪个 WCAG 原则？

单选题 · mid

  • A.可操作原则← 正确答案
  • B.可感知原则
  • C.可理解原则
  • D.健壮性原则

答案：A。“所有功能都能只用键盘完成”正是可操作（Operable）原则的定义。可感知管“能不能接收到信息”，可理解管“内容是否易懂”，健壮性管“代码能否被辅助技术解析”。

Q5. 以下属于 A 级成功标准的有？（多选）

多选题 · mid

  • A.图片要提供替代文本说明← 正确答案
  • B.所有功能都必须支持键盘完成← 正确答案
  • C.预录视频必须内置手语翻译画面
  • D.正文字体对比度必须达到七比一

答案：AB。A 级要求图片有替代文本（对应 1.1.1）、核心功能可用键盘操作（对应 2.1.1）。手语翻译是 AAA 级标准，正文对比度 7:1 也是 AAA 级标准，都不属于 A 级。

Q6. 多数法律合规以哪个等级作为强制基准？

单选题 · easy

  • A.AA 等级← 正确答案
  • B.AAA 等级
  • C.A 等级
  • D.不要求等级

答案：A。全球主流法规（如美国 ADA、欧洲无障碍法案的落地实践）都把 AA 级作为合规基准。A 级太低，不能满足体验要求；AAA 级成本过高，不适宜普遍强制。

Q7. 大文本达到 AA 级对比度需满足？

单选题 · mid

  • A.对比度 3 比 1← 正确答案
  • B.对比度 4.5 比 1
  • C.对比度 7 比 1
  • D.对比度 1 比 1

答案：A。WCAG 对大文本（18pt 以上）放宽了要求，AA 级只需 3:1，因为大字号本身更容易辨别。普通小号文本才要求 4.5:1，7:1 则是对普通文本的 AAA 级要求。

Q8. 以下属于 WCAG 2.2 新增标准的有？（多选）

多选题 · mid

  • A.焦点外观与可用性检测标准← 正确答案
  • B.拖拽移动的无障碍替代操作← 正确答案
  • C.手语翻译视频必须同步嵌入
  • D.预录视频字幕必须完整显示

答案：AB。WCAG 2.2 新增了焦点外观（2.4.11）和拖拽移动替代方式（2.5.7）等标准。手语翻译和视频字幕是更早版本（2.0 就已存在）的标准，不是 2.2 的新增项。

Q9. 前景亮度 0.40、背景亮度 0.06 时的对比度为？

单选题 · hard

  • A.对比度结果为 4.09 比 1← 正确答案
  • B.对比度结果为 3.25 比 1
  • C.对比度结果为 6.67 比 1
  • D.对比度结果为 5.75 比 1

答案：A。代入公式 C = (L1 + 0.05) / (L2 + 0.05) = (0.40 + 0.05) / (0.06 + 0.05) = 0.45 / 0.11 ≈ 4.09。这个值介于 4.5 以下，因此普通小号文本不能达到 AA 级。

Q10. 下列关于合规等级集合关系的说法正确的是？（多选）

多选题 · hard

  • A.满足 AA 的网站自动满足 A 级← 正确答案
  • B.满足 AAA 的网站自动满足 AA 级← 正确答案
  • C.满足 AAA 的网站无需满足任何 A 级
  • D.A 与 AA 是互斥且彼此独立的等级

答案：AB。WCAG 的等级是层层包含的：AA 包含 A 的全部要求，AAA 又包含 AA 的全部要求。所以 C 和 D 与集合关系矛盾——AAA 必须包含 A，A 与 AA 也不是互斥关系。