Keep the Underline

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. 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.

And for usability, it’s just easier to see the links and easier to scan them when they have underlines.

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. 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.

Resources

Here are several resources about this issue:

Examples

The following websites have underlined text links in the main content:

Summary

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.

Addendum

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”

16 comments

  1. Julius Charles Serrano

    Hi Dennis.

    Is there a way for blind accessibility advocates to check if text links are underlined?

    Thanks.

    Julius

    • Matt

      That should be “border bottom on “a” in the CSS.” It coded it to look like a link, precisely the overly eye-catching look I meant to avoid when using border bottom instead of u.

      • Ade

        When people refer to underlines, it is just a generic catch-all term rather than a reference to the underline property. Using a border in lieu has become the norm, even though the language has not changed.

  2. Jack

    I’ve always been under the assumption ( perhaps incorrectly ) that the underline is removed to better serve users with dyslexia who find underlined text more difficult to read. Is this incorrect?

  3. Pingback: Stop telling me where to click! | my name is kristi-lynn
  4. Jonathan Metz

    I’d have to disagree with making text underline. I find it to be very distracting when I’m reading a page, particularly a page that is boring or very text heavy. It can be very annoying to skip around a page because there are a bunch of underline words in a long paragraph.

    I’m more concerned with sites that make regular text look like links when they aren’t.

    • Dennis

      Yes, that would be a bit distracting. But your issue is with the content writer/owner, not the underline on the text links.

      • Jonathan Metz

        I read about your request to keep text underlined from net magazine. This is not a badly designed web site. In addition to those notorious rivers of white space that are equally distracting on justified text (which doesn’t occur on net mag), leading can also cause distractions if there is a decorative element interrupting the normal spacing of each line.

        I think I might be confused by your response though. Regardless of whether or not my issue lies with the content author/owner, your notion to universally retain underlines in links would affect me either way. Poorly designed sites exist the same as very well designed pages. In my opinion, keeping links underlined benefits only a certain population of users on the web and throws the rest of us under the bus.

        • Dennis

          You are obviously new to web accessibility. There’s a lot to learn my friend. PS: My point is not a “request”; it’s been a web standard for many years… PPS: Visually, Net Mag doesn’t remove the underline but modifies it, which is passable for me.

  5. Pingback: Accessibility | University of St Andrews Web team
  6. Pingback: I'm a Web Conservative | Blog | MRW Web Design
  7. Thomas

    I often wonder if it’s because there’s so many young people in design that there’s a trent to design first for oneself, second for other designers, with “all users” showing up somewhere far far down the line.

    I also wonder if it’s the perception of immortality of youth that keeps designers from empathizing with concepts of accessibility.

  8. Diana Studer

    on my 2 blogs I write the links in a different colour to the main text, and mouseover makes them light up in a brighter colour. I’m hoping that works for accessibility?

  9. Pingback: Keep the Focus Outline | Algonquin Studios

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>