198

The CSS for Stack Overflow explicitly removes underlines from hyperlinks in posts (to clarify, in the user-submitted content, not navigation, not headers/footers, not sidebars, not the recurring UI elements):

a {
    color: #07C;
    text-decoration: none;
    cursor: pointer;
}

a:hover, a:active {
    color: #3af;
    text-decoration: none;
}

Can you please adjust the CSS (example/proposed CSS follows)?

.post-text a:link, .post-text a:visited, .comment-copy a:link, .comment-copy a:visited {
    text-decoration: underline;
}

For some context, this is an accessibility issue and just today I ran into someone who struggled to help answer a question because she could not distinguish links.

The colors for link text (#005999) and the body text (#242729) have a contrast ratio of 2.07:1 (this contrast checker checks foreground and background colors, but you can at least see the ratio).

Relying on color alone for the link is terrible for color blind and low vision users, anyone working in bright light, or anyone with a crappy display. It also fails WCAG 2.0 1.4.1, which states that you cannot use color alone to convey information (such as a link).

There is also a documented technique on the ideal way to style links to conform to 1.4.1, outlined in technique G183:

  • Check that the relative luminance of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.
  • Check that pointing (mouseover) to the link causes a visual enhancement (such as an underline, font change, etc.)
  • Check that moving keyboard focus to the link causes a visual enhancement (such as an underline, font change, etc.)

The easiest way to bypass changing the colors is to just allow underlines on links, which you would need to do on hover and focus anyway. Allowing underlines immediately satisfies WCAG 2.0 1.4.1 for all links in your posts.

Underlines in Chrome using the CSS I provide above.

Underlines in Edge using the CSS I provide above.

Underlines in Firefox using the CSS I provide above.

47
  • 9
    My iPad is in two minds about this. Despite the CSS, all hyperlinks are underlined - but not its second part when they span over a single line. So half and half, but maybe that's close enough?
    – Jongware
    Commented Jun 12, 2016 at 21:01
  • 24
    @RadLexus, that's handy for an iPad user, but not everyone is on an iPad. Changing one's hardware instead of removing a single line of CSS doesn't seem like a good fit.
    – aardrian
    Commented Jun 12, 2016 at 23:17
  • 6
    Workaround: User style with a, a:hover, a:active { text-decoration: underline !important; }
    – theB
    Commented Jun 13, 2016 at 0:54
  • 9
    @theB I already do that via a ookmarklet: javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('a[href]{text-decoration:underline !important}',0);})() But that is not a fix, just a hack for broken styles.
    – aardrian
    Commented Jun 13, 2016 at 1:35
  • 9
    We'll take a look at the contrast of the links in posts. I can't tell you "we'll use underlines" (we'd have to make sure it looks good, that said I like this style) but I can assure you that we'll make sure we'll find a solution that provide enough contrast between links and regular text.
    – Stéphane StaffMod
    Commented Jun 13, 2016 at 9:09
  • 13
    On a related note, plenty of newbies don't seem to realise that the edit and share links under their post are clickable. I think underlining those links or putting them on a contrasting background would help.
    – PM 2Ring
    Commented Jun 13, 2016 at 10:29
  • 8
    @Troyseph The question is about the main site, not Meta.
    – JJJ
    Commented Jun 13, 2016 at 11:13
  • 9
    Underlining makes them hard to read, presumably that's why they are not underlined in the current style. But there is little excuse for not underlining them on hover.
    – Cody Gray Mod
    Commented Jun 13, 2016 at 13:42
  • 8
    @CodyGray I appreciate your opinion, but years of usability and accessibility studies say, on the whole, the opposite.While whomever defined the styles may have felt that way as well, in my brief time here I already know of a case where someone could not contribute as a result.
    – aardrian
    Commented Jun 13, 2016 at 13:48
  • 14
    They absolutely do not. There are volumes of studies that indicate that underlining text makes it much more difficult to read. I'm not trying to diminish the importance of accessibility, but there are other routes than underlining.
    – Cody Gray Mod
    Commented Jun 13, 2016 at 13:49
  • 5
    @CodyGray Yes, better contrast can help. As for volumes of studies, please provide some (about links, not underlines as a way to add emphasis). I work in this space (usability, accessibility), run studies myself, and know that underlines provide link scent that color alone does not.
    – aardrian
    Commented Jun 13, 2016 at 13:52
  • 7
    I find the underlines ugly and hard to read. I also find it hard to imagine that accessability tools have any trouble distinguishing well-formed html. If you absolutely need underlines, you can skin just about any site with a plugin like stylish: makeuseof.com/tag/… - and since so many sites don't underline links, you'd probably be better off figuring out how to do it yourself and make the rest of the web more suited to your particular needs too.
    – Aaron Hall Mod
    Commented Jun 13, 2016 at 23:37
  • 18
    @aardrian Do you realise the meta is a site for discussion? I haven't seen a single comment from you that hasn't included essentially "No, your opinion is wrong, this subjective set of guidelines is law. If you don't adhere to it you are wrong". That's simply not the case. If not using underlines was such a huge and unforgivable sin, one would imagine that google, a site that is essentially a hyperlink machine, would no longer exist. That's not the case, however. The suggestions you've given are just that: suggestions. There are other approaches for accessibility.
    – Rob Mod
    Commented Jun 14, 2016 at 1:49
  • 8
    @aardrian If you re-read my comment, I am not arguing for or against your change. I don't mind either way. I was commenting on the fact that you are presenting an opinion as fact, and that your suggestion is clearly the correct and only solution to the problem; everyone else is indisputably wrong. The fact that you say google is inaccessible, when their entire business is based on showing hyperlinks, brings in to question just how important your metrics for accessibility are, and further shows how things are not as black and white as your say.
    – Rob Mod
    Commented Jun 14, 2016 at 2:23
  • 14
    I'm surprised at the amount of up votes this has received. I like the clean look. Commented Jun 14, 2016 at 4:14

6 Answers 6

36

You've highlighted an accessibility issue, and it ought to be addressed.

New Answer

With the scope of your request restricted to posts and comments, we've got something that looks like this:

enter image description here

I don't think this 'dirties' the UI enough to seriously detract from the common user experience, so I would be happy to accommodate with underlined URLs. For the record, I hacked that UI with just the addition of:

.post-text a, .comment-copy a {
    text-decoration: underline;
}

I'm unaware of any corner cases that need to be considered in addition to what I've done.

I considered alternatives to underlining, but nothing else had sufficient grounds to counter the underlining precedent. Contrary opinions can comment.


Previous Answer

This answer is based on a misunderstanding: the scope of the request is much smaller than initially perceived. I've left the old answer for reference, but intend to provide an improved answer when I have sufficient time to write one.

Your suggested solution, to underline anchor tags, doesn't sit well with me and I suspect many other users. StackOverflow has a very clean aesthetic, and I don't think this jives with that.

Random SO page with underlined style

Unfortunately, I don't have sufficient UX experience to propose an alternative solution, so I've posed a question on UX SE. Hopefully, they can help us improve our accessibility without impacting the majority of the users.

As a final note, I'd like to point out that your feature request may be denied. We may not be able to find a compromise within StackOverflow's aesthetic, and StackOverflow may choose to prioritize a clean presentation over universal usability (see this post for reference). While this may be a pain point for some users, I hope they will respect the decision and the deliberation that went into it.

21
  • 7
    Common UI elements, which would be all but three items in your screen shot, needn't be underlined. And links that start with http:// needn't be underlined. So the only thing in your screenshot that needs an underline is the "ASPNET 4 Breaking Changes" link. In general, it's the user generated links in questions, answers and comments that may require underlining, so as not to be overlooked. For example, which one of this, this, or this is a link? Commented Jun 14, 2016 at 0:39
  • 1
    The answer is obvious here on meta because it's highlighted in red and underlined. On the main site, it would be easy to overlook. Commented Jun 14, 2016 at 0:41
  • 39
    Your screen shot underlines everything, which was not my request. While I offered a solution that restores them everywhere, it is only in the content of questions/answers that they are needed. Also, can someone explain why dotted 'underlines' are acceptable on the meta site but asking for the same thing is a pain point on the main site? Finally, you link to a Whitney Quesenbery article. I think she would tend to agree with me given her work in accessibility.
    – aardrian
    Commented Jun 14, 2016 at 1:39
  • @aardrian Sorry. Seems I misunderstood. I'll see if I can salvage the answer later.
    – ricksmt
    Commented Jun 14, 2016 at 2:17
  • @ricksmt Appreciated.
    – aardrian
    Commented Jun 14, 2016 at 2:21
  • 16
    @aardrian I don't see anything in the original post that restricts it to questions / answers (presumably you mean the rendered markdown area); you just ask for the text-decoration: none; to be removed, which is (I think) exactly what they did in this answer; can you clarify / confirm that you just mean in the rendered markdown area?
    – Marc Gravell Mod
    Commented Jun 14, 2016 at 11:50
  • @MarcGravell In the first sentence said "removes underlines from hyperlinks in posts," which I mean int he user-generated content. I assume that corresponds to the markdown area. I will edit that. Note that in other comments I also stated that I suggested that CSS edit as the easiest IMO.
    – aardrian
    Commented Jun 14, 2016 at 12:17
  • @MarcGravell Edited and added proposed CSS.
    – aardrian
    Commented Jun 14, 2016 at 12:27
  • 2
    Ah yes, I didn't clearly see it was restricted to "posts" either. Commented Jun 15, 2016 at 13:29
  • 2
    FWIW, the use of 'dotted' lines to depict a link is normally used to indicate an acronym and hovering reveals the full name. So the meta sites use of dotted line for links isn't exactly correct and should be solid lines instead. e.g. the <abbr> html tag or <acronym> tag (old) adds a dotted line beneath text. html5doctor.com/the-abbr-element
    – Dave Haigh
    Commented Jun 15, 2016 at 13:38
  • By the way there is a really good answer on the post you made ricksmt. You should say in your post that a detailed answer is now available.
    – Walfrat
    Commented Jun 15, 2016 at 14:42
  • 1
    @Walfrat I think it's humorous to note that the OP here answered my question there. I owe the OP an improved answer, and when I get the time I'll look at that too.
    – ricksmt
    Commented Jun 15, 2016 at 16:25
  • ahahah i didn't noticed it was the OP than answered there. But well it's a good answer aniway.
    – Walfrat
    Commented Jun 16, 2016 at 7:04
  • @ricksmt I did not notice that you adjusted your answer. I also adjusted my question a couple days ago with CSS to capture underlines in comments (like this one) and just last night added screen shots. (Side note, I answered the question on UX in a much broader way than my request here, sorry if that was confusing).
    – aardrian
    Commented Jun 18, 2016 at 15:34
  • @aardrian No confusion. The question was asking for guidelines which is rather broad, it just happened to have an example. I feel bad for editing it after the initial rush died down; I feel like I stole some votes since it switched from No to Yes. I could've posted it separately, but I feel like it wouldn't have received much attention. That tends to happen to me on meta sites: I'll arrive to the conversation late. Oh well.
    – ricksmt
    Commented Jun 18, 2016 at 21:50
35

Agreed - to underline or to not underline is a preference of the user, and it seems odd that the site stylesheet should explicitly prefer one or the other.

Personally, I have a colour monitor and good colour-vision, so I use colour rather than decoration to identify links, and my default browser style has (the equivalent of) a { text-decoration: none; }. But I wouldn't choose to inflict that on the readers of my sites. The whole beauty of the Web is that information can be accessible according to the users' abilities, rather than being fixed in a single presentation as printed information is.

Fortunately, we as users can always write user stylesheets with !important to override authors we disagree with... :-)

