mediaCaptions
Reports media elements without captions.
✅ This rule is included in the jsxlogicalandlogicalStrictpresets.
Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, and other relevant audio information.
Media elements (<audio> and <video>) should include a <track> element with kind="captions" to provide this accessibility feature.
The only exception is that muted media does not require captions.
This is required for WCAG 1.2.2 and 1.2.3 compliance.
Examples
Section titled “Examples”<JSX.IntrinsicElements.audio: DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>
audio MediaHTMLAttributes<HTMLAudioElement>.src?: string | undefined
src="audio.mp3" /><JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video MediaHTMLAttributes<HTMLVideoElement>.src?: string | undefined
src="video.mp4" /><JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video> <JSX.IntrinsicElements.track: DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>
track TrackHTMLAttributes<HTMLTrackElement>.kind?: string | undefined
kind="subtitles" /></JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video><JSX.IntrinsicElements.audio: DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>
audio> <JSX.IntrinsicElements.track: DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>
track TrackHTMLAttributes<HTMLTrackElement>.kind?: string | undefined
kind="captions" /></JSX.IntrinsicElements.audio: DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>
audio><JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video> <JSX.IntrinsicElements.track: DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>
track TrackHTMLAttributes<HTMLTrackElement>.kind?: string | undefined
kind="captions" /></JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video><JSX.IntrinsicElements.video: DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
video MediaHTMLAttributes<HTMLVideoElement>.muted?: boolean | undefined
muted />When Not To Use It
Section titled “When Not To Use It”If you’re not using media elements or have a different captioning system, you can disable this rule.
Further Reading
Section titled “Further Reading”- WCAG 1.2.2: Captions (Prerecorded)
- WCAG 1.2.3: Audio Description or Media Alternative
- axe-core: audio-caption
- axe-core: video-caption
Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- ESLint:
jsx-a11y/media-has-caption - Oxlint:
jsx_a11y/media-has-caption
Made with ❤️🔥 around the world by
the Flint team and contributors.