jsx-a11y/media-has-caption

Require <audio> and <video> to have a <track> with captions

Also called 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:

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

Every option, set to its default:

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

Examples#

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

A track of another kind doesn't count:

example.jsx1 problem
const player = (
  <video src="/intro.mp4" controls>
    <track kind="subtitles" src="/intro.fr.vtt" />
  </video>
);
example.jsxNo problems
const player = (
  <video src="/intro.mp4" controls>
    <track kind="captions" src="/intro.en.vtt" />
  </video>
);

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

Options#

OptionDefaultWhat 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>.
example.jsxwith { "video": ["Player"] }1 problem
const player = <Player src="/intro.mp4" />;
example.jsxwith { "video": ["Player"], "track": ["Captions"] }No problems
const player = (
  <Player src="/intro.mp4">
    <Captions kind="captions" src="/intro.en.vtt" />
  </Player>
);