5
  • 6
    "to underline or to not underline is a preference of the user," Really, I didn't know that. I know it used to be that way, but I think that in the recent internet, with the latest browsers, that most users will find it inconvenient (or unavailable) to change and simply use the default settings. Commented Jun 15, 2016 at 13:27
  • 1
    @GeorgeBailey, I'd think that a user with specific needs would find it pretty important to do so, no? SO could try to offer a "high contrast" theme of some sort, but does it really make sense to request a large (in terms of testing time and possible side effects), site-wide change for a subset of users who already have a viable workaround?
    – Dan Field
    Commented Jun 15, 2016 at 14:31
  • 1
    @Dan, Yes, users who can't see what they want to will be frustrated. No, I don't think we need to implement a personal setting for the site's theme. My point is that many browsers will have underlines by default and we cannot expect the users to change this as a personal preference on their browser. See my answer below also. Commented Jun 15, 2016 at 14:49
  • 1
    Why can't we expect that a user with accessibility needs would have a custom stylesheet set up in their browser of choice to ensure that certain elements were overridden to be appropriately visible?
    – Dan Field
    Commented Jun 15, 2016 at 14:52
  • So then we should not get in the way of the default browser behavior and thus make all links underlined, just like the example in the answer below?
    – Alex
    Commented Jun 15, 2016 at 14:57
