What does this accessibility issue mean?
Issue summary: <blink> HTML element is used
The HTML <blink> element is depreciated and can cause website accessibility issues for users with visual, cognitive, and neurological impairments — as well as causing distraction and annoyance for all users.
Solution:
The <blink> element should not be used in modern HTML.
Example HTML violation: HTML blink element present (WCAG Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Online Store</title>
</head>
<body>
<header>
<h1>Our Online Store</h1>
</header>
<main>
<section>
<h2>Today's Deals</h2>
<blink>
<p>50% off on all items!</p>
</blink>
</section>
</main>
<footer>
<p>© 2022 Our Online Store</p>
</footer>
</body>
</html>The presence of the <blink> tag violates the rule. This tag causes the inner content (""50% off on all items!"") to blink, which can seriously impact the readability and accessibility of the web page. Prolonged exposure to blinking elements can even cause seizures in certain individuals.
In addition, blinking content can be annoying or distracting, and can be difficult to read for individuals with cognitive disabilities and visual impairments.
To resolve the issue, we can replace the <blink> element with <strong>, <em> or alternative CSS styles for emphasizing the text.
Here is the corrected HTML code:
How to fix "HTML blink element present (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Online Store</title>
</head>
<body>
<header>
<h1>Our Online Store</h1>
</header>
<main>
<section>
<h2>Today's Deals</h2>
<p>
<strong>50% off on all items!</strong>
</p>
</section>
</main>
<footer>
<p>© 2022 Our Online Store</p>
</footer>
</body>
</html>The content can still be emphasized using the <strong> tag but without creating any harmful blinking effects, making this version of the webpage more accessible to all users.
