如何让你的网站无障碍：WCAG 2.2 入门指南

要让网站无障碍，就要让人们不仅能用鼠标，也能用键盘、屏幕阅读器、缩放功能或开关设备来使用它：按钮、链接、标题和表单标签都使用真正的 HTML 元素，图片提供有意义的替代文本，文字保持高对比度，并让焦点清晰可见。应该努力达到的标准是 WCAG 2.2 AA 级。自动化检测工具能发现一部分问题；十分钟的键盘和屏幕阅读器测试，能发现其余的大部分问题。

实际上，“无障碍”意味着什么

无障碍关乎人：可能是一位盲人，依靠屏幕阅读器上网；可能是一位手部震颤的用户，只能靠键盘导航；可能是一位视力低下的用户，需要把页面放大到 200%；可能是一位在强烈阳光下阅读的用户；也可能是一位暂时手腕骨折的人。良好的无障碍设计往往会让每个人都获得更好的体验——结构更清晰、文字更易读、表单会说明出错的原因。

参考标准是 W3C 的《网页内容无障碍指南》（WCAG）。截至 2026 年 9 月，现行版本是 WCAG 2.2（2023 年 10 月发布，2024 年 12 月更新）；WCAG 3 仍是早期草案。WCAG 围绕四项原则组织——内容必须是可感知的、可操作的、可理解的和稳健的——并分为三个符合性等级：

等级	含义	谁以此为目标
A	最低要求；缺少它，一些人根本无法使用网站	所有人
AA	常见目标；涵盖对比度、焦点、缩放和错误处理	大多数机构和许多法律
AAA	最严格；并非所有内容都能做到	特定服务和受众

一些地区的法律都引用了 WCAG，例如欧洲无障碍法案（European Accessibility Act），自 2025 年 6 月起已适用于欧盟许多面向消费者的数字服务。哪些规则适用于你，取决于你在哪里经营、销售什么；如果不确定，请咨询专业顾问。本指南聚焦于实际操作。

途径选择

方法	适用于	权衡
从一开始就内置	新网站和应用	总体工作量最少；需要一开始就明确要求
审核并修复	现有网站	能发现真实问题；需要针对每个页面集中处理
专业审核	受监管行业、大型网站、公共机构	全面且有文档记录；需要花钱
覆盖层小部件	不推荐	无法修复底层代码

对大多数小型网站来说，前两种就足够了：让 AI 从一开始就以无障碍方式构建，然后在上线前进行审核。

最重要的修复项

使用正确的 HTML 元素

大多数无障碍功能只需正确的 HTML 就能免费获得。<button> 可以获得焦点，支持 Enter 和空格键，并会被读作按钮。而一个绑定了点击事件的 <div>，这三样都没有。AI 生成的代码有时会对所有元素都使用带样式的 div；请要求使用语义化元素：

<button> 用于操作，<a href> 用于导航
每个页面只有一个 <h1>，然后按顺序使用 <h2>、<h3>——屏幕阅读器用户会通过标题在页面间跳转
地标：<header>、<nav>、<main>、<footer>
每个表单字段都要通过 <label> 关联
在 <html lang="zh-CN"> 中设置页面语言

只有在没有合适的原生元素时，才使用 ARIA 属性——例如自定义的标签页组或组合框。错误的 ARIA 比没有 ARIA 更糟。

键盘操作与可见焦点

凡是能用鼠标完成的操作，都必须能仅用键盘完成（WCAG 2.1.1）。用 Tab 键遍历页面：每个链接、按钮和字段都应该能以合理的顺序到达，并且你总能看到焦点所在位置（2.4.7 焦点可见）。WCAG 2.2 新增要求：获得焦点的元素不能被粘性页头或 Cookie 横幅完全遮挡（2.4.11，AA 级）。

常见的失败包括：只能通过悬停打开的菜单、无法捕获焦点或无法用 Esc 关闭的弹窗，以及在 CSS 中写了 outline: none 却没有任何替代样式。

文本替代

每张有意义的图片都需要替代文本，结合上下文说明它展示了什么（例如“厨师摆盘的品鉴菜单”，而不是“image1.jpg”）。装饰性图片应设置为空的 alt=""，让屏幕阅读器跳过它们。纯图标按钮需要可访问的名称（“关闭”“搜索”）。视频需要字幕，音频需要文字稿。

颜色与对比度

WCAG 2.2 AA 级要求：普通文本的对比度至少为 4.5:1，大号文本至少为 3:1（1.4.3）；输入框边框和有意义的图标等界面部件至少为 3:1（1.4.11）。浅灰色的占位文字和浅色按钮是最常见的不达标情况。另外，切勿只用颜色来传达含义——无效字段的红色边框还需要配有错误提示文字。

缩放与重排

文字放大到 200% 时必须仍然可用（1.4.4），并且内容在 320 CSS 像素宽度下无需横向滚动即可使用（1.4.10）。良好的响应式布局能解决其中大部分问题。

点击目标、表单与错误

