useMediaCaption (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useMediaCaption
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.
Sources:
- Inspired from jsx-a11y/media-has-caption

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useMediaCaption": "error"
6
      }
7
    }
8
  }
9
}

Description

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.

Examples

Invalid

1
<video src="video.mp4"></video>

code-block.html:1:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a track for captions when using audio or video elements.
  
  > 1 │ <video src="video.mp4"></video>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ 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.

1
<audio src="audio.mp3">
2
    <source src="audio.ogg" type="audio/ogg" />
3
</audio>

code-block.html:1:1 lint/a11y/useMediaCaption ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a track for captions when using audio or video elements.
  
  > 1 │ <audio src="audio.mp3">
      │ ^^^^^^^^^^^^^^^^^^^^^^^
  > 2 │     <source src="audio.ogg" type="audio/ogg" />
  > 3 │ </audio>
      │ ^^^^^^^^
    4 │ 
  
  ℹ 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

1
<video src="video.mp4">
2
    <track kind="captions" src="captions.vtt" />
3
</video>

1
<audio src="audio.mp3">
2
    <track kind="captions" src="captions.vtt" />
3
</audio>

1
<video muted src="video.mp4"></video>