Links in text need a cue besides color
- Rule:
axe/link-in-text-block - Checks: Links must be distinguishable without relying on color
- WCAG: 1.4.1
- Fix class:
design: A fix needs a visual decision.
Who it affects
Section titled “Who it affects”- People who see some colors weakly or not at all.
- People with low vision, who zoom, magnify or need strong contrast.
How to fix it
Section titled “How to fix it”A link in a paragraph differs from the text around it only by color
Section titled “A link in a paragraph differs from the text around it only by color”Underline it with text-decoration: underline, or give it another cue that does not rely on color, such as a bottom border. Keep the cue at rest, not only on hover or focus.
The design keeps links in text without underlines
Section titled “The design keeps links in text without underlines”Give each link at least 3:1 contrast with the surrounding text, keep 4.5:1 against the background, and underline it on hover and keyboard focus. An underline at rest is still the more dependable choice: it holds up under forced colors and on touch screens, which have no hover.
axe asks for review because of a background image, a gradient or a ::before or ::after icon
Section titled “axe asks for review because of a background image, a gradient or a ::before or ::after icon”Look at each link against the text around it. It must stand out without its color, such as by an underline or an icon every link carries; if it does not, underline it.
Fixes that fail
Section titled “Fixes that fail”Underlining links only on hover
Section titled “Underlining links only on hover”At rest the link is still marked only by color, so people who cannot see the difference, and touch users who cannot hover, cannot find it.
Making the link barely different, such as one step heavier in font weight
Section titled “Making the link barely different, such as one step heavier in font weight”axe counts any change in weight, size, style or font as a cue, but a difference people cannot see does not mark the link. Bold used for emphasis elsewhere on the page blurs it further.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.