html音频可访问性需同时实现文本转写与播放控制：webvtt字幕须正确设置srclang、label和default属性；文字稿应嵌入页面并带时间戳；自定义控件需支持键盘操作及aria状态同步；audio元素必须通过aria-labelledby或aria-label提供明确名称。
HTML 音频可访问性不能只靠加 controls 属性应付——它解决不了字幕缺失、键盘不可操作、屏幕阅读器无法识别内容等核心问题。真正有效的提升，必须同时覆盖文本转写（text transcript）和播放控制（playback controls）两层，且二者缺一不可。
用 <track></track> 加载 WebVTT 字幕时必填的三个属性
只写 <track kind="captions" src="audio.vtt"></track> 是无效的。浏览器可能加载文件，但屏幕阅读器看不到语言选项、用户无法在播放器菜单里选择，首次播放时字幕也不会出现。
-
srclang必须是 BCP 47 标准小写格式，如zh、en、ja；zh-CN或ZH在部分读屏器（如 NVDA 2025+）中会静默失败 -
label必须是用户可见的简洁名称，如label="中文"，不能留空或写label="subtitles" - 至少一条轨道需带
default，否则字幕默认关闭——这不是“用户偏好”，而是可访问性底线
完整文字稿不能只放链接，得嵌入页面结构
仅在 @#@#@#@#@#@#@#@#@#@0”远远不够。视障用户可能根本找不到这个链接，搜索引擎也无法索引音频核心信息，且移动端用户点击跳转后丢失上下文。
- 文字稿应作为
<section aria-labelledby="audio-title"></section>嵌入同一页面，id="audio-title"指向音频上方的标题 - 每段文字建议带时间戳（如
[00:12]），并用<time datetime="PT12S">00:12</time>包裹，便于辅助技术解析 - 避免把文字稿塞进
<details><summary></summary></details>：很多读屏器不自动朗读折叠内容，用户得手动展开才看得到
自定义播放控件必须手动支持键盘与 ARIA 状态
一旦去掉 controls 属性，所有交互逻辑就得自己实现。此时若只监听 click，键盘用户将完全无法操作——Tab 聚焦不到按钮，Enter/Space 无响应，屏幕阅读器也读不出当前播放状态。
- 每个控制按钮（播放/暂停/音量）必须是
<button></button>元素，或显式加role="button"+tabindex="0" - 播放状态需同步更新
aria-pressed（对切换类按钮）或aria-label（如从“播放”动态改为“暂停”） - 进度条要用
<input type="range">并配aria-valuenow、aria-valuemin、aria-valuemax，不能用<div> 模拟 <h3>音频元素本身必须有明确的可访问名称</h3> <p><code><audio></audio>不支持alt属性，加了也无效。如果没提供名称，屏幕阅读器只会报“音频元素”，用户完全不知道这是访谈录音、操作指南还是背景音效。- 优先用
aria-labelledby指向页面中已有的可见标题，如<h2 id="interview-title">张工访谈实录</h2> - 若标题不可见（如纯图标音频卡片），才用
aria-label，内容需说明类型+主题，如aria-label="产品配置教程音频（含中文字幕）" - 禁用
title属性替代：多数读屏器不读title，且它不参与焦点逻辑，也不被搜索引擎索引
最容易被忽略的是：WebVTT 文件里的时间戳格式错误（如用英文冒号而非全角或标准分秒格式）、文字稿未按语义包裹段落（导致读屏器连读成一整段）、以及自定义控件更新
aria-label后没触发 DOM 重绘——这些细节不修复，前面所有努力都会在真实辅助技术环境中失效。 - 优先用
