Picto thématique

Rule n° 135 - Hyperlinks are visually differentiated from the rest of the content.

Some site creators love to differentiate between links by hovering over them. In this case, a user who cannot hover over a page with his or her pointer will not see the links. This isn’t so rare. Think of touch screen users and voice-activated navigation, for example.

#Links #Design #Accessibility

Goal

  • Allow users to easily identify links in the text, as well as navigation blocks.
  • Improve the visibility and affordance of links in different browsing environments.
  • Improve the accessibility of content for people with disabilities.

Implementation

Hyperlinks can be differentiated using CSS properties of text colour, background colour, underline, bold, borders, font, etc.

Control

On each page checked:

  • Identify the links throughout the text;
  • Check that these links are visually different from the rest of the text.
  • Check that the links differentiated by the colour have a minimum contrast ratio of 3 with the surrounding text and that they are identifiable when hovering over or using keyboard focus.

This check does not apply to navigation blocks whose nature is otherwise obvious to the user (menus).

By Opquast - Read the license