Web 可访问性最佳实践：构建包容性的数字体验

3. 提供替代文本

为图片添加 alt 属性，让屏幕阅读器能够描述图片内容。

<!-- 不推荐 -->
<img src="logo.png">

<!-- 推荐 -->
<img src="logo.png" alt="公司 logo">

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. 适当的表单标签

为表单元素显式关联标签，提高可访问性。

<!-- 不推荐 -->
<input type="text" placeholder="姓名">

<!-- 推荐 -->
<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>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

<!-- 按钮状态 -->
<button aria-expanded="false" aria-controls="menu">菜单</button>
<div hidden>
  <!-- 菜单内容 -->
</div>

7. 跳过导航链接

为键盘用户提供快速跳转到主要内容区域的链接。

<a href="#main-content" class="skip-link">跳过导航</a>
<nav>...</nav>
<main id="main-content">...</main>

<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 直接到 h3）。

<!-- 不推荐 -->
<h1>网站标题</h1>
<h3>章节标题</h3>
<h2>子章节标题</h2>

<!-- 推荐 -->
<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. 响应式设计

确保网站在不同设备上都能正常访问，字体大小随屏幕调整。

/* 响应式布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式字体 */
body { font-size: 16px; }
@media (max-width: 768px) {
  body { font-size: 14px; }
}

/* 响应式导航 */
.nav { display: flex; }
@media (max-width: 768px) {
  .nav { flex-direction: column; }
}

测试工具推荐

Lighthouse

Chrome DevTools 内置的审计工具。

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

axe DevTools

专业的浏览器扩展插件。

1. 安装 axe DevTools 扩展
2. 打开目标页面
3. 点击图标运行扫描
4. 查看详细报告

WAVE

在线评估工具。

1. 访问 https://wave.webaim.org/
2. 输入网址
3. 点击 Enter
4. 查看可视化反馈

实战案例

案例 1：可访问的导航菜单

结合 HTML、CSS 和 JS 实现一个支持键盘操作的折叠菜单。

<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>
    <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; border-radius: 4px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 10px 0 0; }
li { margin: 5px 0; }
a { color: white; text-decoration: none; display: block; padding: 5px; border-radius: 4px; }
a:hover, a:focus { background: rgba(255, 255, 255, 0.1); }
button:focus, a:focus { outline: 2px solid #667eea; outline-offset: ; }
</style>

案例 2：可访问的表单

标准的表单结构，包含明确的标签和错误提示区域。

<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>
  <div>
    <label for="message">留言</label>
    <textarea id="message" required></textarea>
  </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; font-size: 16px; cursor: pointer; }
button:hover, button:focus { background: #5a6fd8; }
button:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

案例 3：可访问的模态框

处理焦点管理和键盘事件（ESC 关闭）。

<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:hover, button:focus { background: #5a6fd8; }
button:focus { :  solid ; : ; }
</style>

CSS 样式细节建议

在编写样式时，注意保持代码的可读性和维护性，同时兼顾可访问性规范。

.accessibility-rhythm {
  /* 基础设置 */
  color: #333;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;

  /* 焦点样式 */
  &:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    font-size: 14px;
  }

  /* 高对比度模式 */
  &.high-contrast {
    color: #000;
    background: #fff;
  }
}

总结

Web 可访问性是前端开发的重要责任，它确保所有用户都能平等地访问和使用网站。在实现过程中，我们需要像对待艺术品一样精心考虑每一个细节，确保网站对所有人都友好。记住，像素不能偏差 1px，可访问性的标准也不能偏差一分一毫。CSS 是流动的韵律，JS 是叙事的节奏。让我们用可访问性为页面注入人文的温度，让每个用户都能平等地享受数字世界的美好。