W3C删掉1条标准，前端工程师反而更忙了

2024年12月12日，WCAG 2.2正式成为W3C推荐标准。距离上一个版本2.1发布已过去5年，这次更新直接新增9条成功标准，同时删除1条。如果你团队还在用2.1当合规基线，W3C的官方态度很明确：建议直接上2.2，否则未来的可访问性工作可能白做。

欧盟、英国、美国的监管机构正在把政策对齐到最新版本，这不是技术圈的自嗨，是实打实的合规压力。

被删掉的那条叫4.1.1 Parsing，原本要求HTML格式良好，方便辅助技术解析。删除原因很简单：现代浏览器和屏幕阅读器已经足够皮实，能处理乱七八糟的标记而不崩溃。这条标准不再能预测真实世界的可访问性问题，工作组干脆拿掉。

但这里有个坑。如果你的组织合同里明确写了要符合WCAG 2.0或2.1，4.1.1可能还得单独测、单独报。只有全新的2.2审计，这条才算彻底消失。

新增标准1：焦点不能"人间蒸发"

2.4.11 Focus Not Obscured (Minimum) 是这次最扎眼的新标准。键盘聚焦到某个元素时，这个元素不能被作者创建的内容完全遮住。部分遮挡可以，彻底消失不行。

谁受害最深？用键盘导航的人——运动障碍用户、开关设备用户、还有那些不用鼠标的高级用户。固定顶栏、悬浮 cookie 横幅、底部聊天挂件、固定导航条，都是惯犯。焦点移到这些层后面彻底看不见时，用户就丢了位置，没有任何视觉提示告诉他们现在选中了什么。认知障碍用户对任务中的上下文丢失尤其敏感。

修复方案的核心是 scroll-padding-top，让它覆盖固定顶栏的高度。

代码层面，如果顶栏64px高，给html加80px的scroll-padding-top，留点呼吸空间。或者用scroll-margin-top作用到具体聚焦元素。动态高度的顶栏（比如会折叠的导航、加载后才出现的公告横幅），需要用JavaScript实时更新：

监听resize事件，获取顶栏实际高度，加16px余量写进scrollPaddingTop。然后手动tab一遍页面，确认焦点始终可见。

新增标准2：拖拽必须有替代方案

2.5.7 Dragging Movements 针对的是纯拖拽操作。如果某个功能只能靠鼠标拖拽完成（比如看板卡片排序、图片裁剪框调整），那就违规了。必须提供替代方案：点击按钮、方向键控制、或者其他不需要精确拖拽的交互方式。

保护对象很明确：帕金森患者、手部震颤用户、以及那些在手机上单手操作、另一只手拎着咖啡的人。拖拽对精细运动控制要求很高，而点击或键盘操作容错空间大得多。

实现上，给每个可拖拽元素配一组控制按钮，或者支持方向键微调。不是要你砍掉拖拽，是要给不能/不想用拖拽的人留条后路。

新增标准3：点击目标尺寸有底线

2.5.8 Target Size (Minimum) 把点击目标的最小尺寸定死了：24×24 CSS像素。除非目标在句子或块级链接里，或者空间实在不够（比如表格单元格里的密集操作），可以降到20×20，但得保证间距补偿。

这条直接怼的是移动端误触。手指比鼠标指针大得多，44×44是理想值，24×24是底线。苹果人机界面指南早就这么建议，现在成了强制标准。

检查方法：打开DevTools，用设备模拟器切到移动端，手指去点那些小图标。如果经常点到隔壁，就得放大或者加间距。

新增标准4：输入辅助不能掉链子

3.2.6 Consistent Help 要求帮助机制在同类页面里位置固定。客服聊天入口、帮助中心链接、搜索框——如果A页面在右上角，B页面就不能藏到页脚。认知障碍用户依赖这种一致性来建立心智模型，位置变来变去等于逼他们重新学习。

3.3.7 Redundant Entry 则针对重复输入。如果用户已经填过的信息（地址、联系方式）在流程后面还要用，系统得自动填充或提供选择，不能让用户再打一遍。这对运动障碍用户是救命设计，对所有人也是体验提升。

新增标准5：认证流程的兜底方案

3.3.8 Accessible Authentication (Minimum) 和 3.3.9 Accessible Authentication (Enhanced) 是两条递进标准。核心要求：登录认证不能依赖认知功能测试——比如让用户辨认扭曲文字、选图片中的红绿灯、或者记住复杂密码。

最低等级允许对象识别（选"所有包含汽车的图片"）和复制粘贴密码。增强等级连对象识别都禁了，只能靠生物识别、硬件密钥、或者复制粘贴。

保护的是阅读障碍、注意力缺陷、以及老年用户。验证码是重灾区，很多团队还在用reCAPTCHA v2的图片挑战，这在2.2里直接踩线。

替代方案：短信验证码、邮件魔法链接、WebAuthn硬件密钥、或者至少允许密码管理器自动填充。

剩下4条：从表单到通知的细枝末节

2.4.12 Focus Not Obscured (Enhanced) 是前面那条的加强版，要求焦点元素完全不能被遮挡，连部分遮挡都不行。实现难度陡增，很多固定布局的页面得重构。

2.4.13 Focus Appearance 给焦点指示器定了视觉标准：大小、对比度、形状都有要求。不能再用那种浅灰色细边框当焦点样式，视力不好的用户根本看不见。

3.2.7 Visible Controls 要求控件在获得焦点或鼠标悬停时可见。很多设计为了"简洁"把操作按钮默认隐藏，hover才出现，这对键盘用户是灾难。

3.3.10 Re-authenticating 处理的是会话过期后的重新认证。如果用户正在填一个很长的表单，登录状态掉了，重新登录后之前填的内容得保留，不能清空。

合规不是终点，是起点

W3C把2.2定为推荐标准，背后有个残酷事实：2.1发布时定的很多目标，5年后看还是太乐观。键盘用户被固定顶栏挡住焦点的问题，2018年就有讨论，2024年才成强制标准。认知障碍用户的需求更是长期被忽视，这次3.3.7和3.3.8终于补上了缺口。

对前端工程师来说，这9条新标准意味着更多的设计评审、更多的测试用例、更多的"这个得改"。但换个角度，这也是把可访问性从"爱心项目"变成"硬性指标"的机会——有标准号背书的改动，比"我觉得对用户更好"容易推进得多。