知识库

Appearance

Return to top
On this page

HTML可访问性

HTML可访问性（Accessibility）是指设计和开发网页时，确保所有用户，包括残障人士，都能访问和使用网页内容。这包括视觉、听觉、运动、认知等方面有障碍的用户。

什么是Web可访问性

Web可访问性意味着让所有人都能感知、理解、导航和与Web交互，无论他们是否有残障。这包括：

  • 视觉障碍用户（使用屏幕阅读器或放大工具）
  • 听觉障碍用户（需要视觉替代方案）
  • 运动障碍用户（使用键盘导航或语音控制）
  • 认知障碍用户（需要清晰的结构和简单语言）

重要性

道德层面

  • 让所有人都能平等地访问信息
  • 避免排斥特定用户群体

法律层面

  • 许多国家和地区有相关法律要求
  • 满足WCAG（Web内容可访问性指南）标准

商业层面

  • 扩大用户群体
  • 提升用户体验
  • 避免法律风险

基本原则

1. 可感知性（Perceivable）

信息必须以用户可以感知的方式呈现：

html
<!-- 好的做法：为图像提供替代文本 -->
<img src="chart.png" alt="2023年销售数据显示增长趋势">

<!-- 好的做法：提供视频字幕 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文字幕">
</video>

2. 可操作性（Operable）

用户界面组件必须可操作：

html
<!-- 好的做法：确保键盘可访问 -->
<button onclick="doSomething()">点击我</button>

<!-- 好的做法：提供键盘焦点管理 -->
<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

3. 可理解性（Understandable）

信息和用户界面操作必须可理解：

html
<!-- 好的做法：使用清晰的标签 -->
<form>
  <label for="email">电子邮箱地址（如：user@example.com）</label>
  <input type="email" id="email" name="email">
</form>

4. 健壮性（Robust）

内容必须足够健壮，可以被各种用户代理（包括辅助技术）解释：

html
<!-- 好的做法：使用语义化HTML -->
<article>
  <header>
    <h2>文章标题</h2>
  </header>
  <section>
    <p>文章内容...</p>
  </section>
</article>

关键技术

替代文本

为非文本内容提供文本替代：

html
<!-- 图像替代文本 -->
<img src="logo.png" alt="公司名称标识">
<img src="chart.png" alt="2023年销售数据：Q1 100万，Q2 120万，Q3 150万，Q4 180万">

<!-- 装饰性图像 -->
<img src="decoration.png" alt="" role="presentation">

<!-- 复杂图像 -->
<figure>
  <img src="diagram.png" alt="系统架构图，包含用户界面层、业务逻辑层和数据层">
  <figcaption>系统架构示意图</figcaption>
</figure>

ARIA（可访问富互联网应用）

ARIA属性提供额外的语义信息：

html
<!-- 为动态内容提供状态信息 -->
<div id="status" aria-live="polite" aria-atomic="true">操作成功</div>

<!-- 定义页面区域 -->
<div role="banner">页面头部</div>
<div role="navigation">导航</div>
<div role="main">主要内容</div>
<div role="contentinfo">页面底部</div>

<!-- 为自定义控件提供语义 -->
<div role="button" tabindex="0" aria-pressed="false" onclick="toggleButton()">
  切换按钮
</div>

<!-- 提供标签 -->
<div aria-label="搜索框">
  <input type="text" placeholder="搜索...">
</div>

<!-- 关联标签 -->
<div>
  <input type="text" id="search" aria-describedby="search-help">
  <div id="search-help">输入关键词进行搜索</div>
</div>

键盘导航

确保所有交互元素都可以通过键盘访问：

html
<!-- 确保所有交互元素都可以获得焦点 -->
<button>按钮</button>
<a href="#">链接</a>
<input type="text" placeholder="输入框">

<!-- 为自定义控件添加tabindex -->
<div tabindex="0" role="button" onclick="handleClick()">可点击元素</div>

<!-- 跳过链接 -->
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<main id="main-content">
  <h1>主要内容</h1>
</main>

表单可访问性

