HTML5 无障碍访问指南 (通俗易懂版)

无障碍访问(Accessibility)就是让网站能被所有人使用，包括残障人士。HTML5提供了一些很棒的功能来帮助实现这一点。

为什么重要？

想象一下：

• 盲人用屏幕阅读器"听"网页
• 手部不便的人可能只用键盘导航
• 色盲用户可能看不清某些颜色对比

12个关键无障碍实践

1. 语义化HTML标签

用正确的标签做正确的事：

<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<footer>...</footer>

2. 图片添加alt文本

<img src="logo.png" alt="公司logo - 一只蓝色小鸟">

3. 表单标签关联

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

4. 键盘可访问性

确保所有功能都能用键盘操作，测试用Tab键导航。

5. 颜色对比度

文字和背景要有足够对比度(至少4.5:1)，可以用在线工具检查。

6. ARIA属性

当HTML不够用时：

<button aria-label="关闭弹窗">X</button>
<div role="alert">您的消息已发送</div>

7. 视频字幕

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

8. 跳过导航链接

为键盘用户添加"跳过导航"链接：

<a href="#maincontent" class="skip-link">跳至主要内容</a>

9. 动态内容更新

用aria-live告知屏幕阅读器内容变化：

<div aria-live="polite">新消息加载中...</div>

10. 禁用自动播放

避免视频/音频自动播放，这会影响屏幕阅读器用户。

11. 响应式设计

确保在各种设备上都能良好显示和使用。

12. 测试无障碍性

使用工具如：

• WAVE (浏览器扩展)
• axe DevTools
• 屏幕阅读器测试(NVDA/VoiceOver)

记住：无障碍设计不仅帮助残障人士，也能改善所有用户的体验！