什么是网站无障碍设计？

网站无障碍设计（Web Accessibility，简称 a11y）是指设计和开发让所有用户——包括存在视觉、听觉、运动或认知障碍的人——都能正常使用的网站。

受益群体远比你想象的广泛：视力不好用放大镜的老年人、色盲用户、只能用键盘操作的用户、暂时手部受伤的用户，甚至是在嘈杂环境中开着静音的用户。

WCAG标准：无障碍的通行规范

WCAG（Web Content Accessibility Guidelines）是 W3C 制定的无障碍标准，目前最新版为 WCAG 2.2，分为三个合规级别：

• A 级：最低要求，不满足会严重阻碍某些用户使用
• AA 级：大多数国家法规要求的级别（如美国 ADA、欧盟 EAA）
• AAA 级：最高标准，通常只在特定场景强制要求

对于大多数网站，目标是达到 WCAG 2.1 AA 级。

四大原则：POUR框架

WCAG 围绕四大原则构建：

• P – Perceivable（可感知）：信息必须以用户能感知的方式呈现，如图片要有 alt 文字，视频要有字幕
• O – Operable（可操作）：界面必须可以通过键盘操作，不能只依赖鼠标
• U – Understandable（可理解）：内容和操作逻辑清晰，错误提示有意义
• R – Robust（健壮）：内容能被各种辅助技术（如屏幕阅读器）正确解读

最常见的无障碍问题及修复方法

1. 图片缺少 alt 属性

屏幕阅读器无法描述没有 alt 文字的图片。修复：为所有有意义的图片添加描述性 alt；装饰性图片使用 alt=""。

<!-- 错误 -->
<img src="chart.png">

<!-- 正确 -->
<img src="chart.png" alt="2025年Q4销售额环比增长35%的柱状图">

2. 颜色对比度不足

WCAG AA 要求正文文字与背景的对比度至少为 4.5:1，大号文字至少 3:1。工具推荐：WebAIM Contrast Checker。

3. 表单缺少标签（Label）

每个表单输入框必须有对应的 <label>，不能只用 placeholder 代替：

<!-- 错误 -->
<input type="email" placeholder="输入邮箱">

<!-- 正确 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" placeholder="输入邮箱">

4. 键盘无法访问交互元素

确保所有按钮、链接、菜单可以用 Tab 键聚焦，并显示明显的焦点样式（不要用 outline: none 消除焦点框）。

5. 页面标题层级混乱

H1-H6 应按语义层级使用，不要因为”H3好看”而跳过H2。屏幕阅读器依赖标题层级导航页面结构。

无障碍检测工具

• axe DevTools：Chrome 插件，自动检测无障碍问题，最流行的检测工具
• Lighthouse：Chrome 内置，Accessibility 评分直观
• NVDA（Windows免费）/ VoiceOver（Mac内置）：真实屏幕阅读器，体验盲人用户的感受
• WAVE：在线工具，可视化展示页面无障碍问题

无障碍与SEO的关系

无障碍设计和 SEO 有大量重叠：图片 alt 文字、清晰的标题层级、有意义的链接文字、快速的页面加载——这些既是无障碍要求，也是 Google 排名的重要因素。做好无障碍，SEO 也会受益。

总结

无障碍设计不是”额外工作”，而是高质量网站的基本要求。从今天开始，用 axe DevTools 扫描你的网站，先修复最严重的几个问题，逐步向 WCAG AA 级靠拢。每一次改进，都让更多用户可以顺畅地使用你的网站。