10.3 可访问性(A11Y)设计

可访问性（Accessibility，简称A11Y）是确保所有用户，包括残障人士，都能平等访问和使用Web内容的实践。本节将全面介绍HTML5中的可访问性设计原则和实现技术。

可访问性基本原则

遵循WCAG 2.1四大原则（POUR）：

可感知性（Perceivable）：内容必须对所有用户可见
可操作性（Operable）：界面必须可通过多种方式操作
可理解性（Understandable）：内容和操作必须清晰易懂
稳健性（Robust）：内容必须能被各种辅助技术解析

1. 语义化HTML结构

正确使用HTML5语义元素

<!-- 推荐使用语义元素 -->
<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/products">产品</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
  </article>
</main>

<footer>...</footer>

避免div滥用

<!-- 不推荐 -->
<div class="header">
  <div class="nav">
    <div class="nav-item">...</div>
  </div>
</div>

<!-- 推荐 -->
<header>
  <nav>
    <ul>
      <li>...</li>
    </ul>
  </nav>
</header>

2. ARIA（无障碍富互联网应用）属性

常用ARIA属性

<!-- 按钮角色 -->
<div role="button" tabindex="0">自定义按钮</div>

<!-- 对话框 -->
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">提示</h2>
  <p>对话框内容...</p>
</div>

<!-- 表单错误提示 -->
<label for="email">邮箱</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" class="error">邮箱格式不正确</span>

ARIA状态和属性

<!-- 下拉菜单 -->
<button aria-expanded="false" aria-controls="dropdown-menu">
  菜单
</button>
<ul id="dropdown-menu" aria-hidden="true">
  <li>选项1</li>
  <li>选项2</li>
</ul>

<!-- 进度条 -->
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  75%
</div>

3. 键盘导航支持

焦点管理

<!-- 可聚焦元素必须有视觉反馈 -->
<a href="#" class="btn">按钮</a>
<button>提交</button>

<style>
  .btn:focus, button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
</style>

自定义交互组件

// 自定义下拉菜单的键盘支持
document.querySelectorAll('[role="menu"]').forEach(menu => {
  const items = menu.querySelectorAll('[role="menuitem"]');
  
  menu.addEventListener('keydown', e => {
    const currentItem = document.activeElement;
    const firstItem = items[0];
    const lastItem = items[items.length - 1];
    
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (currentItem === lastItem) {
        firstItem.focus();
      } else {
        currentItem.nextElementSibling.focus();
      }
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      if (currentItem === firstItem) {
        lastItem.focus();
      } else {
        currentItem.previousElementSibling.focus();
      }
    } else if (e.key === 'Home') {
      e.preventDefault();
      firstItem.focus();
    } else if (e.key === 'End') {
      e.preventDefault();
      lastItem.focus();
    } else if (e.key === 'Escape') {
      menu.setAttribute('aria-hidden', 'true');
    }
  });
});

4. 表单可访问性

完整标签关联

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

<!-- 推荐 -->
<label for="name">姓名</label>
<input type="text" id="name">

<!-- 或使用aria-label -->
<input type="text" aria-label="姓名">

表单验证

<label for="email">邮箱地址</label>
<input type="email" id="email" aria-describedby="email-help email-error" required>
<p id="email-help">请输入有效的邮箱地址</p>
<p id="email-error" class="error" aria-live="assertive"></p>

<script>
  document.getElementById('email').addEventListener('blur', function() {
    const errorElement = document.getElementById('email-error');
    if (!this.validity.valid) {
      errorElement.textContent = '请输入有效的邮箱地址';
      this.setAttribute('aria-invalid', 'true');
    } else {
      errorElement.textContent = '';
      this.setAttribute('aria-invalid', 'false');
    }
  });
</script>

5. 多媒体内容可访问性

图片替代文本

<!-- 装饰性图片 -->
<img src="decorative.jpg" alt="">

<!-- 信息性图片 -->
<img src="chart.jpg" alt="2023年销售趋势图：第一季度增长15%，第二季度增长22%">

