SiteLint documentation and guidelines

blink element should not be used

Description

The <blink> element in HTML was originally designed to make text blink on and off. This element is deprecated and no longer supported by modern browsers because it can cause accessibility issues and is generally considered poor design. Blinking text can be distracting, cause discomfort, and trigger seizures in users with photosensitive epilepsy. It also fails to convey important information in a user-friendly way.

Disabilities impacted

  • Visual impairments: users with visual impairments might find blinking text hard to read or understand.
  • Cognitive disabilities: users with cognitive disabilities may find blinking text distracting or confusing, making it difficult to focus on the content.
  • Photosensitive epilepsy: users with photosensitive epilepsy are at risk of seizures triggered by blinking or flashing content.

Why it matters

Using the <blink> element can create a poor user experience and pose significant accessibility risks. Modern web standards and design practices emphasize creating content that is accessible and user-friendly for everyone. Replacing blinking text with more accessible alternatives ensures that all users can interact with your content without unnecessary risks or distractions.

Coding problems and solutions

Common coding problems

  • Use of deprecated <blink> element: using the <blink> element in the HTML, which is not supported by modern browsers and creates accessibility issues.
  • Inappropriate use of animation: using CSS or JavaScript to create blinking or flashing text without considering accessibility impacts.

How to fix it

Replace the <blink> element with more accessible alternatives such as static text or other methods to highlight important information.

Incorrect example
<blink>Important Notice!</blink>
Correct example
<strong>Important Notice!</strong>

Use CSS for emphasis

Use CSS to style text for emphasis rather than making it blink.

Correct example
<p class="important-notice">Important Notice!</p>

<style>
.important-notice {
    font-weight: bold;
    color: red;
}
</style>

Provide alternatives for animation

If animation is necessary, use it sparingly and provide controls to pause, stop, or hide the animation.

Correct example
<p id="important-notice">Important Notice!</p>
<button onclick="toggleAnimation()">Toggle Animation</button>

<style>
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.animated {
    animation: pulse 2s infinite;
}
</style>

<script>
function toggleAnimation() {
    var notice = document.getElementById('important-notice');
    notice.classList.toggle('animated');
}
</script>

Known limitations

  • User preferences: always consider user preferences and provide options to disable animations if needed.
  • Testing across devices: ensure any use of animations is tested across different devices and assistive technologies to verify accessibility.
  • Accessibility guidelines: follow accessibility guidelines and best practices to ensure that your content is inclusive and user-friendly.

Resources

Rule

  • ID: blink-element