Missing
<track> in<audio> / <video> element JS-0754
Anti-pattern
6 months ago
—
6 months old
Media elements such as <audio> and <video> must have a <track> for captions
57 />
58 </audio>
59
60 <audio id="weatherPlayer" loop> 61 <source
62 src={getWeatherURL(props.game, props.weather)}
63 type="audio/ogg" Media elements such as <audio> and <video> must have a <track> for captions
50
51 return (
52 <>
53 <audio id="gameMusicPlayer" loop> 54 <source
55 src={getURL(props.game, props.weather, props.hour)}
56 type="audio/ogg"
Description
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.
Bad Practice
<audio><track kind="captions" {...props} /></audio>
<video><track kind="captions" {...props} /></video>
<video muted {...props} ></video>
Recommended
<audio {...props} />
<video {...props} />