<!-- 复杂图片 -->
<img src="infographic.jpg" aria-describedby="infographic-desc">
<div id="infographic-desc" class="visually-hidden">
  详细的信息图描述内容...
</div>

视频字幕和音频描述

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕">
  <track src="descriptions.vtt" kind="descriptions" srclang="zh" label="中文描述">
  <!-- 浏览器不支持时的回退内容 -->
  <p>您的浏览器不支持HTML5视频，请<a href="video.mp4">下载视频</a>观看。</p>
</video>

6. 颜色与对比度

足够的颜色对比度

/* 不推荐 - 对比度不足 */
.low-contrast {
  color: #999;
  background: #fff;
}

/* 推荐 - 符合WCAG AA标准 */
.high-contrast {
  color: #333;
  background: #fff;
}

不依赖颜色传递信息

<!-- 不推荐 -->
<p>必填字段显示为<span style="color: red">红色</span></p>

<!-- 推荐 -->
<p>必填字段显示为<span style="color: red" aria-label="必填">红色*</span></p>

7. 动态内容可访问性

实时区域（Live Regions）

<div aria-live="polite" id="notifications">
  <!-- 动态内容将自动被屏幕阅读器读出 -->
</div>

<script>
  function showNotification(message) {
    const notifications = document.getElementById('notifications');
    notifications.textContent = message;
  }
</script>

页面更新通知

// 单页应用路由变化时
function navigateTo(page) {
  // 更新内容...
  document.title = `新页面 - ${page}`;
  
  // 通知屏幕阅读器用户
  const liveRegion = document.getElementById('a11y-announcement');
  liveRegion.textContent = `已加载${page}页面`;
  setTimeout(() => liveRegion.textContent = '', 1000);
}

8. 可访问性测试工具

自动化测试

axe DevTools：浏览器扩展和JavaScript库
Lighthouse：Chrome内置的审计工具
WAVE：Web Accessibility Evaluation Tool

手动测试

键盘导航测试：仅用Tab、Shift+Tab、Enter和Space操作
屏幕阅读器测试：
- NVDA (Windows)
- VoiceOver (macOS/iOS)
- TalkBack (Android)
高对比度模式测试
缩放测试：200%缩放查看布局

9. 可访问性声明

<!-- 在页脚添加可访问性声明 -->
<footer>
  <div role="contentinfo">
    <h2>可访问性声明</h2>
    <p>我们致力于使本网站对所有人可访问。如遇到任何可访问性问题，请联系<a href="mailto:[email protected]">[email protected]</a>。</p>
    <p>最后更新：<time datetime="2023-06-15">2023年6月15日</time></p>
  </div>
</footer>

可访问性检查清单

[ ] 所有图片都有合适的alt文本
[ ] 所有表单字段都有关联的label
[ ] 颜色对比度符合WCAG 2.1 AA标准
[ ] 所有功能都可以通过键盘操作
[ ] 焦点状态清晰可见
[ ] 使用语义化HTML元素
[ ] 动态内容有适当的ARIA标记
[ ] 页面标题和标题层级清晰
[ ] 语言属性设置正确（<html lang="zh-CN">）
[ ] 跳过导航链接可用

章节小结

本节全面介绍了HTML5可访问性设计的核心内容：

语义化HTML结构的基础和重要性
ARIA属性的正确使用场景和方法
键盘导航支持和焦点管理技术
表单和多媒体内容的可访问性实现
颜色对比度和非颜色依赖的设计原则
动态内容的可访问性处理方法
测试工具和评估方法
可访问性声明和维护策略

通过实施这些可访问性最佳实践，开发者可以创建包容性更强的Web应用，确保所有用户都能平等获取信息和服务。下一节将介绍HTML5验证与测试工具的使用方法。

#前端开发分享于 2025-05-20

上一篇：10.2 性能优化技巧下一篇：10.4 HTML5 验证与测试工具