What does this accessibility issue mean?
Issue summary: Audio element missing captions
All media elements on your website that have an audio component (including videos and stand-alone audio tracks) should have associated captions or subtitles to ensure accessibility compliance with WCAG standards.
Captions provide a text alternative to audio files for users who are deaf are hard of hearing.
Solution:
Audio and video elements should have an associated track element (<track>) with an HTML kind attribute of “captions” or “subtitles”.
Example HTML violation: Audio element missing captions (WCAG Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<audio controls>
<source src="product_description.mp3" type="audio/mpeg">
</audio>
</body>
</html>The issue with the above code is the lack of a track element for the audio element. The <track> element provides text captions and it's a way to add accessibility for people who are deaf and hard of hearing.
The issue can be solved by adding a captions track as shown below:
How to fix "Audio element missing captions (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<audio controls>
<source src="product_description.mp3" type="audio/mpeg">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
</audio>
</body>
</html>This corrected HTML code now includes a <track> element that points to captions in a WebVTT format (captions.vtt). This ensures that the audio content is accessible to the deaf community and complies with the accessibility rule identified by 'audio-caption'.
