React项目中video标签触发ESLint字幕track错误，如何解决？

问题场景 #

在React项目中添加以下视频代码：

<video controls>
  <source src="content.mp4" type="video/mp4" />
  <source src="content.webm" type="video/webm" />
  Your browser does not support the video.
</video>

触发ESLint错误：

Media elements such as < audio > and < video > must have a < track > for captions.

错误含义 #

这是ESLint的无障碍检查规则（来自eslint-plugin-jsx-a11y的media-has-caption规则），核心目的是强制音视频元素符合Web内容无障碍指南（WCAG）要求，保障听障用户、静音环境下的用户能通过字幕理解媒体内容。

最佳解决方式 #

1. 提供合法字幕（推荐） #

如果视频有对应的字幕文件（通常为VTT格式），添加<track>标签指定字幕信息：

<video controls>
  <source src="content.mp4" type="video/mp4" />
  <source src="content.webm" type="video/webm" />
  {/* 字幕轨道 */}
  <track
    kind="captions"
    src="content.vtt"
    srclang="en"
    label="English"
    default
  />
  Your browser does not support the video.
</video>

• kind="captions"：明确该轨道是字幕（包含音效、对话等说明）
• src：字幕文件路径（VTT是Web通用的字幕格式）
• srclang：字幕语言代码
• label：给用户显示的语言名称
• default：设置该字幕为默认启用

2. 临时禁用规则（特殊场景） #

如果视频无声音、无需要传递的信息，或暂时无法提供字幕，可通过注释禁用该行的ESLint规则：

{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video controls>
  <source src="content.mp4" type="video/mp4" />
  <source src="content.webm" type="video/webm" />
  Your browser does not support the video.
</video>

若需全局关闭该规则（不推荐，会降低项目无障碍性），可在项目ESLint配置文件（如.eslintrc）中修改：

{
  "rules": {
    "jsx-a11y/media-has-caption": "off"
  }
}

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