如何改善网站无障碍：一份实用指南

无障碍网站，是指无论用户有何种障碍、以何种方式上网，都能正常使用的网站：用屏幕阅读器、只用键盘、放大文字、色觉受限，或者手部震颤。这些改进同样能帮到手臂骨折的人、在烈日下盯着小屏手机的人，以及网速很慢的人。

业界普遍采用的基准是 Web Content Accessibility Guidelines (WCAG)，即《Web 内容无障碍指南》，目前的版本是 2.2。许多无障碍法规和采购规定都援引 WCAG，最常见的要求是 AA 级。本文重点介绍能清除最常见障碍的修复办法，然后说明如何测试。

先做自动化检查，再手动测试

要找出显而易见的问题，自动化扫描是最快的办法。Rudra 的免费无障碍检查工具会在真实浏览器中加载你的页面，并运行 axe-core 这款广泛使用的开源测试引擎。它会列出每一条未通过的规则、受影响的元素数量以及影响的严重程度：缺少 alt 文本、表单字段没有标签、对比度不足、未声明页面语言、空的按钮和链接，等等。

最要紧的修复

1. 为图片提供有意义的替代文本

每个 <img> 都需要 alt 属性。对于传达信息的图片，要描述它在上下文中表达的意思，而不只是画面上有什么：alt="Line chart: sign-ups doubled after the March redesign" 就比 alt="chart" 有用得多。对于纯装饰性的图片，使用空的 alt=""，让屏幕阅读器跳过它们。如果图片本身是链接或按钮，就描述它的动作（“搜索”“下载报告”）。复杂的图表还需要在旁边的文字或表格里给出关键数据。

2. 给每个表单字段加上标签

每个输入框都需要一个可见的标签，并且在代码里与它关联起来：先写 <label for="email">Email address</label>，再写 <input id="email" type="email" autocomplete="email">。占位符文字不能当标签用；用户一开始输入它就消失了，而且对比度往往偏低。错误信息要用文字显示在字段旁边（不能只靠红色边框），说明该怎么改正，并通过 aria-describedby 把它与字段关联起来。

3. 把颜色对比度调对

• 普通文字：与背景的对比度至少达到 4.5:1（WCAG 1.4.3，AA 级）。
• 大号文字（至少 24 px，粗体则约为 18.7 px）：至少 3:1。
• 界面组件和有意义的图形，比如输入框边框、焦点指示器和承载含义的图标：与相邻颜色的对比度至少 3:1（WCAG 1.4.11）。
• 不要只依靠颜色（WCAG 1.4.1）。段落中的链接应当不只靠颜色来区分，通常是加下划线；错误也不应只用红色来提示。

在浏览器开发者工具里检查文字元素时会显示对比度，可以边看边调颜色。尤其要留意浅灰色文字、压在照片上的文字和占位符文字。

4. 让所有功能都能用键盘操作

凡是鼠标能做的事，都应该能用 Tab、Shift+Tab、Enter、空格键、方向键和 Escape 完成。请使用真正的 <button> 和 <a href> 元素，而不是可点击的 <div>，后者不额外处理就无法获得焦点，也无法用键盘激活。在没有提供清晰可见的替代样式之前，绝不要去掉焦点轮廓；:focus-visible 可以让你只针对键盘用户设置样式。要确保吸顶的页头或 Cookie 横幅不会遮住获得焦点的元素（WCAG 2.2 新增的准则 2.4.11），对话框打开时把焦点限制在其中、关闭时把焦点交还原处，并在页面顶部加一个“跳到主要内容”链接。

5. 用标题和地标组织页面结构

屏幕阅读器用户常常在标题之间跳转来浏览页面。用一个 <h1> 概括整个页面，然后按逻辑顺序使用 <h2> 和 <h3>，标题级别要根据结构来选，而不是根据字号。用 <header>、<nav>、<main> 和 <footer> 把各个区域包起来，方便用户直接跳到正文。

6. 设置页面语言和独一无二的标题

