Web 可访问性最佳实践：构建包容平等的网页体验

4. 键盘可访问性

确保所有功能都可以通过键盘访问，并为焦点元素提供清晰的样式。

/* 聚焦状态样式 */
:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
}

5. 适当的表单标签

为表单元素添加关联的 <label>，提高可访问性和点击区域。

<!-- 推荐做法 -->
<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入姓名">

6. ARIA 属性

使用 ARIA（Accessible Rich Internet Applications）属性增强动态内容的可访问性。

<nav aria-label="主导航">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>
<button aria-expanded="false" aria-controls="menu">菜单</button>

7. 跳过导航链接

为键盘用户提供跳过导航直达主要内容的链接，减少重复操作。

<a href="#main-content" class="skip-link">跳过导航</a>
<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #667eea;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 0;
}
</style>

8. 合理的标题层级

使用正确的标题层级（H1-H6），不要跳级，帮助屏幕阅读器构建文档大纲。

<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>

9. 多媒体内容的字幕

为视频和音频内容提供字幕和文字稿，方便听障用户理解。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文">
  您的浏览器不支持视频播放。
</video>

10. 响应式设计

确保网站在不同设备上都能正常访问，包括字体大小和布局的适配。

body {
  font-size: 16px;
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

测试工具

Lighthouse

使用 Chrome DevTools 的 Lighthouse 面板测试可访问性。

1. 打开 Chrome DevTools。
2. 选择 Lighthouse 面板。
3. 勾选 Accessibility 选项。
4. 点击 Generate report 按钮查看结果。

axe DevTools

axe DevTools 是一个专门的可访问性测试工具，可集成到浏览器中。

1. 安装 axe DevTools 浏览器扩展。
2. 打开要测试的页面。
3. 点击图标并运行 Scan。

WAVE

WAVE（Web Accessibility Evaluation Tool）是一个在线可访问性测试工具。

1. 访问 https://wave.webaim.org/
2. 输入网址并分析。

实战案例

可访问的导航菜单

包含 ARIA 属性和 JavaScript 交互逻辑。

<nav aria-label="主导航">
  <button id="menu-toggle" aria-expanded="false" aria-controls="menu">菜单</button>
  <ul id="menu" hidden>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
  </ul>
</nav>
<script>
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
  const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
  menuToggle.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>
<style>
nav { background: #333; color: white; padding: 10px; }
button { background: #667eea; color: white; border: none; padding: 8px 16px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 10px 0 0; }
a { color: white; text-decoration: none; display: block; padding: 5px; }
a:hover, a:focus { background: rgba(255, 255, 255, 0.1); }
button:focus, a:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

可访问的表单

包含明确的 Label 关联和焦点样式。

<form>
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" required>
  </div>
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" required>
  </div>
  <button type="submit">提交</button>
</form>
<style>
form { max-width: 600px; margin: 0 auto; padding: 20px; background: #f5f7fa; border-radius: 8px; }
div { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
input:focus, textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
button:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

可访问的模态框

包含焦点管理和键盘事件处理。

<button id="modal-toggle">打开模态框</button>
<div id="modal" aria-hidden="true" role="dialog" aria-labelledby="modal-title">
  <div class="modal-content">
    <h2 id="modal-title">模态框标题</h2>
    <p>模态框内容</p>
    <button id="modal-close">关闭</button>
  </div>
</div>
<script>
const modalToggle = document.getElementById('modal-toggle');
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modal-close');

modalToggle.addEventListener('click', () => {
  modal.setAttribute('aria-hidden', 'false');
  modalClose.focus();
});

modalClose.addEventListener('click', () => {
  modal.setAttribute('aria-hidden', 'true');
  modalToggle.focus();
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') {
    modal.setAttribute('aria-hidden', 'true');
    modalToggle.focus();
  }
});
</script>
<style>
#modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
#modal[aria-hidden="true"] { display: none; }
.modal-content { background: white; padding: 20px; border-radius: 8px; max-width: 500px; width: 90%; }
button { background: #667eea; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
button:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

结语

实现 Web 可访问性是前端开发的重要责任。它要求我们在设计时考虑每一个细节，确保网站对所有人都友好。从语义化标签到键盘导航，每一个微小的改进都在消除数字鸿沟。让我们用代码注入人文的温度，让每个用户都能平等地享受数字世界的美好。