无障碍网站设计：让所有用户都能访问

中国有超过8500万残障人士，加上超过2亿的60岁以上老年人，这是一个庞大但经常被忽视的用户群体。他们同样需要使用网站获取信息、购买服务，但大部分企业网站对他们来说根本"用不了"。

无障碍设计不是慈善，它是一个正在被法律强制推动的趋势，也是一个未被发掘的商业机会。

什么是网站无障碍

网站无障碍（Web Accessibility，简称 a11y）指的是让网站对所有人都可用——包括视力障碍、听力障碍、肢体障碍、认知障碍的用户。

他们使用网站的方式和普通用户不同：

• 视力障碍者用读屏软件（如NVDA、VoiceOver）把页面内容"念"出来
• 色盲/色弱者无法区分某些颜色搭配
• 肢体障碍者不能使用鼠标，完全依靠键盘操作
• 听力障碍者无法听到视频和音频内容
• 认知障碍者需要更简单清晰的页面结构和文字表达

无障碍设计就是要确保这些用户能正常使用你的网站。

国际标准：WCAG

Web内容无障碍指南（WCAG）是W3C制定的国际标准。当前版本是WCAG 2.2，包含三个等级：

• A级：最基本的要求，解决最严重的障碍
• AA级：大多数法规要求的达标标准
• AAA级：最高标准，满足几乎所有用户需求

WCAG基于四个核心原则，可以用"POUR"来记忆：

可感知（Perceivable）：用户能感知到所有信息和界面元素。比如图片有替代文本（alt），视频有字幕。

可操作（Operable）：用户能操作所有界面功能。比如所有功能都能用键盘完成，不依赖鼠标。

可理解（Understandable）：用户能理解信息和操作方式。比如文字表达清晰，表单有明确的标签和错误提示。

健壮性（Robust）：内容能被各种工具正确解析。比如HTML标签语义正确，能被读屏软件准确理解。

国内的法规趋势

中国在信息无障碍方面的法规正在逐步加强：

《无障碍环境建设法》（2023年9月施行）：这是国家层面的法律，明确要求"国家鼓励和支持无障碍信息交流"，互联网网站、移动互联网应用应当逐步达到无障碍标准。

GB/T 37668-2019《信息技术 互联网内容无障碍可访问性技术要求与测试方法》：国家推荐标准，对网站的无障碍提出了具体的技术要求。

工信部专项行动：从2021年开始，工信部持续推动互联网应用适老化和无障碍改造。首批涉及的主要是大型网站和APP，但范围在逐步扩大。

趋势很明显：政府和公共服务类网站已经有强制要求，企业网站虽然暂时没有法律强制，但政策方向已经确定。提前做好准备，既是社会责任，也是规避未来合规风险。

实际落地：最关键的几项

完全达到WCAG AA级需要做很多工作，但以下几项是影响最大、实现成本最低的：

图片替代文本（alt属性）

每一张传达信息的图片都必须有描述性的alt文本。读屏软件读到图片时，会念出alt文本的内容。

错误做法：<img src="team.jpg">（没有alt）或者 <img src="team.jpg" alt="图片">（无意义的alt）

正确做法：<img src="team.jpg" alt="万户网络团队在办公室讨论项目方案">

装饰性的图片（分隔线、背景纹理等不传达信息的图片）设置 alt="无障碍网站设计：让所有用户都能访问"，读屏软件会直接跳过。

色彩对比度

文字和背景之间的颜色对比度要达到一定标准，色弱用户和在强光下使用手机的用户才能看清内容。

WCAG AA级要求：

• 正常文字（小于18px）：对比度至少 4.5:1
• 大号文字（18px以上或14px加粗以上）：对比度至少 3:1

常见的问题：浅灰色文字放在白色背景上、蓝色文字放在深蓝背景上。用在线工具如WebAIM的Contrast Checker检查你的配色是否达标。

不要只用颜色来传达信息。比如表单验证错误，不能只把输入框边框变红（色盲用户看不到），还要加上文字说明和图标。

键盘可操作性

所有的交互功能——导航菜单、按钮、表单、弹窗——都必须能用键盘操作（Tab键切换焦点、Enter/Space键触发操作、Escape键关闭弹窗）。

最常见的问题：

• 自定义的下拉菜单只能用鼠标点开
• 弹窗打开后Tab键焦点跑到弹窗后面的页面元素上
• 没有可见的焦点指示器（focus outline），用户不知道当前选中了哪个元素

很多开发者为了"好看"把浏览器默认的蓝色焦点框去掉了（outline: none），这对键盘用户是灾难性的。正确做法是用自定义的焦点样式替代默认样式，而不是直接去掉。

语义化HTML

用正确的HTML标签表达内容的结构和含义：

• 标题用 <h1> 到 <h6>，按层级嵌套
• 导航用 <nav>
• 主要内容用 <main>
• 列表用 <ul>/<ol> + <li>
• 按钮用 <button>，链接用 <a>

不要所有元素都用 <div> 和 <span> 然后靠CSS来"看起来像"按钮或标题。读屏软件是根据HTML标签来理解页面结构的。一个用 <div onclick> 做的"按钮"，读屏软件不会告诉用户这是一个可以点击的按钮。

表单标签

每个表单输入框都必须有对应的 <label> 标签，用 for 属性关联。读屏软件读到输入框时会念出label的内容，用户才知道这个框要填什么。

用 placeholder 代替 label 是常见的错误——placeholder在用户开始输入后就消失了，用户可能忘记这个框是填什么的。而且读屏软件对placeholder的支持不如label可靠。

视频字幕

网站上的视频内容需要提供字幕，这对听力障碍用户至关重要。同时字幕对所有用户都有帮助——在嘈杂的环境或者不方便开声音的时候，字幕让视频内容仍然可以获取。

无障碍测试方法

自动化检测工具

• WAVE：浏览器扩展，一键检测页面的无障碍问题
• axe DevTools：Chrome扩展，集成在开发者工具中
• Lighthouse：Chrome自带的审计工具，有Accessibility评分

自动化工具能发现大约30%的无障碍问题——缺少alt文本、对比度不足、缺少label这类规则性的问题。但更多的问题需要人工测试。

键盘测试

最简单的人工测试：把鼠标放到一边，纯用键盘操作你的网站。Tab到每个交互元素，看焦点是否可见、是否按合理顺序移动、所有功能是否可用。

读屏软件测试

用读屏软件浏览你的网站，体验一下视力障碍者的使用感受：

• Windows用户可以用免费的NVDA
• Mac用户可以用系统自带的VoiceOver

听一下读屏软件念出来的内容，是否能理解页面的结构和内容。这个体验通常会让你发现很多之前想不到的问题。

无障碍设计的商业价值

除了社会责任和法律合规，无障碍设计还有实际的商业价值：

扩大用户群体：8500万残障人士和2亿老年人，是一个被大多数竞争对手忽视的市场。

提升SEO：无障碍设计和SEO有很大的重叠——alt文本帮助搜索引擎理解图片内容，语义化HTML帮助搜索引擎理解页面结构，清晰的标题层级帮助搜索引擎判断内容重要性。

提升所有用户的体验：无障碍优化的受益者不只是残障用户。清晰的文字对比度、合理的键盘操作、好用的表单——这些让所有用户的体验都更好。

---

无障碍设计不需要推翻重来。从最基本的几项做起——给图片加alt、确保对比度达标、支持键盘操作、使用语义化HTML——这些工作量不大，但能让你的网站对更多人可用。随着国内法规的逐步收紧，提前做好比被动整改的成本低得多。