Skip to content

Accessibility

A link should look like one

2 min readStatic Core

Hover is not available to everyone. A touch user has no pointer to rest and a keyboard user moves focus rather than a cursor, so a link styled to reveal itself on hover is revealed to neither of them.

A hand holding a phone showing a web page whose only control is a single dark button.

Who a hover state excludes

Hover-only styling is usually described as a taste question, and it is not. It is a question of which input devices get to see the affordance at all. A phone has no hover state to enter; a keyboard user tabs between focusable elements and never produces one either.

That means a hover-revealed underline is visible to a mouse user who happens to pass over the word, and to nobody else. The people it excludes are not an edge case — on most sites they are the majority.

More than colour, and this site had less

The guideline usually quoted here asks that a link inside a block of text be distinguishable by something other than colour alone. Most sites that fail it at least change the colour and add the underline on hover.

This site managed something worse. Its body links carried no colour change either, so in running text they were distinguishable by nothing at all until a pointer happened to cross them. A reader scanning a paragraph had no way to know a link was in it.

That is the sort of thing an automated check will not catch. The audit reads link text and whether a link has an accessible name; it cannot see whether the link is perceivable as a link. Some things stay a human decision, so the reasoning is written down where the design lives.

One line of design

The fix is a persistent underline, thin and offset far enough from the baseline that it reads as a link rather than as emphasis. Hover then changes the colour, which is a reward for a pointer finding the target rather than the thing that makes a link a link.

It lives in one component, because there is exactly one anchor a page is allowed to reach for. A page cannot write its own link styling, so it cannot reintroduce the bug — which is the actual repair. The underline was one line; the reason it stays is the component boundary around it.

Key takeaways

  • A hover-only affordance is invisible to touch and keyboard users
  • Colour alone is not enough to mark a link in running text — and no colour at all is worse
  • Put the styling in one component so a page cannot reintroduce the bug
Back to the blog