打开网易新闻 查看精彩图片

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:焦点不能"人间蒸发"

新增标准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:拖拽必须有替代方案

打开网易新闻 查看精彩图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

打开网易新闻 查看精彩图片

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

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

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

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

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

剩下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条新标准意味着更多的设计评审、更多的测试用例、更多的"这个得改"。但换个角度,这也是把可访问性从"爱心项目"变成"硬性指标"的机会——有标准号背书的改动,比"我觉得对用户更好"容易推进得多。