html
<form>
  <!-- 使用label标签 -->
  <label for="name">姓名</label>
  <input type="text" id="name" name="name">
  
  <!-- 或者使用包含关系 -->
  <label>
    接受条款
    <input type="checkbox" name="terms">
  </label>
  
  <!-- 提供错误信息 -->
  <label for="email">邮箱</label>
  <input type="email" id="email" name="email" aria-describedby="email-error">
  <div id="email-error" role="alert">请输入有效的邮箱地址</div>
  
  <!-- 分组相关控件 -->
  <fieldset>
    <legend>通知偏好</legend>
    <label><input type="checkbox" name="email-notifications">邮件通知</label>
    <label><input type="checkbox" name="sms-notifications">短信通知</label>
  </fieldset>
</form>

颜色和对比度

html
<!-- 确保足够的颜色对比度 -->
<style>
  /* 确保文本对比度至少为4.5:1（大字体为3:1） */
  .text {
    color: #000000; /* 深色文本 */
    background-color: #ffffff; /* 浅色背景 */
  }
  
  .high-contrast {
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;
  }
</style>

<!-- 不要仅依赖颜色传递信息 -->
<p>状态：<span class="status status-error" aria-label="错误">✗</span> 请检查输入</p>

语义化HTML

使用正确的HTML元素来传达内容的含义：

html
<!-- 好的做法：使用语义化标签 -->
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>文章标题</h2>
      <time datetime="2023-12-01">2023年12月1日</time>
    </header>
    <section>
      <h3>章节标题</h3>
      <p>内容...</p>
    </section>
  </article>
</main>

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">相关文章</a></li>
  </ul>
</aside>

<footer>
  <p>&copy; 2023 版权信息</p>
</footer>

媒体可访问性

音频和视频

html
<!-- 提供字幕和描述 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文字幕">
  <track kind="descriptions" src="descriptions.vtt" srclang="zh" label="音频描述">
  您的浏览器不支持视频播放。
</video>

<!-- 提供音频描述的替代文本 -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <p>播客内容：<a href="transcript.html">查看文字稿</a></p>
</audio>

测试可访问性

自动化测试工具

html
<!-- 使用浏览器开发者工具检查可访问性 -->
<!-- 1. Chrome: 开发者工具 -> 可访问性标签 -->
<!-- 2. Firefox: 可访问性检查器 -->
<!-- 3. 在线工具如 axe-core -->

手动测试

html
<!-- 测试键盘导航 -->
<!-- 1. 只使用Tab键导航整个页面 -->
<!-- 2. 确保所有交互元素都可以访问 -->
<!-- 3. 检查焦点指示器是否清晰 -->

<!-- 测试屏幕阅读器 -->
<!-- 1. 使用NVDA、JAWS或VoiceOver -->
<!-- 2. 确保内容按逻辑顺序读出 -->
<!-- 3. 验证所有重要信息都能被读出 -->

常见错误和解决方案

1. 缺少替代文本

html
<!-- 错误 -->
<img src="photo.jpg">

<!-- 正确 -->
<img src="photo.jpg" alt="会议现场，团队成员正在讨论项目">

2. 语义化标签使用不当

html
<!-- 错误 -->
<div onclick="submitForm()" style="color: blue; text-decoration: underline;">提交</div>

<!-- 正确 -->
<button type="submit">提交</button>

3. 标签缺失

html
<!-- 错误 -->
<input type="text" placeholder="用户名">

<!-- 正确 -->
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

4. 颜色作为唯一信息传递方式

html
<!-- 错误 -->
<input type="text" style="border-color: red;"> <!-- 仅通过颜色显示错误 -->

<!-- 正确 -->
<input type="text" style="border-color: red;" aria-invalid="true" aria-describedby="error-message">
<div id="error-message" style="color: red;">用户名无效</div>

最佳实践总结

  1. 从设计阶段考虑可访问性
  2. 使用语义化HTML标签
  3. 提供替代文本
  4. 确保键盘导航
  5. 使用足够的颜色对比度
  6. 提供清晰的标签和说明
  7. 测试可访问性
  8. 持续改进和验证

通过遵循这些可访问性原则和实践，我们可以创建对所有用户都友好的Web体验，确保每个人都能平等地访问和使用我们的网站内容。