415758f304
* Create rule S6855 * Update metadata and description * Update rules/S6855/javascript/metadata.json Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com> --------- Co-authored-by: yassin-kammoun-sonarsource <yassin-kammoun-sonarsource@users.noreply.github.com> Co-authored-by: yassin-kammoun-sonarsource <yassin.kammoun@sonarsource.com> Co-authored-by: Yassin Kammoun <52890329+yassin-kammoun-sonarsource@users.noreply.github.com> Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>
38 lines
1.9 KiB
Plaintext
38 lines
1.9 KiB
Plaintext
== Why is this an issue?
|
|
|
|
Captions in HTML media elements are text versions of the audio content, synchronized with the video. They are essential for individuals who are deaf or hard of hearing, as they provide a text alternative for the audio information. They can also be beneficial for individuals who are not native speakers of the language of the video, or for situations where the audio cannot be heard.
|
|
|
|
In the context of accessibility, providing captions for media elements is a requirement under the Web Content Accessibility Guidelines (WCAG). Without captions, you are excluding a portion of your audience who rely on them to understand the content of your media.
|
|
|
|
== How to fix it
|
|
|
|
If captions are missing from your media elements, you can fix this by adding a ``++<track>++`` element with the ``++kind="captions"++`` attribute inside your ``++<audio>++`` or ``++<video>++`` element. However, for video elements that have the ``++muted++`` attribute, captions are not required.
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<audio {...props} />; // Noncompliant
|
|
<video {...props} />; // Noncompliant
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<audio><track kind="captions" {...props} /></audio>
|
|
<video><track kind="captions" {...props} /></video>
|
|
<video muted {...props} ></video>
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio[audio element]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video[video element]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track[track element]
|
|
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html[Captions]
|
|
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html[Audio Description or Media Alternative]
|