Being a web accessibility advocate and practitioner is certainly frustrating at times. Especially when important, foundational best practices get ignored because “the cool kids are doing it”. This was the muse for writing this tweet (for which I was happily surprised to see numerous retweets!):
Just because some big, popular companies make poor design decisions regarding accessibility, doesn’t mean you/your company has to.
You want an accessible, usable website? Then please don’t remove the underline on text links, particularly in the main content (in blocks of text). Unfortunately this design trend continues on the web (and the same could be said about those awful form input labels that act like placeholders, ugh).
Why? For accessibility, users with color blindness or low vision may have trouble distinguishing links from regular text when the underline is missing. Also remember situational disability; links with no underline are usually more difficult to determine when using a poor monitor or when using a computer in a brightly lit environment (since they usually use color alone).
And for usability, it’s just easier to see the links and easier to scan them when they have underlines. It’s also an issue for new users, and people with cognitive or literacy issues (such as dyslexia).
Personally, I’m getting a little older now and my sight’s color recognition is fading a bit. I really don’t like squinting and fighting to find the dark blue links within black text. Don’t make me think!
Some designs have bolded text links instead of underlining in order to differentiate the links from regular text. Bold text can get confused with headings and text that’s bolded for emphasis. And in my opinion, this give a less professional appearance, and still ignores the core convention of underlined text links.
It’s acceptable to remove underlines on text links when other visual cues replaces the underline, such as:
- Text links in visually explicit navigation bars, dropdown menus, etc.
- Text links designed to look like buttons (with button functionality and role=button of course!)
Here are several resources about this issue:
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision (W3C WCAG 2.0)
- New Years Resolution: Underline Your Links! by @TerrillThompson
- Color Contrast, Beyond the Basics by Beth Raduenzel
- Link Text and Appearance/Underlining (WebAIM)
- Checkpoint 10 – Underlining of links (Queensland government)
- Underline links that are not otherwise identifiable as links (UniversalUsability)
- Accessibility of Links (by Steve Grobschmidt)
The following websites have underlined text links in the main content:
- WebAIM (@webaim)
- The Paciello Group (@paciellogroup)
- Simply Accessible (@sateaches)
- W3C WAI (@w3c_wai)
- Access iQ (@AccessiQ)
- This website
Please don’t remove underlines on text links in main content. Leaving them as intended is better for accessibility, usability, and maintains the core conventions of the web.
Check out this follow-up news article on dot net which adds an important point:
the motivation for retaining underlines is “just as much for people with cognitive or literacy issues”
This article was last modified Dec. 2017.