为音频视频提供备选内容

在Web开发中，音频和视频内容已成为现代网站的重要组成部分。然而，为了确保所有用户（包括使用辅助技术的用户）都能访问这些内容，遵循W3C的Web内容可访问性指南(WCAG)至关重要。

HTML规范要求

根据HTML5规范和WCAG指南，为音频视频提供备选内容的主要要求包括：

为所有非纯装饰性视频提供文本替代或音频描述
为所有非纯装饰性音频提供文本替代
为预录制的视频提供字幕
为直播视频提供实时字幕（如适用）
为复杂的视频内容提供详细文本描述

正面示例

示例1：基本视频元素与文本替代

html 复制代码

<video controls width="600">
  <source src="presentation.mp4" type="video/mp4">
  <source src="presentation.webm" type="video/webm">
  <!-- 视频无法播放时的备选内容 -->
  <p>
    您的浏览器不支持HTML5视频。以下是视频内容的文字描述：
    本视频展示了2023年产品发布会的开场演讲，CEO介绍了公司新产品线的三大创新功能...
  </p>
  <!-- 为预录视频提供字幕 -->
  <track kind="subtitles" src="presentation.vtt" srclang="zh" label="中文">
</video>

示例2：音频元素与完整文本记录

html 复制代码

<audio controls>
  <source src="interview.mp3" type="audio/mpeg">
  <source src="interview.ogg" type="audio/ogg">
  <!-- 音频无法播放时的备选内容 -->
  <p>
    您的浏览器不支持音频元素。以下是采访内容的完整文字记录：
    【记者】：请问您如何看待当前市场趋势？
    【专家】：我认为当前市场正经历三个主要变化...
  </p>
</audio>

示例3：复杂视频的详细描述

html 复制代码

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <!-- 为视觉复杂内容提供详细描述 -->
  <p class="visually-hidden">
    本教程视频展示了如何组装书架。视频开始时，桌面上散落着各种木板和配件。
    第一步，主持人拿起标有"A"的侧板，将其垂直放置...
  </p>
  <track kind="descriptions" src="tutorial-descriptions.vtt" srclang="zh">
</video>

反面示例

示例1：缺少任何备选内容

html 复制代码

<!-- 不符合规范：没有提供任何备选内容 -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
</video>

问题：当视频无法播放时，用户将完全无法获取内容；屏幕阅读器用户也无法了解视频内容。

示例2：无意义的备选文本

html 复制代码

<!-- 不符合规范：备选文本没有实际意义 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <p>点击播放音频</p>
</audio>

问题："点击播放音频"没有提供音频内容的任何信息，对无法访问音频的用户没有帮助。

示例3：依赖自动生成的字幕

html 复制代码

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <!-- 仅依赖可能不准确的自动字幕 -->
  <track kind="subtitles" src="auto-generated.vtt" srclang="zh">
</video>

问题：自动生成的字幕通常包含错误，特别是对于专业术语或口音较重的讲话者。

最佳实践

文本记录完整性：确保文本替代包含所有重要信息，包括讲话内容、重要声音和视觉信息
字幕格式：使用WebVTT(.vtt)格式创建字幕文件，确保时间同步准确
隐藏技术：对屏幕阅读器用户可见但视觉上隐藏的详细描述使用适当的CSS技术
测试验证：关闭媒体支持测试备选内容，使用屏幕阅读器验证可访问性
上下文考虑：根据内容复杂程度调整备选内容的详细程度

结论

为音频视频提供适当的备选内容不仅是HTML规范的要求，更是创建包容性网络环境的基本实践。通过实施这些规范，开发者可以确保所有用户，无论其能力或使用何种技术，都能访问和理解多媒体内容。正面示例展示了如何正确实现这些要求，而反面示例则警示了常见的可访问性陷阱。遵循这些指南将大大提升网站的可访问性和用户体验。