全球超过 10 亿人正在经历某种形式的残障。这大约占全球人口的 15%。其中包括盲人或低视力者、聋人或听力困难者、运动功能受限者、认知差异者，以及手臂骨折或偏头痛等暂时性状况的人。
当我们在构建网站时不考虑这些现实，我们不仅仅是造成不便。我们正在将人们拒之于他人理所当然享有的信息、服务和机会之外。无障碍不是一个功能，而是一种责任。
什么是网页无障碍
网页无障碍意味着设计和开发网站，使残障人士能够感知、理解、导航和与之交互。这也意味着他们能够为网络做出贡献。
这不仅仅涉及屏幕阅读器。无障碍涵盖以下方面：
- 视觉：失明、低视力、色觉缺陷
- 听觉：耳聋、听力困难
- 运动功能：精细运动控制受限、震颤、瘫痪
- 认知：阅读障碍、注意力缺陷多动障碍（ADHD）、记忆困难、学习障碍
- 临时性和情境性：手腕骨折、屏幕上的强烈阳光、嘈杂的环境、缓慢的网络
关键洞察是：无障碍设计对每个人都有益。字幕在嘈杂的环境中很有用。高对比度在强光下很有用。键盘导航对高级用户很有用。清晰的文字对非母语使用者很有用。无障碍不是一种特殊模式——它就是好的设计。
WCAG 标准
**Web Content Accessibility Guidelines（WCAG，网页内容无障碍指南）**是由 W3C 发布的网页无障碍国际标准。当前版本为 WCAG 2.2，围绕四个原则组织，其首字母缩写为 POUR：
可感知（Perceivable）
信息必须以所有用户都能感知的方式呈现。
- 文字替代：每张图片都需要一个描述其内容的
alt属性。装饰性图片使用alt=""。 - 字幕和文字记录：视频内容需要字幕；音频内容需要文字记录。
- 可适应的结构：去除样式后内容仍应有意义。使用语义 HTML（
<h1>、<nav>、<main>、<article>），而不仅仅是视觉样式。 - 可辨别的内容：足够的颜色对比度、可调整大小的文字、不单独通过颜色传达信息。
可操作（Operable）
用户必须能够操作界面。
- 键盘可访问：每个交互元素都必须仅通过键盘即可到达和使用。不要制造鼠标陷阱。
- 充足的时间：如果内容有时间限制，用户必须能够延长或取消。
- 防止癫痫发作：避免每秒闪烁超过三次的内容。
- 可导航：清晰的页面标题、逻辑性的标题结构、跳转导航链接、可见的焦点指示器。
可理解（Understandable）
内容和界面必须可以理解。
- 可读的文字：指定页面语言（
lang属性）。尽可能使用清晰、简单的语言。 - 可预测的行为：导航应保持一致。页面不应意外地更改上下文。
- 输入辅助：为表单字段添加清晰的标签。提供有用的错误消息，解释出了什么问题以及如何修复。
健壮（Robust）
内容必须足够健壮，能与当前和未来的技术兼容。
- 有效的 HTML：辅助技术能够可靠解析的正确语义标记。
- 名称、角色、值：自定义组件必须向无障碍 API 公开其用途（需要时使用 ARIA）。
一致性级别
WCAG 定义了三个级别：
| 级别 | 含义 | 示例 |
|---|---|---|
| A | 最低无障碍要求 | 图片有 alt 文字，页面有标题 |
| AA | 大多数网站的标准目标 | 普通文字的颜色对比度至少为 4.5:1 |
| AAA | 最高级别，并非总是可以实现 | 对比度 7:1，所有视频提供手语 |
全球大多数法律都要求达到 AA 级别 合规。这是你应该追求的标准。
常见障碍及修复方法
图片缺少 alt 文字
问题：屏幕阅读器用户只会听到"图片"或什么也听不到。
修复方法：为每张信息性图片添加描述性的 alt 文字。装饰性图片使用 alt=""，使屏幕阅读器跳过它们。
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
颜色对比度不足
问题：低视力或色觉缺陷的人无法阅读文字。
修复方法：确保普通文字的对比度至少为 4.5:1，大号文字（18px 以上或 14px 加粗）的对比度至少为 3:1。使用对比度检查工具验证你的配色方案。
你现在就可以检查颜色对比度。使用我们的对比度检查器工具，即时查看 WCAG AA 和 AAA 的通过/未通过结果。
表单标签缺失
问题：屏幕阅读器用户不知道表单字段的用途。
修复方法：每个输入字段都需要一个通过 for 属性关联的可见 <label> 元素。
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
缺少键盘导航
问题：无法使用鼠标的用户被困住了。
修复方法：使用默认支持键盘访问的原生 HTML 元素（<button>、<a>、<select>）。如果构建自定义组件，确保它们可以获得焦点并响应键盘事件。不要在没有提供替代方案的情况下移除焦点轮廓。
页面结构缺失
问题：屏幕阅读器用户无法高效导航。
修复方法：使用语义 HTML。每页一个 <h1>，逻辑性的标题层级（不跳过级别），地标元素（<nav>、<main>、<footer>）。
媒体自动播放
问题：意外的音频会干扰屏幕阅读器用户。自动播放的视频可能引发癫痫或造成不适。
修复方法：永远不要自动播放音频。如果视频自动播放，确保默认静音并提供暂停控件。
颜色不能是唯一手段
永远不要仅依赖颜色来传达信息。请考虑：
- 用红色边框标示错误的表单字段还需要错误图标或文字提示
- 带有彩色线条的图表还需要图案、标签或图例
- 正文中的链接需要下划线或其他视觉提示，而不仅仅是颜色变化
大约 8% 的男性和 0.5% 的女性有某种形式的色觉缺陷。考虑这一点进行设计不是边缘情况——而是基本的包容性。
测试无障碍性
自动化测试
自动化工具大约能捕获 30-40% 的无障碍问题。它们是很好的第一步，但不是完整的解决方案。
- axe DevTools（浏览器扩展）——扫描页面并报告 WCAG 违规
- Lighthouse（Chrome DevTools 内置）——包含无障碍审计
- WAVE（网页工具）——显示问题的可视化覆盖层
手动测试
许多无障碍问题需要人工判断：
- 键盘测试：拔掉鼠标，使用 Tab、Enter、Escape 和方向键浏览整个网站。你能到达所有内容吗？焦点顺序合理吗？
- 屏幕阅读器测试：尝试 VoiceOver（Mac）、NVDA（Windows，免费）或 TalkBack（Android）。内容朗读出来有意义吗？
- 缩放测试：将浏览器缩放到 200%。布局仍然正常吗？有内容被裁切或重叠吗？
- 减少动画：在操作系统设置中启用"减少动态效果"。动画是否尊重这个偏好设置？
用户测试
最有价值的反馈来自日常生活中实际使用辅助技术的人。如果预算允许，请将残障用户纳入测试流程。
无障碍是一个光谱，而不是一个复选框
无障碍不是一个有终点线的一次性项目。它是一种持续的实践。网站在变化，内容在增加，每次更新都可能带来新的障碍。
目标不是完美。目标是持续改进以及对使用你所构建产品的人的真诚关怀。从影响最大的改变开始——颜色对比度、alt 文字、键盘导航、表单标签——然后逐步完善。
你移除的每一个障碍，都是为某人打开的一扇门。
快速检查清单
- 所有图片都有有意义的
alt文字（装饰性图片使用alt=""） - 颜色对比度满足 WCAG AA（文字 4.5:1，大号文字 3:1）
- 所有表单字段都有可见的标签
- 网站完全可以通过键盘导航
- 标题遵循逻辑层级
- 焦点指示器可见
- 页面语言已设置（
<html>上的lang属性） - 不单独通过颜色传达信息
- 视频有字幕
- 动画尊重
prefers-reduced-motion设置