前端无障碍访问：让每个人都能使用你的应用

前端无障碍访问：让每个人都能使用你的应用

什么是无障碍访问？

无障碍访问（Accessibility）是指确保所有用户，包括残障人士，都能够访问和使用网站或应用的实践。

为什么无障碍访问很重要？

无障碍访问的核心原则

1. 可感知性（Perceivable）

信息和用户界面组件必须以可感知的方式呈现给用户。

2. 可操作性（Operable）

用户界面组件和导航必须是可操作的。

3. 可理解性（Understandable）

信息和操作必须是可理解的。

4. 健壮性（Robust）

内容必须足够健壮，能够被各种用户代理可靠地解析。

无障碍访问实践

语义化 HTML

<!– ❌ 不好：使用 div 代替语义标签 –>
<div onclick="handleClick()">点击我</div>

<!– ✅ 好：使用语义化标签 –>
<button onclick="handleClick()">点击我</button>

图片替代文本

<!– ❌ 不好：没有替代文本 –>
<img src="logo.png">

<!– ✅ 好：提供描述性替代文本 –>
<img src="logo.png" alt="公司Logo">

<!– ✅ 好：装饰性图片使用空 alt –>
<img src="decoration.png" alt="">

表单无障碍

<!– ❌ 不好：没有关联标签 –>
<input type="text" name="username">

<!– ✅ 好：使用 label 关联 –>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!– ✅ 好：使用 aria-label –>
<input type="text" aria-label="用户名">

键盘导航

<!– 确保所有交互元素都能通过键盘访问 –>
<button tabindex="0">按钮</button>
<a href="#" tabindex="1">链接</a>

ARIA 属性

<!– 状态提示 –>
<button aria-pressed="false">切换</button>

<!– 隐藏但可访问的内容 –>
<span aria-hidden="true">装饰性图标</span>

<!– 实时状态 –>
<div aria-live="polite">
搜索结果已更新
</div>

颜色对比度

/* ❌ 不好：对比度不足 */
.text {
color: #666;
background: #eee;
}

/* ✅ 好：足够的对比度 */
.text {
color: #333;
background: #fff;
}

无障碍访问工具

自动化测试工具

• axe-core：自动化无障碍测试引擎
• Lighthouse：Chrome 开发者工具中的无障碍评分
• WAVE：网页无障碍评估工具

屏幕阅读器

• JAWS：Windows 平台屏幕阅读器
• NVDA：免费开源屏幕阅读器
• VoiceOver：macOS/iOS 内置屏幕阅读器

无障碍访问检查清单

const accessibilityChecklist = [
'所有图片都有 alt 属性',
'表单元素都有关联标签',
'颜色对比度符合标准',
'所有功能都可通过键盘访问',
'使用语义化 HTML',
'提供清晰的焦点指示',
'避免仅依赖颜色传达信息',
'提供跳过导航链接',
'确保动画可以被关闭',
'提供足够的文本大小'
];

实际案例

案例一：无障碍导航

<!– 跳过链接 –>
<a href="#main-content" class="skip-link">
跳转到主内容
</a>

<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>

<main id="main-content">
<!– 主内容 –>
</main>

案例二：模态框无障碍

<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">确认删除</h2>
<p>确定要删除这个项目吗？</p>
<button autofocus>确认</button>
<button>取消</button>
</div>

案例三：动态内容更新

<div aria-live="polite" aria-atomic="true" id="status-message">
<!– 动态更新的内容 –>
</div>

无障碍访问的常见误区

误区一：只关注视觉障碍用户

无障碍访问不仅仅是针对视觉障碍用户，还包括：

• 听力障碍用户
• 运动障碍用户
• 认知障碍用户

误区二：自动化测试足够了

自动化测试只能发现部分问题，人工测试和真实用户测试同样重要。

误区三：无障碍访问会降低用户体验

良好的无障碍设计实际上会提升所有用户的体验。

总结

无障碍访问是前端开发不可或缺的一部分。通过遵循无障碍访问原则，我们可以：

让我们一起努力，让技术更具包容性，让每一个人都能享受数字时代的便利。