Skip to main content

a11y/useMediaCaption

enforces that audio and video elements must have a track for captions

ESLint Equivalent: media-has-caption

Examples

Invalid

<audio {...props} />

 file.tsx:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <audio {...props} />
    ^^^^^^^^^^^^^^^^^^^^

  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.


<video {...props} />

 file.tsx:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <video {...props} />
    ^^^^^^^^^^^^^^^^^^^^

  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.


<audio>child</audio>

 file.tsx:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <audio>child</audio>
    ^^^^^^^^^^^^^^^^^^^^

  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.


<video>child</video>

 file.tsx:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <video>child</video>
    ^^^^^^^^^^^^^^^^^^^^

  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.

<audio>child</audio>

 file.html:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <audio>child</audio>
    ^^^^^^^^^^^^^^^^^^^

  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.


<video>child</video>

 file.html:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a track for captions when using audio or video elements.

    <video>child</video>
    ^^^^^^^^^^^^^^^^^^^

  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.

Valid

<audio><track kind="captions" {...props} /></audio>
<video><track kind="captions" {...props} /></video>
<video muted {...props} ></video>
<Audio>child</Audio>
<Video>child</Video>
<audio><track kind="captions" /></audio>
<video><track kind="captions" /></video>
<video muted ></video>