Archived
1
0
This repository has been archived on 2023-05-15. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
home-page/node_modules/eslint-plugin-jsx-a11y/docs/rules/media-has-caption.md
Sean Edmunds 0584430b5c First commit
2021-12-13 17:00:40 -06:00

1.9 KiB

media-has-caption

Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to alt text on an image when an image is unable to load).

The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the muted attribute.

Rule details

This rule takes one optional object argument of type object:

{
    "rules": {
        "jsx-a11y/media-has-caption": [ 2, {
            "audio": [ "Audio" ],
            "video": [ "Video" ],
            "track": [ "Track" ],
          }],
    }
}

For the audio, video, and track options, these strings determine which JSX elements (always including their corresponding DOM element) should be used for this rule. This is a good use case when you have a wrapper component that simply renders an audio, video, or track element (like in React):

Succeed

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

Fail

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

Accessibility guidelines

Resources