jsx-a11y/media-has-caption

People who are deaf or hard of hearing, or who watch with the sound off, can't follow a video or a recording without captions.

An <audio> or <video> needs a direct child <track kind="captions">. A muted element has no sound to caption, so it isn't reported.

Configure

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/media-has-caption" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"jsx-a11y/media-has-caption" = ["error", {
  audio = [],
  video = [], # list of strings
  track = [], # list of strings
}]

Examples

Reported:

const player = <video src="/intro.mp4" controls />;

A track of another kind doesn't count:

const player = (
  <video src="/intro.mp4" controls>
    <track kind="subtitles" src="/intro.fr.vtt" />
  </video>
);

Not reported:

const player = (
  <video src="/intro.mp4" controls>
    <track kind="captions" src="/intro.en.vtt" />
  </video>
);

const background = <video src="/waves.mp4" autoPlay muted />;

Options

Option	Default	What it does
audio	[]	Components to check as if they were <audio>.
video	[]	Components to check as if they were <video>.
track	[]	Components that count as <track>.

const player = <Player src="/intro.mp4" />;

const player = (
  <Player src="/intro.mp4">
    <Captions kind="captions" src="/intro.en.vtt" />
  </Player>
);