无障碍, WCAG·
Web 无障碍访问指南
让每个人都能访问和使用你的网站
Web 无障碍访问确保所有用户，包括有残障的用户，都能访问和使用你的网站。
什么是无障碍访问
Web 无障碍访问是指让所有人都能感知、理解、导航和交互 Web 内容。
WCAG 原则
WCAG（Web 内容无障碍指南）基于四个原则：
- 可感知 - 信息和用户界面组件必须以用户能感知的方式呈现
- 可操作 - 用户界面组件和导航必须可操作
- 可理解 - 信息和用户界面操作必须可理解
- 健壮性 - 内容必须足够健壮，能被可靠地被各种用户代理（包括辅助技术）解读
语义化 HTML
使用正确的 HTML 元素：
<!-- 正确 -->
<header>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>© 2024 网站名称</p>
</footer>
图片替代文本
为所有图片提供有意义的 alt 文本：
<!-- 有意义的图片 -->
<img src="dog.jpg" alt="一只金毛犬在草地上奔跑">
<!-- 装饰性图片 -->
<img src="decorative.png" alt="" role="presentation">
<!-- 信息图片 -->
<img src="chart.png" alt="销售额同比增长 30%">
表单标签
为表单元素提供标签：
<form>
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" required>
<fieldset>
<legend>性别</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</fieldset>
</form>
键盘导航
确保所有交互元素都可以通过键盘访问：
/* 焦点样式 */
a:focus, button:focus, input:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
/* 跳过导航链接 */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
<a href="#main-content" class="skip-link">跳到主要内容</a>
ARIA 属性
使用 ARIA 属性增强可访问性：
<!-- 按钮 -->
<button aria-label="关闭" onclick="closeDialog()">×</button>
<!-- 展开和折叠 -->
<button aria-expanded="false" aria-controls="content1">展开</button>
<div id="content1">内容...</div>
<!-- 进度条 -->
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
75%
</div>
<!-- 模态框 -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">对话框标题</h2>
<p>对话框内容...</p>
</div>
颜色对比度
确保文本和背景之间有足够的对比度：
- 正常文本：至少 4.5:1
- 大文本（18pt+ 或 14pt+ 加粗）：至少 3:1
使用工具检查：
最佳实践
- 语义化 HTML - 使用正确的 HTML 元素
- 键盘支持 - 确保键盘导航
- 焦点管理 - 清晰的焦点指示
- 颜色对比度 - 足够的对比度
- 替代文本 - 为图片提供 alt 文本
- 表单标签 - 使用 label 和 fieldset
- 测试工具 - 使用无障碍测试工具
测试工具
- WAVE - 可视化无障碍测试
- axe DevTools - Chrome 扩展
- Lighthouse - 性能和无障碍测试
学习资源
让所有人都能访问你的网站！