SiteLint documentation and guidelines

Links not visually evident without color vision

Description

Links should be visually distinguishable from other text even for users who cannot perceive color differences. Relying solely on color to indicate links can create accessibility issues for users with color vision deficiencies or those who rely on other visual cues to navigate content. Ensuring that links are easily identifiable enhances the usability and accessibility of a webpage.

Disabilities impacted

  • Color vision deficiency: users with color vision deficiencies may not be able to distinguish links if they are indicated only by color.
  • Visual impairments: users with other visual impairments may rely on additional visual cues beyond color to identify interactive elements.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and distinct visual indicators that help them quickly identify links.

Why it matters

Ensuring that links are distinguishable without relying solely on color helps all users identify and navigate links effectively. This practice improves the overall user experience and ensures compliance with accessibility standards, making web content more inclusive and easier to use.

Coding problems and solutions

Common coding problems

  • Links indicated only by color: links are styled differently only by changing their color, making them hard to identify for users with color vision deficiencies.
  • Lack of additional visual cues: no additional visual cues, such as underlines, bold text, or icons are used to distinguish links from regular text.
  • Inconsistent link styling: links are inconsistently styled, leading to confusion about what is clickable.

How to fix it

Ensure that links are visually distinguishable through means other than color, such as underlines, bold text, or icons.

Incorrect example
<p>This is a <a href="https://example.com" style="color: blue;">link</a> in a sentence.</p>
Correct example
<p>This is a <a href="https://example.com" style="text-decoration: underline;">link</a> in a sentence.</p>

Apply consistent styling to all links to ensure users can easily identify them.

Incorrect example
<style>
  a {
    color: blue;
  }
</style>
<p>This is a <a href="https://example.com">link</a> in a sentence.</p>
Correct example
<style>
  a {
    text-decoration: underline;
  }
</style>
<p>This is a <a href="https://example.com">link</a> in a sentence.</p>

Implement link styles that are both visually appealing and accessible.

Incorrect example
<style>
  a {
    color: blue;
  }
  a:focus, a:hover {
    color: darkblue;
  }
</style>
<p>This is a <a href="https://example.com">link</a> in a sentence.</p>
Correct example
<style>
  a {
    text-decoration: underline;
    color: blue;
  }
  a:focus, a:hover {
    outline: 2px solid blue;
  }
</style>
<p>This is a <a href="https://example.com">link</a> in a sentence.</p>

Known limitations

  • Design constraints: ensuring links are distinguishable without relying on color can sometimes be challenging due to design constraints.
  • Browser compatibility: test across multiple browsers to ensure that link styles are consistently applied and accessible.
  • User preferences: consider user preferences for link styles, as some users may prefer certain visual cues over others.

Resources