什么是网页无障碍？WCAG与无障碍设计详解
网页无障碍是指构建网站和应用，使残障人士也能使用它们，无论他们是盲人并使用屏幕阅读器、无法使用鼠标、视力低下或色盲、听障，还是有认知或学习障碍。在实践中，这归结为：为图片提供文字替代、保证足够的颜色对比度、为表单提供正确的标签，以及所有功能都能只用键盘操作。它的国际标准是WCAG，即W3C发布的网页内容无障碍指南。
无障碍（Accessibility）常缩写为a11y：即“a”，中间11个字母，然后是“y”。
用AI搭建时，无障碍为什么重要
AI搭建工具很擅长生成看起来正确的应用。无障碍主要关乎那些截图中看不出来的东西：按钮是否真的是按钮，输入框是否有屏幕阅读器能够读出的标签，你能否用Tab键找到菜单。
因此，有必要关注以下几点：
- 它很容易被忽略。 一个自定义样式的下拉菜单可能看起来很完美，却无法在不使用鼠标的情况下操作。除非你去测试，否则不会注意到。
- 尽早做到更省力。 从第一条提示就要求无障碍组件，成本几乎为零。事后为完成的应用补救，则需要改动每一个界面。
- 它对所有人都有益。 字幕帮助身处嘈杂环境的人，良好的对比度帮助在阳光下使用手机的人，清晰的标签也能让每个人更快地填完表单。
- 它与SEO相关。 恰当的标题层级、描述性的链接和替代文字，同样有助于搜索引擎理解你的页面。参见为AI搭建的网站做SEO。
- 它可能是法律要求。 取决于你的运营地点和服务对象，无障碍可能是一项法律义务。
一个日常类比
可以把它想象成一座建筑的入口。
台阶对许多人来说没有问题。但坡道对轮椅使用者有用，对推着婴儿车的父母、拉着手推车的送货员和拖着行李箱的旅客也同样有用。自动门、清晰的指示牌、电梯按钮上的盲文以及良好的照明，都能为某些人消除一道障碍。
网页无障碍就是数字空间里的同样道理：它是你应用的坡道、指示牌和扶手。而且和建筑一样，在设计图中加入坡道，远比混凝土凝固后再加装要容易得多。
WCAG概览
WCAG由W3C的网页无障碍倡议（WAI）发布。当前版本为WCAG 2.2，于2023年10月首次发布。它向后兼容：符合WCAG 2.2的内容同样符合2.1和2.0，W3C也鼓励使用最新版本。WCAG 2.2还已被批准为国际标准ISO/IEC 40500:2025。而全新的WCAG 3目前仍是早期草案，尚未成为正式标准。
WCAG由四项原则构成，常用记忆词为POUR：
| 原则 | 含义 | 示例 |
|---|---|---|
| 可感知（Perceivable） | 人们可以通过所用的感官获取内容 | 图片的替代文字、视频的字幕、足够的对比度 |
| 可操作（Operable） | 人们可以使用控件并进行导航 | 键盘可访问、可延长的时间限制、可见的焦点 |
| 可理解（Understandable） | 内容和行为易于理解 | 清晰的标签、有用的错误信息、一致的导航 |
| 健壮（Robust） | 能与多种浏览器和辅助技术配合工作 | 正确使用HTML元素、控件的名称和角色正确 |
每条指南都有可测试的成功标准，分为三个等级：
- A级：最低要求。未达到此级别会让一些人完全无法使用。
- AA级：标准目标，也是大多数法律和政策所指的等级。
- AAA级：最高等级。在某些地方值得追求，但W3C不建议要求整个网站都达到此级别，因为部分内容无法满足。
WCAG 2.2在2.1的基础上新增了九项成功标准，其中包括AA级的目标尺寸（最小）：可点击目标通常应至少为24×24 CSS像素，但也有例外；以及无障碍认证（最小），它限制依赖记忆或拼图的登录步骤，例如要求重新输入密码却不允许粘贴。它还移除了已过时的“解析”标准。
实例：一个注册表单
以下是AI可能生成的一个注册表单，以及无障碍检查会发现的问题：
| 问题 | 受影响的人群 | 修复方法 |
|---|---|---|
| 输入框用占位文字（“Email”）代替标签 | 屏幕阅读器用户；开始输入后忘记该字段用途的人 | 为每个输入框添加可见的<label>并正确关联 |
| 白色背景上的浅灰色文字，对比度远低于4.5:1 | 视力低下的人、在户外的人 | 使用更深的文字，满足4.5:1的对比度要求 |
| 错误仅以红色边框显示 | 色盲用户、屏幕阅读器用户 | 在字段旁显示文字提示，并让屏幕阅读器读出 |
“注册”是样式化的<div>，而不是<button> | 键盘和屏幕阅读器用户无法激活它 | 使用真正的<button>元素 |
| 用Tab键切换字段时没有可见的轮廓 | 键盘用户无法判断当前位置 | 添加清晰的焦点样式 |
| 标志图片没有替代文字 | 屏幕阅读器用户只听到一个文件名 | 添加替代文字，例如“Acme Bookings” |
这些修复几乎不会改变表单的外观，但会决定一些人能否使用它。
关键术语
| 术语 | 含义 |
|---|---|
| 屏幕阅读器（Screen reader） | 将屏幕内容朗读出来或输出到盲文显示器的软件，例如VoiceOver、NVDA或JAWS。 |
| 替代文字（Alt text） | 对图片的文字描述，供屏幕阅读器朗读。纯装饰性图片使用空的替代文字，以便被跳过。 |
| 对比度（Contrast ratio） | 文字与背景颜色之间的差异程度，范围从1:1到21:1。 |
| 键盘导航（Keyboard navigation） | 使用Tab、Enter、空格和方向键而非鼠标来操作网站。 |
| 焦点指示器（Focus indicator） | 显示键盘当前所在元素的可见轮廓。 |
| 语义化HTML（Semantic HTML） | 为用途选用正确的元素，如<button>、<nav>、<h2>，使浏览器和辅助技术能够理解页面。 |
| ARIA | 为辅助技术描述自定义控件的附加属性。应谨慎使用；优先使用原生HTML元素。 |
| 辅助技术（Assistive technology） | 人们用来访问电脑的工具，从屏幕阅读器到开关设备和语音控制。 |
常见误解
- “无障碍只对盲人有意义。” 它涵盖视觉、运动、听力、言语和认知方面的残障，也包括手臂骨折等暂时性情况。
- “无障碍的网站看起来很朴素。” 无障碍只对对比度、焦点样式、文字大小等少数方面有所约束；外观良好的无障碍网站才是常态，而不是例外。
- “自动检测工具打了100分，就大功告成了。” 自动化工具只能发现部分问题。替代文字是否真正有意义，或某个流程在屏幕阅读器下是否合理，需要人工检查。
- “无障碍插件能让我们合规。” 叠加的工具栏无法修复代码中缺失的标签或损坏的键盘访问。请修复源头。
- “我们没有残障用户。” 你可能只是不知道。许多残障并不明显，遇到障碍的用户通常会直接离开。
向你的AI搭建工具提出什么要求
- “按照WCAG 2.2 AA级标准构建。”
- “使用语义化HTML：真正的按钮、链接、按顺序排列的标题，并为每个表单字段提供标签。”
- “确保每个可交互元素都能只用键盘操作，并具有可见的焦点样式。”
- “检查所有文字和图标颜色的对比度：普通文字4.5:1，大号文字和图标3:1。”
- “为有信息价值的图片添加有意义的替代文字，为装饰性图片添加空的替代文字。”
- “以文字形式显示表单错误，并与字段关联，而不只依靠颜色。”
- “动画应遵循用户的减少动态效果（reduced-motion）设置。”
- “运行一次自动化无障碍检查，并列出它无法检测的内容，以便我手动核对。”
然后亲自测试：把鼠标放在一边，只用Tab、Shift+Tab、Enter和空格键完成主要流程。试试手机自带的屏幕阅读器读取主页。把浏览器缩放到200%，看看是否有任何内容出现问题。
Mythex中的无障碍
Mythex不包含专门的无障碍检查工具，因此请把无障碍视为提示词和测试工作的一部分。从第一条提示就要求WCAG 2.2 AA级，在预览中用键盘检查结果，并在发布前使用/test让智能体点击主要流程进行测试，参见应用测试。SEO配方同样要求语义化标题和有意义的替代文字，两者同时服务于这两个目标。
如需动手操作的检查清单，请参阅如何让你的网站无障碍。关于设计，请阅读如何用AI设计好看的应用；上线前，请阅读如何在上线前测试你的应用。W3C官方的WCAG概览是权威来源。
常见问题
简单来说，什么是网页无障碍？
网页无障碍是指设计和构建网站及应用，使残障人士能够感知、理解、导航和使用它们。这包括使用屏幕阅读器的盲人、无法使用鼠标的人、视力低下或色盲的人、听障用户，以及有认知障碍的人。
什么是WCAG？
WCAG（网页内容无障碍指南）是网页无障碍的国际标准，由W3C发布。当前版本为WCAG 2.2，于2023年10月首次发布。其成功标准分为A、AA和AAA三个等级，而大多数机构和法律所指的目标是AA级。
WCAG对颜色对比度有什么要求？
在AA级，普通文字与背景的对比度至少需要4.5:1；大号文字（大约18磅，或加粗的14磅）至少需要3:1。图标和控件的可见部分，与其相邻内容的对比度至少需要3:1。
网页无障碍是法律要求吗？
在许多地方、对许多机构来说，是的。法律因国家和行业而异，例如《欧洲无障碍法案》涵盖了欧盟内许多面向消费者的数字产品和服务。请核实适用于你的规定，或咨询法律顾问。
无障碍辅助插件能让我的网站合规吗？
不能仅靠它。这类插件会在你的网站上叠加一个工具栏，但无法可靠地解决底层问题，例如缺少标签、键盘无法导航或结构不清晰。可靠的做法是修复网站的代码和内容。