![]()
WCAG 2.2 去年12月12日正式生效。你的团队如果还在按2.1做无障碍验收,技术上已经落后一个版本。欧盟、英国、美国的监管机构正在把政策基准往2.2迁移,这不是建议,是时间表。
这次更新很实在:新增9条成功标准,删除1条。没有废话,每一条都对应具体的用户群体和可落地的代码方案。下面按「是什么-为什么-怎么改」拆清楚。
被删的那条:4.1.1 Parsing 正式退役
这条老标准要求HTML必须格式良好,方便辅助技术解析。W3C工作组发现,现代浏览器和屏幕阅读器对畸形标签的容错能力已经强到不需要这条兜底了——它预测不了真实的无障碍问题,反而成了形式主义。
但注意:如果你的合同明确约定要符合WCAG 2.0或2.1,4.1.1还得单独测、单独报。2.2的新审计里,这条彻底消失。
焦点可见性:键盘用户不能再"迷路"
2.4.11 Focus Not Obscured (Minimum) 是这次最影响前端日常工作的标准之一。当UI组件获得键盘焦点时,聚焦元素不能被作者创建的内容完全遮挡。部分遮挡可以,完全消失不行。
谁受害最深?用键盘导航的人——运动障碍用户、切换设备用户、还有那些不用鼠标的效率型用户。粘性页头、悬浮Cookie横幅、固定聊天窗口、底部导航栏是四大惯犯。焦点一旦滑到这些层后面彻底消失,用户就丢了位置感,对认知障碍群体尤其致命。
修复方案核心就一行CSS:
/* 粘性页头64px高 */
![]()
html {
scroll-padding-top: 80px; /* 页头高度+呼吸空间 */
或者针对聚焦元素单独处理:
a:focus,
button:focus,
[tabindex]:focus {
scroll-margin-top: 80px;
动态页头(会折叠的导航、加载后才出现的公告条)需要JS实时计算:
![]()
function updateScrollPadding() {
const header = document.querySelector('.sticky-header');
const height = header?.getBoundingClientRect().height ?? 0;
document.documentElement.style.scrollPaddingTop = `${height + 16}px`;
window.addEventListener('resize', updateScrollPadding);
updateScrollPadding();
自测方法:开着粘性页头,按Tab键从头到尾走一遍。焦点有没有被吞掉,肉眼立刻知道。
还有8条在排队,但这条最急
2.4.11属于AA级,是法律合规的默认门槛。其他8条新标准里,有的针对拖拽替代方案(2.5.7),有的要求最小点击目标尺寸(2.5.8),但Focus Not Obscured是交互层面的基础防线——你改不好这个,后面的优化都是空中楼阁。
W3C的措辞很直接:建议所有新项目直接以2.2为基准,最大化未来适用性。翻译成人话:现在按2.1做,过两年还得返工。
你的代码库里,scroll-padding-top 和 scroll-margin-top 用了吗?还是还在用JS强行scrollIntoView做补偿?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.