网站无障碍：实用 WCAG 2.2 指南
了解如何解读 WCAG 2.2、修复常见网站问题、进行任何人都能执行的 30 分钟手动测试，并理解无障碍与易用性的交集。
常见问题
网站符合 WCAG 是什么意思？
表示网站符合选定级别的《网页内容无障碍指南》成功准则，通常是 WCAG 2.1 或 2.2 AA 级。AA 级包含全部 A 级和 AA 级准则。大多数提及 WCAG 的法律和采购政策要求 AA 级。
如何为自己的网站解读 WCAG 指南？
从 W3C 的“How to Meet WCAG”快速参考开始，筛选 A 级和 AA 级；逐项阅读“Understanding”说明页；然后测试关键模板（首页、内容页、表单、结账页），而非逐页检查。
无障碍覆盖层或插件能让网站合规吗？
没有工具能单独让网站合规。工具栏覆盖层不会修复底层代码，许多残障用户和无障碍专家表示它会造成干扰。应直接修复 HTML、对比度、标签和键盘支持。
易用性与无障碍有什么区别？
无障碍意味着残障人士能感知、理解、浏览并操作网站；易用性意味着所有人都能轻松高效地使用网站。清晰标签、高对比度和可预测导航对所有访客都有帮助。
自动检查工具能发现所有无障碍问题吗？
不能。WAVE、axe 和 Lighthouse 能发现缺少替代文本、对比度低和缺少标签等问题；替代文本是否有意义、焦点顺序是否合理等问题仍需人工检查。
符合 WCAG 的网站达到指定级别的《网页内容无障碍指南》要求；对几乎所有企业而言，这通常意味着 WCAG 2.2 AA 级。常见故障包括颜色对比度低、图片缺少替代文本、表单字段无标签、链接和按钮为空，以及无法通过键盘访问。修复这些问题，再用键盘和屏幕阅读器测试，就能覆盖许多真实用户遇到的障碍。
本指南介绍如何理解 WCAG、优先修复哪些问题，以及如何亲自进行 30 分钟测试。
WCAG 的结构
WCAG 由 W3C 发布，分为以下层次：
- 四项 POUR 原则：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）和稳健（Robust）。
- 每项原则下有指南，例如“文本替代”和“键盘可访问”。
- 每条指南下有成功准则，即可测试的规则。每条规则有编号（如 1.4.3 对比度）和级别：A、AA 或 AAA。
A 级是最低标准，AA 级是法律和采购要求常见目标，AAA 级更严格，通常不要求整个网站都达到。
WCAG 2.2 于 2023 年 10 月成为 W3C 正式建议标准。它新增目标尺寸下限、焦点不被遮挡、无障碍身份验证等准则，并删除已过时的 4.1.1 解析准则。
如何为自己的网站解读 WCAG
- 打开 W3C 的 “How to Meet WCAG (Quick Reference)”。
- 只筛选 A 级和 AA 级。
- 阅读每条准则的 “Understanding” 页面，查看通俗解释及通过/不通过示例。
- 检查模板而非每个页面：首页、标准内容页、博客文章、表单、商品或结账页。修复模板即可惠及所有基于它的页面。
- 记录问题的准则编号、页面和修复方式。
覆盖多数常见问题的修复
1. 颜色对比度（1.4.3 和 1.4.11）
- 普通文字与背景至少 4.5:1。
- 大号文字（约 24px 普通字重，或 18.66px 及以上粗体）至少 3:1。
- 界面组件和有意义图形（按钮边框、输入框轮廓、信息图标）至少 3:1。
浅灰占位文字和浅色品牌背景上的白字最常出问题。可用 WebAIM 对比度检查器或浏览器开发者工具。
2. 图片替代文本（1.1.1）
- 信息性图片用替代文本描述重点，例如 alt="技术人员更换炉具滤网"。
- 装饰图片使用空替代文本 alt=""，让屏幕阅读器跳过。
- 图片形式的文字（如传单截图、JPG 菜单）也要以真实文本提供。
- 链接图片（如返回首页的标志）应描述目的地，例如 alt="Acme Plumbing 首页"。
3. 表单标签和错误（1.3.1、3.3.1、3.3.2）
- 每个输入框都需要关联的可见 <label>。占位文字不是标签，因为输入后会消失。
- 错误信息应说明问题和修复方式，例如“请输入带区号的电话号码”，不能只用红色边框表示。
- 必填项用文字或无障碍标记说明，不能只靠颜色。
4. 键盘操作（2.1.1、2.4.3、2.4.7）
- 每个链接、按钮、菜单和表单控件都支持 Tab、Shift+Tab、Enter 和 Space。
- 焦点顺序符合视觉顺序，并始终显示焦点位置。使用 outline: none 又不提供替代方案是常见错误。
- 下拉菜单和模态框可以用键盘打开、操作和关闭；模态框应在关闭前将焦点保持在其中。
5. 有名称的链接和按钮（2.4.4、4.1.2）
只有图标的按钮（菜单、搜索、社交图标）须提供无障碍名称，可用可见文字、aria-label 或隐藏文字。避免重复使用“点击这里”“阅读更多”；链接文字要说明目标，或提供独特的无障碍名称。
6. 结构与标题（1.3.1、2.4.6）
- 每页使用一个说明主题的 <h1>。
- 标题按逻辑顺序排列：区块用 h2，区块内小节用 h3，不要仅按字号选择级别。
- 使用真正的列表、含标题单元格的表格和地标标签（<header>、<nav>、<main>、<footer>）。
- 设置页面语言：<html lang="en">。
7. WCAG 2.2 新增准则
- 2.5.8 目标尺寸（最低），AA：可点击目标至少为 24 x 24 CSS 像素，或在较小目标周围留出足够间距。
- 2.4.11 焦点未被遮挡（最低），AA：粘性页眉、Cookie 横幅和聊天窗口不能完全挡住焦点元素。
- 3.3.8 无障碍身份验证（最低），AA：登录不能强制解谜或记忆信息且不提供替代方式；须允许密码管理器和粘贴。
- 3.3.7 冗余输入，A：同一流程中不要要求重新输入已经提供的信息。
8. 媒体和动效
- 视频需要字幕（1.2.2）；预录视频的重要视觉内容还需音频描述或文字替代。
- 自动播放超过 5 秒的动效须能暂停（2.2.2）。
- 尊重 prefers-reduced-motion 设置，减少大型动画。
准则编号汇总：1.3.1, 3.3.1, 3.3.2；2.1.1, 2.4.3, 2.4.7；2.4.4, 4.1.2；1.3.1, 2.4.6。
30 分钟手动测试
自动化工具只能检查部分问题。请为每种关键模板执行以下测试。
第 0 至 5 分钟：自动扫描。运行 WAVE 浏览器扩展、axe DevTools 或 Lighthouse 无障碍检查。先修复缺少替代文本、标签和对比度不合格等明显错误。
第 5 至 15 分钟：仅用键盘。放下鼠标，从页面顶部按 Tab 浏览：
- 是否始终看得见焦点位置？
- 能否开关菜单、使用所有表单字段并提交？
- 是否有有效的“跳至内容”链接？
- 焦点是否会被粘性页眉或横幅挡住？
第 15 至 25 分钟：屏幕阅读器。使用 macOS 和 iOS 内置的 VoiceOver，或 Windows 免费工具 NVDA：
- 标题列表是否能说明页面内容？
- 图片和按钮脱离上下文后是否仍有意义？
- 表单字段是否读出标签，错误是否会被读出？
第 25 至 30 分钟：缩放和重排。浏览器缩放至 200%，再到 400%。在 400% 时，内容应重排为单列且无横向滚动（1.4.10 重排），也不应被裁切。
易用性与无障碍的交集
把“网页易用性和无障碍”放在一起是有道理的。几乎所有无障碍改进也有助于易用性：
| 无障碍改进 | 也能帮助 |
|---|
| 高对比度 | 阳光下看手机的人 |
| 可见标签 | 匆忙填写表单的人 |
| 字幕 | 静音观看的人 |
| 键盘支持 | 高阶用户、触控板损坏的人 |
| 更大的点按目标 | 所有手机用户 |
| 清晰的错误消息 | 所有打错字的人 |
覆盖层、声明和法律
- 覆盖层：声称一行代码即可合规的小组件不会改变底层代码。应修复网站本身。
- 无障碍声明：说明目标标准、已知问题，以及如何联系你寻求帮助或替代格式。
- 法律背景：各国要求不同。欧盟《欧洲无障碍法案》自 2025 年 6 月起适用于欧盟许多产品和服务；美国《美国残疾人法案》常被用于网站；公共部门机构通常另有规则。请针对具体情况咨询法律专业人士。
检查清单
- [ ] 对比度：文字 4.5:1，大号文字和界面部分 3:1
- [ ] 信息性图片有替代文本，装饰图片的替代文本为空
- [ ] 每个输入框都有可见且关联的标签
- [ ] 全站支持键盘并显示焦点
- [ ] 图标按钮有无障碍名称
- [ ] 标题和地标顺序合理，并设置页面语言
- [ ] 点按目标至少 24 x 24 CSS 像素
- [ ] 视频有字幕，动效可暂停
- [ ] 400% 缩放时页面能重排
- [ ] 已发布无障碍声明
无障碍也有助于搜索优化：标题、替代文本和描述性链接也是页面 SEO 基础，详见页面 SEO 检查清单。
We.Inc 生成的网站使用标准 HTML、CSS 和 React 代码，可直接编辑，因此可以自行修复标签、替代文本和对比度，也可以在聊天中要求修改。发布前仍应执行以上手动检查。
免费开始
免费开始 · 无需信用卡
Product
Who It's For
Features
Resources
Company
View Sitemap