7

I like the dotted underlines like we have in meta. (except they should be in blue on the main site) I also like full underlines on hover.

I am hesitant to go with full constant underlines on non-hovered links, even if it is just in the questions/answers/comments. I think it would not be as pleasing to see.

1

My word

One will need to read the underlined text itself. Underlined text can be hard to read => It is better to search other solutions to outline links, there are some, like:

  • font thickness, color
  • use "a:before" effect to add some glyph

Both I suppose are HTML standard and easily implementable.

Moreover, common underlined text, if I am not blind, and understand your proposal correct, is a solid stick right below the string.
If put inside a text block, one gets an optical weight shift in random parts of a paragraph.
=> It can cause even more problems with readability, especially among people with attention disorders.
I must be missing something in your ideas. As it is, I'd consider it generally a bad design. A lighter line, not so close to the text is better, but I've seen limitations when I've played with underline effects, I could be mistaken as I don't know latest stuff from HTML world. I can imagine interesting graphical outline effects which could improve UX, but it can easily end up in question "Browser development".

-8

TL;DR Links need to be accessible and distinguishable, but that can and should be achieved by means other than underlining, because that sacrifices readability.

Inline links are supposed to be subtle. They need to be visible and accessible without disrupting the normal flow of text. Underlines are very distracting and make the text significantly more difficult to read. It is absolutely poor design to underline random swaths of characters in body text, where the content is the primary focus, not the presence of links. In fact, the links should blend in as much as possible. The reader should be able to pick them out if she wants to, but they should not reach out and strangle her. She must be able to ignore the links when reading, if she wants.

