[eslint-plugin-lit-a11y]: implement media-has-caption

[bennypowers]

See: https://raw.githubusercontent.com/jsx-eslint/eslint-plugin-jsx-a11y/master/docs/rules/media-has-caption.md

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": {
        "lit-a11y/media-has-caption": ["error", {
            "audio": [
              "custom-audio",
              {
                "tagName": "slotted-audio",
                "slot": ["track", "caption"]
              }
              {
                "tagName": "custom-multimedia",
                "slot": ["audio-caption"]
              }
            ],
            "video": [
              {
                "tagName": "custom-multimedia",
                "slot": ["video-caption"]
              }
            ],
          }],
    }
}

For the audio and video options, strings determine which custom elements should be considered to implement the corresponding media element internally. If a string is specified, the custom element is assumed to implement an anonymous slot to it's internal media element. If an object is specified, track elements must be slotted into

Succeed

html`
  <audio><track kind="captions"></track></audio>
  <video><track kind="captions"></track></video>
  <video muted></video>
`;

Fail

html`
  <audio></audio>
  <video></audio>
`

Accessibility guidelines

• WCAG 1.2.2
• WCAG 1.2.3

Resources

• axe-core, audio-caption
• axe-core, video-caption g

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!