What does this accessibility issue mean?
Accessibility issue summary: Deprecated marquee tag is used
The <marquee> tag is deprecated; it is not supported in HTML5 and cause issues for users who rely on assistive technologies to access the web.
This accessibility issue is related to WCAG rules around Parsing (WCAG Level A).
Solution:
Do not use <marquee> elements on your website.
Example HTML violation: Deprecated marquee tag is used on page (WCAG Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Site</title>
</head>
<body>
<header>
<h1>Our Ecommerce Store</h1>
</header>
<marquee>Welcome to our store! Grab your favorite products now!</marquee>
<main>
<!-- product listing and details go here... -->
</main>
</body>
</html>Explanation: This code violates the marquee accessibility rule because it makes use of the deprecated marquee tag. This tag scrolls the text, which can be distracting for people with attention deficits or cognitive disabilities. Additionally, it can be difficult for people with low vision or reading disabilities to read the moving text. The moving UI element can also be challenging to interact with for people with limited dexterity.
Corrected code below:
How to fix "Deprecated marquee tag is used on page (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Site</title>
</head>
<body>
<header>
<h1>Our Ecommerce Store</h1>
</header>
<p>Welcome to our store! Grab your favorite products now!</p>
<main>
<!-- product listing and details go here... -->
</main>
</body>
</html>Corrected HTML Explanation: The corrected code no longer uses the marquee tag. Instead, it uses a <p> tag to display the greeting message. This change makes the text static and therefore more accessible to the aforementioned groups of people.
