无音轨替代GIF的<video>如何处理<track>相关a11y报错？

该a11y校验规则的设计初衷，是避免包含音频信息的视频缺失字幕，导致听障用户无法获取完整内容。针对完全无音轨、仅作为GIF轻量化替代的静音视频场景，不需要强行添加无效的字幕轨道，按以下方式处理即可合规消除警告，同时符合无障碍规范：

• 给<video>元素补充辅助技术可识别的语义属性
  必须添加的属性包括：
  • muted：显式标记视频为静音状态，是a11y规则识别无音频视频的核心判断依据
  • 对应场景的ARIA标签：如果视频承载视觉信息（比如操作演示动图），添加aria-label说明内容并明确标注无音频；如果视频是纯装饰性元素（比如页面背景动效），直接添加role="presentation"告知辅助技术无需解析该元素内容
  • playsinline：适配移动端自动播放逻辑，避免触发音频播放的交互拦截，和静音属性配合可完整传递无音频的语义

合规的代码示例如下：

<!-- 承载有效视觉信息的无音视频 -->
<video
  autoplay
  loop
  muted
  playsinline
  aria-label="下拉刷新操作演示动图，无音频内容"
  src="/assets/demo-refresh.mp4"
/>

<!-- 纯装饰性无音视频 -->
<video
  autoplay
  loop
  muted
  playsinline
  role="presentation"
  src="/assets/bg-effect.mp4"
/>

注意：不要为了过校验添加空的<track kind="captions">元素。字幕轨道的作用是同步转写视频内的语音、音效等音频信息，无音频场景下添加空轨道会误导读屏软件用户认为存在可读取的字幕内容，实际加载为空反而会破坏无障碍体验。

如果后续给该视频新增了任何音频内容（包括背景音效、语音旁白），必须补充对应语言的captions字幕轨道，保障听障用户的访问权益。

内容的提问来源于stack exchange，提问作者John Winston