# jsx-a11y/media-has-caption

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

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const player = <video src="/intro.mp4" controls />;
```

A track of another kind doesn't count:

{/* bad */}
```jsx
const player = (
  <video src="/intro.mp4" controls>
    <track kind="subtitles" src="/intro.fr.vtt" />
  </video>
);
```

Not reported:

{/* good */}
```jsx
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>`. |

{/* bad {"options": [{"video": ["Player"]}]} */}
```jsx
const player = <Player src="/intro.mp4" />;
```

{/* good {"options": [{"video": ["Player"], "track": ["Captions"]}]} */}
```jsx
const player = (
  <Player src="/intro.mp4">
    <Captions kind="captions" src="/intro.en.vtt" />
  </Player>
);
```