If the links are too visible and we cannot ignore them, it interferes with our comprehension. The brain becomes overtaxed, increasing cognitive load. Eventually, we either get sidetracked and lose the ability to focus entirely, or we simply become overwhelmed and therefore unable to retain an understanding of what we have read. This problem is magnified even more for readers with poor language/literacy skills—a different kind of accessibility problem.

(Granted, we are not doing a perfect job of this here. Inline code formatting still sucks. It completely disrupts the flow of the text, sticking out like a sore thumb, and makes the content much more difficult to read.)

This is consistent with the general Stack Exchange model, where posts are supposed to be entirely self-contained, with links provided for supplemental reference purposes only, not as a primary feature of the content. If we were a link aggregation service, then making links stick out might be sensible. We are, however, not. We are more like an online encyclopedia. Wikipedia doesn't underline links in their articles either, for a similar reason.

Even if we suppose for a moment that there is someone who simply cannot identify links unless they are underlined, there is no way that the site would become "unusable" to this person. The links in posts are supplemental. If you can't find them, or they don't exist, you don't miss anything.

There is a further problem with underlining links, and that is that underscores get lost in the underlines. This might not be a huge issue on other sites, but it is certainly relevant on Stack Overflow, a programming Q&A site where underscores often feature prominently in code.

This idea that underlining text makes it "look like" a link is an outdated notion and, worse, harkens back to a bad standard that emerged in the early days of the web, when technological limitations and technophiles-turned-designers created a typographical disaster. Any stylistic variation other than underlining would have been a better choice as the default style for links. If it really were (still) an absolute standard, followed consistently across the web, I suppose you'd have to have a good reason to deviate from it. I think the fact that it actively interferes with readability is a good enough reason. But even if you disagree, it is simply no longer the case that the majority of links on web pages are underlined. Almost all companies with a substantial web presence choose not to underline their links. Google doesn't do it, Amazon doesn't do it, Apple doesn't do it, Microsoft doesn't do it, Wikipedia doesn't do it, Twitter and Facebook don't do it, Netflix doesn't do it, Walmart doesn't do it, etc., etc.

