There’s a small design decision that can make a surprisingly big difference to accessibility: how you visually distinguish links from ordinary text.
During the audits I often see links styled without an underline because the designer wants a “cleaner” look, sometimes the underline appears only on hover or it might appear only when the link receives keyboard focus. But if we have to interact with something before we can tell that it is a link, the design is making me do unnecessary work.
When a link appears inside a paragraph, an underline is one of the clearest ways to show that the text is interactive.
What does WCAG actually say?
WCAG 1.4.1 Use of Color says colour must not be the only visual means of conveying information. For links within text, W3C specifically provides guidance for using an additional visual distinction, such as an underline. And there’s an interesting detail: if that additional distinction appears only when the link is hovered or focused, it isn’t enough. So the following pattern: normal text → link becomes underlined on hover - doesn’t solve the problem.
The link needs to be distinguishable before interaction. There is a critere WCAG 2.4.4 Link Purpose, which requires the purpose of a link to be understandable from its link text or its context. That means that a link “Click here” does not provide clear information about its purpose, while a better version might be “Click here to read our accessibility report”.
So how should accessible links be designed?
Make links recognisable without interaction. Users shouldn’t need to hover or press Tab to discover them.
Underline links in running text. WCAG doesn’t require every link to be underlined, but for links surrounded by ordinary text, underlining is one of the clearest and most robust choices.
Don’t rely on colour. If you remove the underline, provide another non-colour visual distinction and make sure it meets WCAG requirements.
Keep the underline on focus. Focus should make the link easier to identify, not suddenly remove one of its visual cues.
Make keyboard focus clearly visible.
Use meaningful link text. A screen reader user may navigate through links separately from the surrounding content, so “Learn more” repeated ten times is not helpful.
A quick accessible link checklist:
Links are recognisable before interaction
Links in paragraphs are underlined or have another sufficient non-colour distinction
Colour isn’t the only way to identify a link
Hover doesn’t provide the only visual distinction
Focus remains clearly visible
Link text describes its destination or purpose
Link styling is consistent across the website
Links and buttons look different because they do different things
I'd love a post about links in non-paragraph context — navigations, headers, footers, linked article titles, lists, breadcrumbs. I feel like in those contexts link styling is often the wild west when I'm browsing across sites that otherwise claim to be accessible.