What does this accessibility issue mean?
Issue summary: media element plays automatically
Audio and video media elements on your website should not be set to autoplay when a user arrives on a page.
Autoplay media can be distracting and annoying for users, especially those with sensory sensitivities.
Solution:
Ensure video or audio elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio.
Example HTML violation: Media element plays automatically (WCAG Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Online Shop</title>
<header>
<h1>Online Shop</h1>
</header>
<main>
<article>
<h2>Product of the Day</h2>
<div class="product">
<img src="product.jpg" alt="Our product of the day">
<div class="description">
<h3>Product Description</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<video controls=" autoplay=">
<source src="product-clip.mp4" type="video/mp4">
</video>
</div>
</div>
</article>
</main>
<footer>
<p>Copyright © 2021, Online Shop</p>
</footer>
</body>
</html>Explanation: The above HTML violates the no-autoplay-audio accessibility rule because the <video width="300" height="150"> element has the "autoplay" attribute, which causes the video to play automatically. This violates the rule because autoplaying audio can be disruptive and unexpected for users.
To comply with the rule, the autoplay attribute should be removed from the <video> tag.
How to fix "Media element plays automatically (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>" <title>Online Shop</title>
<header>
<h1>Online Shop</h1>
</header>
<main>
<article>
<h2>Product of the Day</h2>
<div class="product">
<img src="product.jpg" alt="Our product of the day">
<div class="description">
<h3>Product Description</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<video controls>
<source src="product-clip.mp4" type="video/mp4">
</video>
</div>
</div>
</article>
</main>
<footer>
<p>Copyright © 2021, Online Shop</p>
</footer>
</body>
</html>In this corrected version, the video does not play automatically which is desired according to the WAI (Web Accessibility Initiative) rules.
If you unsure about about how to update your code according to these rules, refer to the W3C's guidelines and proposed rules. They have resources available online to help enforce web content accessibility standards. Remember, respecting users' preferences and needs leads to a more inclusive web experience for everyone.