目标尺寸：WCAG 2.2 AA 级要求指针目标至少为 24 × 24 CSS 像素，或者较小的目标周围有足够的间距（2.5.8）。在手机上，目标越大越友好。
表单：可见的标签（不能只用占位文字）、清晰的说明，以及在字段旁边说明错误是什么、如何修正的提示信息。
登录：不要让人们去解谜或抄写验证码，除非提供替代方式；允许使用密码管理器和粘贴（3.3.8 无障碍认证）。

有效的提示词

请将本网站构建为符合 WCAG 2.2 AA 级：使用语义化 HTML 地标，每个页面只有一个 h1，标题按顺序排列，使用真正的 button 和 link 元素，每个表单字段都有标签，提供可见的焦点样式，文字对比度至少 4.5:1，有意义的图片提供替代文本、装饰性图片使用 alt=""，并设置 html lang。

请审核 /signup 和 /checkout 页面的无障碍性。检查仅键盘操作、焦点顺序、焦点可见性、标签、错误提示、对比度，以及图标按钮的屏幕阅读器名称。列出每个问题对应的 WCAG 条款，然后在尽量不改变视觉设计的前提下进行修复。

移动端菜单无法用键盘操作。请把它做成带 aria-expanded 的按钮，菜单打开时把焦点移入菜单，按 Esc 关闭，并把焦点返回到按钮上。

分步操作

运行一次自动化检测。 在 Chrome 开发者工具中使用 Lighthouse 的“无障碍”部分，或使用 axe 浏览器扩展，检测每个主要页面。修复它报告的所有问题。
拔掉鼠标。 用 Tab 键遍历每个页面，完成每项关键任务——注册、搜索、结账。记下任何无法到达、看不到焦点或无法退出的地方。
放大到 200%，并把窗口缩窄到手机宽度。所有内容都不应被截断，也不应需要横向滚动。
用屏幕阅读器试用十分钟：Mac 和 iPhone 上的 VoiceOver、Android 上的 TalkBack，或 Windows 上免费的 NVDA。听一听标题、链接和表单字段。读出“按钮”却没有名称，或者“链接，点击这里”，都说明还有工作要做。
检查对比度：用对比度检测工具检查文字、按钮和输入框。
修复后重新测试同样的任务。
发布无障碍声明，说明你以哪个标准为目标，以及如何报告问题——并回应这些报告。

常见错误

依赖覆盖层小部件，而不是修复代码。
因为看起来不整洁而删除焦点轮廓，又没有任何替代样式。
只用占位文字作为标签。 一旦用户开始输入，它就会消失，而且常常对比度很低。
“点击这里”和“阅读更多”链接。 脱离上下文后，屏幕阅读器用户只会听到一连串相同的链接。
替代文本中堆砌关键词。 替代文本是给人听的；应该描述图片本身。
只测试一次。 每一个新功能都可能破坏键盘操作。请把键盘测试加入你的上线前测试。

无障碍检查清单

主要页面的自动化检测（Lighthouse 或 axe）无问题
所有任务都能仅用键盘完成
焦点始终可见，且不会被粘性元素遮挡
语义化标题、地标、按钮和链接；已设置 lang
有意义的替代文本；装饰性图片使用 alt=""；视频有字幕
文字对比度 ≥ 4.5:1（大号文字 ≥ 3:1）；界面部件 ≥ 3:1
在 200% 缩放和 320 px 宽度下可用
每个表单字段都有可见的标签和清晰的错误提示
有无障碍声明，并提供报告问题的途径

想了解这些概念背后的道理，请阅读什么是网页无障碍。无障碍设计与优秀设计有很多重叠之处；如何用 AI 设计好看的应用涵盖了视觉方面的内容。

Mythex 上的无障碍

Mythex 会按你要求的标准来构建，因此请在第一条提示词和后续跟进中写明“WCAG 2.2 AA”。你可以使用预览的手机尺寸框架检查小屏幕（预览与代码），但键盘、缩放和屏幕阅读器测试最好在已发布的网址上进行，或在单独的标签页中打开预览。请让智能体审核某个页面、修复它发现的问题，然后自己测试这些修复——自动化检查只是起点，而不是最终结论。

常见问题

网站无障碍的当前标准是什么？

截至 2026 年 9 月，W3C 的现行标准是 WCAG 2.2，首次发布于 2023 年 10 月。大多数机构和许多法律以 AA 级为目标。WCAG 3 仍是早期草案。

无障碍覆盖层（overlay）能让我的网站合规吗？

不要依赖它。覆盖层只是在页面上添加一个工具栏，无法修复底层代码中缺失的标签、损坏的键盘操作或糟糕的结构。真正让网站可用的，是修复网站本身。

自动化检测工具能发现所有问题吗？

不能。Lighthouse 和 axe 之类的工具能发现缺失的替代文本、对比度不足和未标注的字段等问题，但许多问题——比如混乱的焦点顺序、没有意义的链接文字、存在但错误的替代文本——需要人借助键盘和屏幕阅读器来检查。

WCAG 要求的对比度是多少？

WCAG 2.2 AA 级要求：普通文本至少 4.5:1，大号文本至少 3:1；对于输入框边框和传达含义的图标等用户界面组件，至少 3:1。