无障碍不是给少数人单独做一个“特殊模式”。WCAG 2.2 的很多要求，本质上是在减少所有用户都会遇到的阅读、操作和理解障碍。
01 WCAG 2.2 不是只属于政府网站和大公司
企业官网常把无障碍理解成“以后国际化再做”或“上线后让开发补一下”。但很多问题一旦进入视觉和组件体系，后期再补成本更高：品牌色对比不足、按钮太小、焦点状态被删、表单只靠颜色报错、移动端放大后布局横向溢出，这些都不是加一个插件就能解决。
截至 2026 年，WCAG 2.2 仍是 W3C 推荐标准。它在 WCAG 2.1 基础上新增了焦点不被遮挡、拖拽替代、最小目标尺寸、可访问身份验证等成功标准。对于普通企业官网，不需要把规范背完，但设计阶段应该至少覆盖最常见的 AA 级问题。
02 颜色：不要只检查“看起来够清楚”
WCAG 2.2 的 1.4.3 对普通文字要求至少 4.5:1 的对比度，大号文字最低为 3:1。这个阈值意味着一些在高亮屏幕上看起来“很高级”的浅灰文字，实际上可能无法达到 AA。
品牌色也不能成为例外。Logo 本身有特殊豁免，但按钮文字、导航、正文、表单标签都仍然需要可读。设计系统最好提前定义 text-primary、text-secondary、on-brand 等可通过对比检查的 Token，而不是每个页面临时调整。
03 键盘：焦点状态不能被“为了美观”删掉
WCAG 要求键盘可操作界面存在可见焦点状态。WCAG 2.2 还新增 Focus Not Obscured，要求元素获得键盘焦点时，不应被作者创建的内容完全遮挡。
这对现在常见的 Sticky Header、底部浮动咨询条、Cookie Banner 很重要。一个用户按 Tab 移动到页面底部按钮，如果焦点刚好被固定栏覆盖，视觉上就不知道自己操作到了哪里。设计时需要把 focus ring 当成正常组件状态，而不是开发默认样式。
04 触控：小图标不等于小点击区域
WCAG 2.2 的 Target Size (Minimum) AA 新标准要求指针目标至少 24×24 CSS 像素，或者满足规定的间距等例外。这个数值是最低要求，不是最佳设计尺寸。
官网常见问题包括：语言切换只有一个 14px 小字、轮播箭头只有细线、关闭按钮紧贴屏幕边缘、分页数字挤在一起。即使视觉图标很小，也可以扩大透明点击容器，让可操作区域更宽松。
05 页面放大后仍然应该能用
WCAG 的 Reflow 成功标准要求，在等效 320 CSS 像素宽度的视口中，普通纵向内容能够在不丢失信息和功能的情况下重排，并避免双向滚动，除非内容本身确实需要二维布局。W3C 将 320 CSS px 解释为 1280px 视口在 400% 缩放下的等效宽度。
这提醒设计师：响应式不是只测试几台手机。桌面端用户也可能放大页面。固定高度模块、绝对定位大字、强制不换行导航、复杂表格都需要考虑放大后的行为。
06 表单必须让错误“被理解”，不能只变红
输入错误时只把边框变红，对色觉差异用户并不友好，也无法告诉用户到底哪里错了。更好的方式是同时提供清晰文本提示，并把提示与对应字段程序化关联。表单标签也不应该只依赖 placeholder，因为输入后提示会消失。
提交失败、验证码、必填项、格式要求都要在出错之前尽量说清楚。无障碍设计往往和减少表单放弃率是同一件事。
07 信息结构本身也是无障碍的一部分
WCAG 对页面标题、Heading、Link Purpose 等都有要求。企业官网常见“所有大字都只是视觉文本”的做法，开发时没有正确的 H1/H2 层级；或者多个按钮都写“查看更多”，屏幕阅读器用户得到一串无法区分的同名链接。
设计交付时应该同时说明标题层级、链接语义、图片是否为装饰、哪些图片需要 alt 文本。这些不是 SEO 团队和开发团队的“额外工作”，而是内容结构的一部分。
08 动效也应该允许用户减少
大幅视差、滚动绑定、自动播放视频和连续背景动画会给部分用户造成不适，也可能干扰阅读。设计时应考虑 prefers-reduced-motion 等系统偏好，为非必要动效提供减少或关闭方案。
无障碍并不意味着不能做视觉创意，而是区分“表达品牌的动效”和“完成任务必需的信息”。当动效被关闭后，用户仍然应该能获取同样的核心内容和操作能力。
09 结论：把无障碍写进组件，而不是写进上线清单
最有效的做法，是在设计系统里提前建立可达标的颜色、按钮、焦点、表单、链接、弹窗和响应式规则。这样每个新页面天然继承正确基础，而不是上线前逐页修。
WCAG 提供的是最低可访问标准，真正好的企业官网还应该继续考虑语言清晰、字号舒适、信息密度、加载性能等广义可用性。无障碍不是牺牲设计，而是在更真实的使用环境里验证设计是否成立。
常见问题
WCAG 2.2 和 WCAG 2.1 有什么主要区别？
2.2 保留大部分 2.1 要求，并新增焦点、拖拽、目标尺寸、重复输入和身份验证等成功标准，同时移除了已废弃的 Parsing 4.1.1。
所有按钮都必须 24×24 px 吗？
WCAG 2.2 AA 的 2.5.8 要求至少 24×24 CSS px，或满足规定的间距/等效控制等例外。重要操作通常建议做得更大。
对比度 4.5:1 适用于所有文字吗？
普通文字通常是 4.5:1，大号文字可为 3:1；Logo 和部分非活动内容存在例外。
用了无障碍插件就可以通过 WCAG 吗？
不能保证。很多问题属于结构、交互和内容层，插件无法替代正确的 HTML、组件状态和测试。
企业官网应该做到 AA 还是 AAA？
多数项目会以 AA 作为实际目标，再根据行业、地区法规和用户需求提高部分标准。具体法律义务需要结合业务所在地确认。
相关服务与进一步咨询
链接复制成功