<html lang="en">（或你所用的语言）告诉屏幕阅读器该如何朗读文字。独一无二、言之有物的 <title> 是页面打开时最先被读出的内容，也是在一排浏览器标签页中辨认它的依据。

7. 让链接和按钮的文字单独看也能懂

屏幕阅读器用户可以把页面上的所有链接列出来，这时重复出现十次的“点击这里”和“阅读更多”毫无意义。请改用“阅读定价指南”这样的文字。只有图标的按钮，比如放大镜或关闭用的“×”，需要一个无障碍名称：<button aria-label="Close">。

8. 让点击目标足够大

WCAG 2.2 新增了一项 AA 级要求（2.5.8）：指针目标的尺寸至少为 24 × 24 CSS 像素，或者彼此留出间距，使以每个目标为中心的 24 像素圆不与其他目标重叠。在触摸屏上，更大的目标效果更好，比如 44 × 44 像素左右（AAA 级的建议值）。

9. 支持缩放和重排

绝不要用 user-scalable=no 或 maximum-scale=1 禁用缩放。在 320 CSS 像素的宽度下，内容应当重排成单列且不出现横向滚动，这相当于在常见桌面屏幕上缩放到 400% 的效果（WCAG 1.4.10）。有了响应式布局，这件事就完成了大半；参见如何让网站适配移动端。

10. 谨慎处理媒体和动效

为视频提供字幕，为音频提供文字稿。不要自动播放声音。给轮播图和动画加上暂停按钮，并遵循 prefers-reduced-motion 媒体查询，为提出这一要求的用户减少或去掉非必要的动画。

11. 优先使用原生 HTML，而不是 ARIA

ARIA 属性改变的是辅助技术读出的内容，而不是元素的行为。<div role="button"> 仍然需要你自己编写键盘处理逻辑，而 <button> 天生就具备。能用原生元素的地方尽量用原生元素，只有在 HTML 没有对应元素时才添加 ARIA，并遵循 W3C《ARIA Authoring Practices Guide》中的模式。

15 分钟手动测试

1. 拔掉鼠标。从页面顶部开始按 Tab 键逐个切换。每一步都能看清焦点在哪里吗？每个链接、按钮、菜单和表单字段都能到达并操作吗？弹窗能用 Escape 关闭吗？
2. 缩放到 200%，再到 400%。文字会重排吗，还是必须横向滚动？有没有内容重叠或消失？
3. 花几分钟试试屏幕阅读器：NVDA（免费，Windows）、VoiceOver（macOS 和 iOS 内置）或 TalkBack（Android）。列出标题和链接，再填写一个表单。所有内容都读得清楚吗？
4. 检查图片。读一读 alt 文本（屏幕阅读器或浏览器的无障碍检查器都能显示）。它描述了要紧的信息吗？
5. 用灰度模式看一遍页面（大多数操作系统都有颜色滤镜设置）。有没有哪条信息只靠颜色来传达？

把无障碍纳入日常流程

• 优先修复共享组件和模板中的问题；修好一个页头或表单组件，所有用到它的页面就都修好了。
• 在开发流水线中加入自动化检查，比如把 axe-core 和端到端测试放在一起跑，这样回归问题在发布前就能被拦住。
• 把键盘和对比度检查写进新功能的“完成标准”。
• 发布一份无障碍声明，并提供反馈障碍的渠道，对用户的反馈作出回应。

常见错误

• 指望用一个叠加层（overlay）小部件来解决无障碍问题。叠在页面之上的脚本修不好底层的标记，而且许多残障用户反映，这类叠加层反而碍事。
• 在 alt 文本里堆砌关键词，或者以“图片：”开头（屏幕阅读器本来就会说明这是一张图片）。
• 用占位符文字代替标签。
• 为了美观去掉焦点轮廓。
• 给所有元素都加上 aria-label，有时反而覆盖了本来很好的可见文字。
• 把一份干干净净的自动化报告当作网站已经无障碍的证明。