src/content/docs/linter/rules/use-media-caption.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useMediaCaption`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/media-has-caption`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/media-has-caption.md){
"linter": {
"rules": {
"a11y": {
"useMediaCaption": "error"
}
}
}
}
Enforces that audio and video elements must have a track for captions.
<video />
<audio>child</audio>
<audio>
<track kind="captions" {...props} />
</audio>
<video muted {...props}></video>
{
"linter": {
"rules": {
"a11y": {
"useMediaCaption": "error"
}
}
}
}
Enforces that audio and video elements must have a track for captions.
Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.
:::note
In .html files, this rule matches element names case-insensitively (e.g., <VIDEO>, <video>).
In component-based frameworks (Vue, Svelte, Astro), only lowercase element names are checked.
PascalCase variants like <Video> are assumed to be custom components and are ignored.
:::
<video src="video.mp4"></video>
<audio src="audio.mp3">
<source src="audio.ogg" type="audio/ogg" />
</audio>
<video src="video.mp4">
<track kind="captions" src="captions.vtt" />
</video>
<audio src="audio.mp3">
<track kind="captions" src="captions.vtt" />
</audio>
<video muted src="video.mp4"></video>