If you want to make clickable elements that are not part of the body text look more affordable, I would have no objection to that. The "edited x hours ago" link, for example, is not part of the body text, and it is not very obvious to the uninitiated that it is a link. I agree this is a potential accessibility problem. You could underline it if you wanted to, but I still think underlining is a poor choice for increasing visibility and affordability. So you could change the color to increase its contrast with the foreground text, change its background color, add a border, add a shadow, or any number of other things to make it look clickable.

23
  • 28
    You make a lot of assertions but offer little back-up / supporting documentation (unlike the question). For example, you say answers are not harmed by readers missing links, but I have a tangible case where that is false. You say Google does not underline links, but Google's links fail accessibility checks (this is easily testable). And so on. Whether you agree something is a potential accessibility problem is moot, as that is a binary fact.
    – aardrian
    Commented Jun 13, 2016 at 14:37
  • 3
    so in what way does stack overflow meet WCAG requirements for hyperlinks? I didn't think this was optional.
    – kevinskio
    Commented Jun 13, 2016 at 14:40
  • 1
    @kevinsky None. They are too low contrast and rely on color alone.
    – aardrian
    Commented Jun 13, 2016 at 14:41
  • 1
    @CodyGray The link you added after my comment points to a PDF (that also fails embedded link color contrast) with this bit of confirmation bias right in the abstract: "Consistent with our predictions, the increased demands of decisionmaking and visual processing in hypertext impaired reading performance." I'll read further, but it is off to an inauspicious start.
    – aardrian
    Commented Jun 13, 2016 at 14:44
  • 4
    None of the links in your question say that links need to be underlined. All of them talk about increasing contrast. Aside from that, I did not intend for this answer to be a compendium of links. Nor did I want to get into a debate of slinging about studies. I fail to see how that is productive. I did try to look up a couple of them, and then immediately hit pay walls. After a few moments of cursing that ridiculously broken system, I decided to include only the single paper I found that was not behind a paywall, and only then because it is illegally hosted on someone's blog.
    – Cody Gray Mod
    Commented Jun 13, 2016 at 14:45
  • 9
    "confirmation bias"? No, that's how science is done. You come up with an idea, and then you test it.
    – Cody Gray Mod
    Commented Jun 13, 2016 at 14:46
  • 4
    @CodyGray you are correct, none of the links I offered explicitly state underlines as a requirement, though they do say good contrast and an additional cue besides color alone. Underlines are the default example. As those are a browser default and well-understood (happy to offer links but comment area terrible for that), I proposed underlines in my question.
    – aardrian
    Commented Jun 13, 2016 at 15:12
  • 3
    @aardrian you keep going on about 'backing-up' and 'supporting documentation' but really, unless this documentation is specific to how people use SO I don't see how it's relevant. These styling/accessibility guides are put in place for the wider user base of the web, but generally speaking people who are using SO are developers and are very familiar with how web pages work and what would constitute a link. I think perhaps changing the contrast is absolutely sufficient for those visually impaired without having to underline. Commented Jun 13, 2016 at 19:36
  • 2
    @aardrian perhaps I'm misunderstanding your question then - my 'bone to pick' was that it seemed you were pushing for the underline because it was implied somewhere that this is the correct action to take. My argument was that taking that specific action would be, for the most part, redundant on SO. If your argument is merely making links a bit more visible for those that are visually impaired then sure - but that's not what your question suggests; or perhaps I'm just not reading it properly. Commented Jun 13, 2016 at 20:45
  • 7
    Convention overrides aesthetic concerns -- whether it is typographically appealing or not, the convention on the internet is to underline links. Breaking conventions for superficial or design reasons is like a UX 101 no-no. I expect to spot links quickly on the internet, and I expect them to break up the flow by being noticeable. I do not expect them to hide in the text. The idea that underlines are disruptive to parsing text is built on the premise that the text is the most important thing to parse, but online, especially in the technical realm, links lead to docs, they're as important. Commented Jun 13, 2016 at 20:54
  • 3
    @Chris I made several arguments for why underlining links is not a convention (it is certainly not anymore, if it ever was, for no one follows it), and why it is a bad practice that should be stopped even if it were conventional. Very little of my arguments relate to "aesthetic" concerns, they relate to very real usability problems. In particular, that of underlining body text making it difficult to read. This is not a "superficial or design reason." Text is, on Stack Overflow, absolutely the most important thing to parse. It is why we are all here. I don't come here to click links.
    – Cody Gray Mod
    Commented Jun 14, 2016 at 6:11
  • 3
    Links to documentation, links to other questions, yeah, we click links here. As far as it not ever being the convention, save <html><body><a href="http://google.com">Google</a></body></html> and let me know what you see. The answer has been the same since Viola browser in 1993, argument to the contrary is fruitless. The study you cite does not implicate underlined links, nor does it draw the conclusion you use it to draw here. You've made a number of assertions rife with hyperbole like "typographical disaster" that are either not borne out by science or boil down to aesthetic preferences. Commented Jun 14, 2016 at 14:33
  • 2
    It says that it is, to the author's knowledge, the only such study to have been conducted. As is proper with a study, they also acknowledge that more research is needed. It does not, to me, seem to be a compelling reason to break from the widely-established conventions which I guess you now accept as conventional. SO isn't trying to discover cutting-edge readability techniques, it's trying to provide help to developers. As for it "turning into" a symposium, the sarcasm is not helpful and misplaced. You're making bald assertions and misusing studies to back them, the only reason science came up Commented Jun 14, 2016 at 19:18
  • 4
    I was not the one that tried to start using studies. That was never my intention. This is a discussion site. People offer opinions and make arguments. The original poster is the one who started lambasting me immediately for not providing enough "sources" to back up my claims. I edited one in, just for the sheer hell of it. Probably a mistake, it caused everyone, especially you Chris, to miss the point. I do not accept what you claim to be "conventional". It is nowhere the "convention", as I've addressed in my answer. Very few web sites follow that "convention". The fact that it remains in
    – Cody Gray Mod
    Commented Jun 15, 2016 at 4:50
  • 3
    a browser's default style sheet is a historical relic, and nothing else. It certainly doesn't suggest "best practice" or good design. I didn't respond to your comment because I am rather tired of this debate, the comment section is a bad place to even have a debate, and I've already made the arguments I wish to make in the answer itself. No one said that Stack Overflow is supposed to be doing anything "cutting edge". I've outlined what I think is the purpose of the site quite clearly in my answer, and that is providing expert information. Readability then is paramount. Not linkage.
    – Cody Gray Mod
    Commented Jun 15, 2016 at 4:52
-22

In some posts the links are underlined by this rule:

.wmd-preview a:not(.post-tag), .post-text a:not(.post-tag), .comment-copy a:not(.post-tag) {
    border-bottom: 1px dotted #3b4045;
}

Firefox Developer Edition screenshot:

Firefox screenshot

Chrome screenshot:

Chrome screenshot

I guess it's related to .wmd-preview, which I don't really know what stands for. Maybe we could apply this style to all posts? It looks good for me...

EDIT: User Juhana added that this style is only used in Meta. My proposal, then, is to use it (or one inspired by it) on the main site.

3
  • 31
    The links are underlined at Meta but the question is about the main site.
    – JJJ
    Commented Jun 13, 2016 at 10:06
  • @Juhana so that's the difference, ok, thanks! I'll add it to my answer! :)
    – xDaizu
    Commented Jun 13, 2016 at 10:09
  • 1
    .wmd-preview is the place below the textarea which shows the rendered post when you are editing.
    – Oriol
    Commented Jun 13, 2016 at 16:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .