无障碍多媒体嵌入

无障碍多媒体嵌入遵循 WCAG 标准，确保视听障碍用户能够获取多媒体内容。

核心要求

WCAG 级别要求

视频无障碍

字幕轨道（track元素）

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="subtitles-zh.vtt"
    srclang="zh"
    label="中文字幕"
    default
  >
  <track
    kind="captions"
    src="captions-zh.vtt"
    srclang="zh"
    label="中文隐藏字幕"
  >
</video>

WebVTT 字幕格式

WEBVTT

00:00:01.000 --> 00:00:04.000
欢迎观看本教程

00:00:05.000 --> 00:00:08.000
今天我们将学习HTML基础知识

00:00:09.000 --> 00:00:12.000
<bold>语义化标签</bold>是重点内容

音频描述

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="descriptions" src="descriptions.vtt" srclang="zh" label="音频描述">
</video>

音频无障碍

基本实现

<figure>
  <audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
  </audio>
  <figcaption>第15期播客：HTML语义化最佳实践</figcaption>
</figure>

<!-- 提供文字稿链接 -->
<p><a href="transcript.html">查看完整文字稿</a></p>

文字稿示例

<section aria-label="音频文字稿">
  <h2>文字稿</h2>
  <p>
    <strong>主持人：</strong>大家好，欢迎来到本期的节目...
  </p>
  <p>
    <strong>嘉宾：</strong>很高兴能参与这次讨论...
  </p>
</section>

键盘控制

自定义控件

<div class="media-player" role="region" aria-label="视频播放器">
  <video id="video" src="video.mp4"></video>

  <div class="controls">
    <button id="playBtn" aria-label="播放">
      <span class="icon-play"></span>
    </button>

    <input
      type="range"
      id="progress"
      min="0"
      max="100"
      value="0"
      aria-label="播放进度"
    >

    <button id="muteBtn" aria-label="静音">
      <span class="icon-volume"></span>
    </button>
  </div>
</div>

键盘交互

document.addEventListener('keydown', (e) => {
  const video = document.getElementById('video');

  switch(e.key) {
    case ' ':
    case 'k':
      video.paused ? video.play() : video.pause();
      break;
    case 'ArrowLeft':
      video.currentTime -= 5;
      break;
    case 'ArrowRight':
      video.currentTime += 5;
      break;
    case 'm':
      video.muted = !video.muted;
      break;
  }
});

无障碍检查清单

☐ 所有视频提供字幕（captions）
☐ 重要视觉内容提供音频描述
☐ 音频内容提供文字稿
☐ 播放器可通过键盘完全控制
☐ 控件具有正确的ARIA标签
☐ 自动播放默认关闭
☐ 播放状态可通过屏幕阅读器感知

注意：自动播放的视频必须提供暂停按钮，且不应自动播放有声音的内容。

要点总结

• 使用 <track> 元素添加字幕和音频描述
• 字幕格式使用 WebVTT，支持样式标记
• 音频内容必须提供文字稿
• 键盘控制支持空格播放、方向键快进
• 所有控件添加 aria-label 属性