[A11Y]: Links SHOULD have styling to distinguish different states

[jenstrickland]

Severity:

Feedback Framework

- MUST - must be addressed to be WCAG 2.0 AA compliant
! SHOULD - is an accessibility best practice
+ CONSIDER - things to think about to improve inclusive design and accessibility

Description

Links SHOULD have styling to distinguish from surrounding text and to signal different states.

WCAG 2.0 has 2 additional requirements for body text links that are not underlined by default:

• The link text must have a 3:1 contrast ratio from the surrounding non-link text.
• The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

Links are generally styled for these states:

• a:link
• a:hover
• a:focus
• a:active
• a:visited
• a.on (on state, generally created with CSS selectors)

The .nav-link and regular links should ideally all have these states styled.

Hover and focus effects

Many sites have implemented visual mouse hover effects for links, such as adding background glows, drop shadows, color changes, or underlining. These effects help users know that the item can be clicked on and that mouse focus is on a particular link.

To make these effects device-independent, it is necessary to ensure that it can be activated by either the mouse or the keyboard. In CSS, this means using both the :hover and the :focus pseudo-classes.

WebAIM's Recommendations

Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.

Disabilities Affected

• Low Vision
• Colorblindness
• Cognition

Potential fix

Apply distinct styling for the links throughout. CSS can target the last link in the nav to style it like the links on the page but with the carat.

<!-- current styles -->
a {
    color: #003be0; // suggested increased contrast color
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: #0056b3;
    text-decoration: underline;
}

<!-- potential fix -->
a {
    color: #003be0;
+    text-decoration: underline;
    background-color: transparent;
}
a:hover, a:focus {
+    color: #002282;
+    text-decoration: underline; 
}
a:active {
+    color: #002282;
+    text-decoration: none; 
}
a:visited { // totally optional, evaluated to determine if valuable for the interface
}
a.on {
+    color: #000;
}

Why it matters

These requirements help ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors.

WCAG Guidance

• WEBAIM Link Text and Appearance

• WEBAIM's WCAG Checklist

• W3C Understanding WCAG 2.0 - 1.4.1 Use of Color