无障碍不是新学科：设计原则到 WCAG 的 12 条对照

WebAIM 每年扫描全球前 100 万个网站首页并出具无障碍报告。其 2026 年结果显示，95.9% 的首页仍存在可检测错误，平均每个页面高达 56 个障碍——这一数字相比去年不降反升，逆转了此前连续六年的缓慢改善趋势。更值得注意的是，报告中排名前六的失败类型在七年间几乎没有变化。

UX Collective 近期一篇署名文章提出了一个核心论点：无障碍标准并不是「外挂」在设计之上的新学科，而是对优秀设计师本就践行的设计原则的「法律与技术翻译」。设计师欠缺的并不是知识，而是词汇。一旦看到设计常识与 WCAG 之间的一一对应，标准就不再是外部清单，而成为一种语言，让设计师得以描述自己一直在做的事。

一份「翻译对照表」

文章整理了 12 条核心对照，每条都附带 WebAIM 报告中的实测缺失率：

• 视觉层级——设计原则：引导视线按既定顺序阅读内容。对应 WCAG 1.3.1 与 2.4.6。实际缺失：41.8% 的页面跳过标题层级；18.1% 出现多个 <h1>。层级只存在于视觉，源代码中并不成立。
• 对比度——设计原则：文字与背景需保证可读。对应 WCAG 1.4.3。实际缺失：这是全网最高频的失败项，83.9% 的页面存在此问题，平均每个页面约 34 处。
• 有意义的标签——设计原则：字段需明确说明所需内容。对应 WCAG 1.3.1 与 3.3.2。实际缺失：首页表单输入框中三分之一（33.1%）没有任何程序化标签。
• 具有描述性与目的性的图像——设计原则：图像应传递信息而非仅为装饰。对应 WCAG 1.1.1。实际缺失：16.2% 的图片完全没有 alt 文本，另 10.8% 仅填写「image」「graphic」或文件名等无效内容。
• 清晰的可点击暗示——设计原则：按钮要像按钮，链接要像链接。对应 WCAG 2.4.4 与 4.1.2。实际缺失：46.3% 的页面存在空链接，30.6% 存在空按钮，无论对视障用户还是明眼用户都难以辨认用途。
• 可预期的统一导航——设计原则：同一模式应在各处一致工作。对应 WCAG 3.2.3 与 3.2.4。实际缺失：这正是设计系统漂移的写照——组件在视觉或功能上跨页面不一致。
• 可定位的内容——设计原则：在要求操作前先建立语境。对应 WCAG 3.1.1。实际缺失：13.5% 的页面未声明文档语言，导致屏幕阅读器发音与翻译工具失效。
• 对新型交互模式保持克制——设计原则：标准模式有效时不另造新模式。对应 WCAG 4.1.2 及 ARIA Authoring Practices。实际缺失：使用 ARIA 的页面平均错误数为 59.1 个，而未使用 ARIA 的页面为 42 个；22% 的 ARIA 菜单缺乏使其真正成为菜单的标记。
• 错误预防与优雅恢复——设计原则：帮助用户避免失误并体面地纠错。对应 WCAG 3.3.1 与 3.3.3。实际缺失：该项直接对应 Nielsen「帮助用户识别、诊断并恢复错误」的可用性启发式，只是被赋予了法律约束力。
• 可扫读、结构良好的内容——设计原则：标题与地标让用户直达重点。对应 WCAG 1.3.1 与 2.4.1。实际缺失：仅 46.1% 的页面设置 <main> 地标；仅 17.1% 提供跳转链接，其中约十分之一是坏的。
• 描述性微文案——设计原则：链接与按钮文案应说明去向，而非「点击这里」。对应 WCAG 2.4.4。实际缺失：15.2% 的页面存在「click here」「read more」等模糊链接，平均每个页面 5.3 处。
• 平实清晰的语言——设计原则：为面前的用户写作，而非为自己写作。对应 WCAG 3.1.3、3.1.5、3.3.5。实际缺失：自动扫描工具无法直接评估阅读难度，这一条因此常被跳过——它在扫描里隐形，却对真实用户体验影响巨大。

关于 Section 508 的说明

自 2018 年修订以来，美国联邦标准已不再单独维护网页内容的技术条款，转而指向与所有人相同的规则手册。这意味着 WCAG 既是国际通行做法，也是美国联邦合规要求，覆盖面进一步收敛。

文章最终想传达的是：榜单上的常见错误，几乎都可以回溯到设计入门课就讲过的视觉、交互、内容原则。无障碍不是新增负担，而是把设计师已有的专业判断显式化、可验证化的语言工具。