Site Usability nitpick -- Hyperlinks should be underlined

[DaveC426913]

This came up in my job today (UXP). Never thought to raise it here on PF till now.

Hyperlinks really should be underlined at all times. PF only underlines them when they are rolled over.

1. Colour alone (especially dark blue/purple) makes it difficult to spot a hyperlink in a large block of text (or even a small one).
2. Not everyone can see perfectly. Even if they don't suffer from colour deficiency, not everyone has the visual acuity to distinguish two very close shades of text.
3. Hover actions are not much of a solution, since they are not easily 'discoverable'. One must literally run one's mouse over the specific text to see that it's a link.
4. You can't hover over text on a mobile device.

While it's true that, in general, there are ways individual users can manually mitigate this (say, by switching to a high contrast or accessibility-facilitating theme), they shouldn't really have to, should they?

Accessibility has made a big comeback since the Wild West of the 20th century internet. Our population is aging sufficiently that accessibility should be the default, not the exception.

Currently, I force underlining using the text styling tool.

IMHO. Thoughts?

 

[berkeman]

Testing: www.physicsforums.com

 

[Frabjous]

Testing: www.physicsforums.com

I press ‘Testing:’ and nothing happens

 

[DaveC426913]

I do not see an underline - at least, not on my phone.

 

[berkeman]

I do not see an underline - at least, not on my phone.

I looked around in the Admin area for a setting for the formatting of URLs, but haven't found it yet. We may need @Greg Bernhardt to return from a trip in about a week to see if he can change that.

 

[phinds]

I do not see an underline - at least, not on my phone.

How about when you mouse-over it? That's when I see it on my computer.

 

[phinds]

On my phone I can't mouse over but I see the underline when I move the cursor to that position and I get the link when I click on it. So I don't really see your problem, dave

 

[Borek]

I believe underline showing up when you hover mouse them is a de facto standard, so changing it doesn't sound good. You can always make links bolded, to stand out from the text.

 

[DaveC426913]

I believe underline showing up when you hover mouse them is a de facto standard, so changing it doesn't sound good.

The standard is

• links are underlined
• unvisited links are blue
• visited links are purple
• active (hover) links are red

As to what the de facto standard is, that's arguable - nonetheless that's what we're fighting against. Whether or not hover-only-underlining is done regularly, it should not be.

You can always make links bolded, to stand out from the text.

Standards are standard for a reason. The indicator for "I am a link" is that it is underlined.

It's why we don't have green stop signs at intersections, oremojis at railroad crossings.

 

[DaveC426913]

How about when you mouse-over it? That's when I see it on my computer.

That is how it has been working up until now - as I explained in the opening post.

It is not good design.

On my phone I can't mouse over but I see the underline when I move the cursor to that position and I get the link when I click on it. So I don't really see your problem, dave

I explained the reasoning in great detail in the opening post.

Hover actions are not much of a solution, since they are not easily 'discoverable'. One must literally run one's mouse over the specific text to see that it's a link.

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.


Perhaps part of the problem is that not all links look like URLs. If that were buried in a large block of text, and you didn't have 20/20 vision, would you know it's a link?

This is what I see, BTW:

 

[phinds]

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.

Well, no argument there. Sorry I glossed over your explanation.

 

[berkeman]

One must literally run one's mouse over the specific text to see that it's a link.

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.

You mean like these things at the bottom of each post?:
"Report Edit Like Quote Reply"

I agree that it's obnoxious to have stuff mostly hidden until you mouse over it, but it seems to be the way GUIs have gone in the last decade or so. I guess it is in the quest for a "cleaner" look, but it sure makes it hard for folks with even small vision issues to navigate (myself included).

 

[TensorCalculus]

Hmm...
I agree with @DaveC426913 that ideally PF should follow the standards (which are the standards that he highlighted above, underlined links, blue if unvisited etc etc) however I've never really seen the lack of underlining on the links to be a massive problem: I gave it a shot and took off my glasses and tried to find all of the links in this thread (for reference I have an average of -4.5 eyesight across both eyes, and it was at a distance so that I can't make out the Physics Forums written in the top left corner, even if I squint) and I didn't find that I had much problem: the different colour made it quite apparent what was a link and what was not (even when the text was extremely, extremely blurry). I'm not sure how much of a difference an underline would make. Maybe to people with eyesight issues that aren't myopia the story is different, I don't know.

I think that while the change would be nice and it would be better to have it that way, it's maybe not specifically necessary? Like if it would take a lot of effort to change the styling (though.. it should just be a modification of a couple of lines of CSS hopefully), or if the new links styling looks weird aesthetically, then maybe the change is not worth it? IMO.

 

[DaveE]

Perhaps part of the problem is that not all links look like URLs. If that were buried in a large block of text, and you didn't have 20/20 vision, would you know it's a link?

Oops! Now I think I do this too much. Thanks for the tip.

It could be like this:
Hyperlink formatting information (https://webaim.org/techniques/hypertext/link_text) is on the web.

Or this:
Hyperlink formatting information (link here) is on the web.
For the really long ones.

Which is harder to read than this:
Hyperlink formatting information is on the web.
But easier to understand or use.

 

[DaveC426913]

You mean like these things at the bottom of each post?:
"Report Edit Like Quote Reply"

No, I mean in user posts.

I agree that it's obnoxious to have stuff mostly hidden until you mouse over it, but it seems to be the way GUIs have gone in the last decade or so. I guess it is in the quest for a "cleaner" look, but it sure makes it hard for folks with even small vision issues to navigate (myself included).

It's fine when a bit of text is obviously suiting a purpose:

But look at this example of a post that has catalyzed this thread:

Y'all do see that two links in that post, right?


(Originally, in the example post, I had forced the link underlines manually using the text editing tool, but now that this debate about accessibility is into double digit posts, I've rolled the example post back to the default state, just out of spite.)

 

[TensorCalculus]

Hmm...
I agree with @DaveC426913 that ideally PF should follow the standards (which are the standards that he highlighted above, underlined links, blue if unvisited etc etc) however I've never really seen the lack of underlining on the links to be a massive problem: I gave it a shot and took off my glasses and tried to find all of the links in this thread (for reference I have an average of -4.5 eyesight across both eyes, and it was at a distance so that I can't make out the Physics Forums written in the top left corner, even if I squint) and I didn't find that I had much problem: the different colour made it quite apparent what was a link and what was not (even when the text was extremely, extremely blurry). I'm not sure how much of a difference an underline would make. Maybe to people with eyesight issues that aren't myopia the story is different, I don't know.

I think that while the change would be nice and it would be better to have it that way, it's maybe not specifically necessary? Like if it would take a lot of effort to change the styling (though.. it should just be a modification of a couple of lines of CSS hopefully), or if the new links styling looks weird aesthetically, then maybe the change is not worth it? IMO.

I take back what I said: in dark mode I can see the links perfectly fine but I've just tried light mode because that's what people seem to be using and I couldn't tell where the links were at all, I had to use my mouse to find them.
But then again without my glasses my eyesight is so bad that I couldn't read any of the text at all anyway. Not even the big headers.

 

[DaveC426913]

Oops! Now I think I do this too much. Thanks for the tip.

You're not doing anything wrong. You're supposed to embed links in your text.

And you shouldn't need to clutter every link up with explanatory text that it's a link.

This is clutter - it makes reading difficult (imagine it in a longer, descriptive stream of text):

Hyperlink formatting information (https://webaim.org/techniques/hypertext/link_text) is on the web.

Or this:
Hyperlink formatting information (link here) is on the web.
For the really long ones.

This is the "correct" way to embed links in blocks of text:

Which is harder to read than this:
Hyperlink formatting information is on the web.
But easier to understand or use.

Note: that may not be the best example to show the problem/solution. Imagine though, if you were writing out a long block of text that had a number of links in it. If the links are too subtle, you can't tell what is a link and what isn't - and not without rolling over them (if you can). The intended functionality here is not have to add additional text that (link here) interrupts the reading. Let the text flow; but make in-text links obvious for those to want to follow them.

This is the way.

 

[DaveC426913]

I take back what I said: in dark mode I can see the links perfectly fine

Thank you!

This highlights another very important reason for using standards and for not merely going on your own experience.


There are as many user circumstances as there are users. It never even occurred to me about dark mode vs. light mode as just one more example.

Standards take into consideration a far wider range of user personas, habits, experiences circumstances than any one person. They have been thought through to cover as much of the real world as practical, not just you or I.

That's a lot better than "I don't see anything wrong on my screen, so I guess no one else does either."

 

[DaveE]

You're not doing anything wrong. You're supposed to embed links in your text.

And you shouldn't need to clutter every link up with explanatory text that it's a link.

Also, I kind of skipped over your point that some users force the underline by formatting their fonts. I guess that's a pretty good user workaround when you aren't in control. Still it is a slight PITA for the typist.

 

[sbrothy]

EDIT: Although it's funny that a mouse-over doesn't provide any info.

I try to use the URL tag whenever possible. Does it make a difference or is it more basic than that? I mean if a URL is difficult to spot there's not much you can do about it as users can customize how it looks at their end. e.g.:

Clarivate

 

[sbrothy]

[...]

1. You can't hover over text on a mobile device.

[...]

IMHO. Thoughts?

On my phone (old IPhone 4) I press and hold the link and the hover text is shown.

 

[robphy]

At the recent AAPT meeting, one of the updates to Glowscript/WebVPython is an improvement to better support accessibility.

possibly useful:

• https://webaim.org/articles/
• https://www.w3.org/TR/WCAG21/
• https://www.w3.org/WAI/test-evaluate/tools/list/ ( Web Accessibility Evaluation Tools List )

 

[DaveC426913]

I try to use the URL tag whenever possible. Does it make a difference or is it more basic than that?

Do you mean
[ URL = 'this' ]BBcode tag?[ /URL ]

Yes. It ought to be underlined.

I mean if a URL is difficult to spot there's not much you can do about it as users can customize how it looks at their end. e.g.:

You're missing the point.

That's kind of like saying "if people drown when they don't wear life jackets, there's not much you can do about it, since people can always just take off their life jackets".

Yes, there is. You set the standard. You stick to the standard at your end. If individual users want to customize their own experience, they are free to do so.

 

[DaveC426913]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

 

[Borek]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

Add to that google search results. Told you lack of underline has become a de facto standard.

Yes, back in the day it was different. It no longer is.

 

[Dale]

The standard is

• links are underlined
• unvisited links are blue
• visited links are purple
• active (hover) links are red

I am not sure that is the de-facto standard.

Here is a random google page:

I had my mouse over "Tournament draw", so this is the same behavior at PF.

I had my mouse over "random", so again this is the same behavior as at PF.

Standards are standard for a reason. The indicator for "I am a link" is that it is underlined.

It's why we don't have green stop signs at intersections, oremojis at railroad crossings

I agree with this, but I don't think the de-facto standards are actually what you say they are. If google and wikipedia are both following the same standard then I think that is probably the de-facto standard. And I think that PF is already following that.

I think what you really want is to change the de-facto standards. Personally, I don’t like all the underlining and I prefer the current de facto standard.

BTW, green stop signs are not de-facto standards, they are legally codified standards. There are also published industry standards, which are somewhere in-between de-facto and legally codified standards. I wonder if web designers have published industry standards.

Edit: I see others have already made this point.

 

[sbrothy]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

You're right, I didn't get it before getting involved. Shame on me.

It really seems to be grinding your gears though! Watch your blood pressure and remember that the internet is basically anarchy. I think there's an XKCD strip about insisting on standards on the net. I'll see if I cant dig it up...



EDIT: I thought it was funnier. I wouldn't be surprised if there were more than one considering the author:

XKCD - Standards

 

[AlexB23]

And this blue text looks like a link, but it is actually from the color picker.

 

[sbrothy]

And this blue text looks like a link, but it is actually from the color picker.

Yes, by all means throw a wrench in the gears.

 

[DaveC426913]

Personally, I don’t like all the underlining and I prefer the current de facto standard.

Right, but what you, or I, or any individual user prefers is irrelevant.

Un-underlined links are hostile design; they are great for those with excellent vision and viewing conditions, but hurt everyone else.

 

[DaveC426913]

It really seems to be grinding your gears though!

We all have our battles. Usability is mine. PF is an oasis of quality content. I want to keep it that way.

The question is more: why is it grinding anybody else's gears?

This thread didn't have to be 30 posts long. Post #2 could have been "Huh. You're totally right. Function before form. We should enact W3C internet standards that facilitate accessibility for all, not just a few." - and garnished with two dozen Likes.

Watch your blood pressure and remember that the internet is basically anarchy.

No, the internet is mostly anarchy. That doesn't mean we all just give up.

 

[Dale]

Post #2 could have been "Huh. You're totally right. Function before form. We should enact W3C internet standards that facilitate accessibility for all, not just a few."

But do we have any actual evidence that underlining links promotes accessibility? I support the goal, but I am not convinced that this assists the goal.

I personally have a fairly strong astigmatism, so I find excessive underlining makes text more difficult to read, not less. I would not assume that more underlining would actually help others who are more severely visually impaired. It doesn't help me with my minor impairment.

 

[sbrothy]

We all have our battles. Usability is mine. PF is an oasis of quality content. I want to keep it that way.

The question is more: why is it grinding anybody else's gears?

This thread didn't have to be 30 posts long. Post #2 could have been "Huh. You're totally right. Function before form. We should enact W3C internet standards that facilitate accessibility for all, not just a few." - and garnished with two dozen Likes.


No, the internet is mostly anarchy. That doesn't mean we all just give up.

You’re right. But, as is often the case, I have a twinkle in my eye when posting (A habit I should really combat more vigorously.).

This seemed to me to be a battle which couldn’t be won - or at least one that would end in a Pyrrhic victory - however that would look?

But all you want seems to be to change how physicsforums shows links. Doesn’t sound impossible on the face of it, but how deep the behavior sticks I have no idea.

It seems it works for @TensorCalculus in “dark mode” which is what I meant with the look being customizable in the user end. Of course that probably entails other problems and I myself like to switch back and forth precisely to avoid straining my eyes.

But enough nitpicking from me. Just wanted to let you know that I understand that this is a real problem for you and not to be ridiculed.

 

[DaveC426913]

But all you want seems to be to change how physicsforums shows links. Doesn’t sound impossible on the face of it, but how deep the behavior sticks I have no idea.

By default, all links will show with an underline. When they don't it's because a designer has added a CSS style:

a { text-decoration: none; }

 

[DaveC426913]

But do we have any actual evidence that underlining links promotes accessibility? I support the goal, but I am not convinced that this assists the goal.

Do you mean has the World Wide Web consortium - the body that sets the standards for the trillion dollar critical global infrastructure technology that is the world wide web - actually done any government-mandated and funded research and acquired data on billions of user experiences, to define their standards - as opposed to merely guessing?

Yes.

 

[DaveC426913]

Official standard: WCAG (Web Content Accessibilty Guidelines) published by the World Wide Web Consortium (W3C), widely recognized internationally, including adoption as an ISO standard (ISO/IEC 40500:2012):

• Link-specific guidelines: WCAG 2.0 introduced criteria such as 2.4.4 Link Purpose (In Context) and 2.4.9 Link Purpose (Link Only) which require that the purpose of each link is clear to users, particularly through accessible text or context.

Yale Usability & Web Accessibility's guidance on links covers important UX considerations like:

• Always use a non-color indicator (typically an underline) to distinguish links from regular text; color alone is not enough for accessibility.

(Full disclosure: I did use ChatGPT to do a search for the relevant references, because it's fast, but I curated the results for brevity and clarity).

 

[sbrothy]

By default, all links will show with an underline. When they don't it's because a designer has added a CSS style:

a { text-decoration: none; }

OMG. Don’t get me started on CSS. Talk about battles you can’t win!

 

[DaveC426913]

OMG. Don’t get me started on CSS. Talk about battles you can’t win!

That's literally all it took to implement - and literally all it takes to remediate it.

 

[Dale]

Do you mean has the World Wide Web consortium - the body that sets the standards for the trillion dollar critical global infrastructure technology that is the world wide web - actually done any government-mandated and funded research and acquired data on billions of user experiences, to define their standards - as opposed to merely guessing?

Yes.

What goes into standards is based on the judgement and agreement of the members of the standards committee. Often they agree because there is published research on the topic, but other times they agree to choose a standard even in the absence of actual research.

So simply being a published standard for a big and regulated industry does not imply that a specific standard is based on scientific evidence. Scientific evidence for a standard is found in published scientific papers.

Official standard: WCAG (Web Content Accessibilty Guidelines) published by the World Wide Web Consortium (W3C), widely recognized internationally, including adoption as an ISO standard (ISO/IEC 40500:2012):

• Link-specific guidelines: WCAG 2.0 introduced criteria such as 2.4.4 Link Purpose (In Context) and 2.4.9 Link Purpose (Link Only) which require that the purpose of each link is clear to users, particularly through accessible text or context.

Yale Usability & Web Accessibility's guidance on links covers important UX considerations like:

• Always use a non-color indicator (typically an underline) to distinguish links from regular text; color alone is not enough for accessibility.

Interesting. So it seems that neither Google nor Wikipedia (nor PF) follow the WCAG. Or possibly the "mouse-over" underlining behavior is considered to meet the WCAG standard.

Do we know which is the case? If Google et al. do not follow the WCAG then is there a competing standard that they do follow?

 

[DaveC426913]

So simply being a published standard for a big and regulated industry does not imply that a specific standard is based on scientific evidence. Scientific evidence for a standard is found in published scientific papers.

Which is why I said:
"[they have] ...actually done ... government-mandated and funded research and acquired data on billions of user experiences..."


Do we need to produce the published papers on world wide web usability and wait for them to be vetted by members here (who are not field experts) before we make a one-line CSS change that helps PF be more accessibility-compliant?

I'm not being facetious. That seems a pretty high bar.


Put another way:

"...do we have any actual evidence that underlining links promotes accessibility? I support the goal, but I am not convinced that this assists the goal..."

How much evidence would convince you that colour-blind and vision-deficient users can't rely on colour alone to see links embedded in text?

As Yale says: "color alone is not enough for accessibility."

 

[DaveC426913]

"Blue hypertext is a good design decision: no perceptual disadvantage in reading and successful highlighting of relevant information" [underlining is addressed as well]
https://pmc.ncbi.nlm.nih.gov/articles/PMC5036113

Underline on hover/focus is still a failure
Having an underline but only on hover is still a failure of criterion 1.4.1. If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.” 3
[ https : //medium.com/vassar-design/links-with-underlines-as-a-best-practice-fe1ba0d6ba71 ]
(I don't understand why PF insists on rendering this link as if it is a [ media ] object. It's just a web page.)

"Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines."
https://www.logarithmic.net/pfh-files/links.html

There are still "merely" recommendations from authorities. Do I need to provide the original papers?

 

[Dale]

How much evidence would convince you that colour-blind and vision-deficient users can't rely on colour alone to see links embedded in text?

Most color-blind users are not achromatic and would be effectively served by different color schemes. For example, the various viridis color maps that I use in R for this purpose.

Being a mildly vision-deficient (astigmatism) user myself, I personally don't believe that underlining helps. It certainly makes things more difficult to read for me personally. So, the evidence that I would require would actually be a peer-reviewed study or that included a full gamut of vision-deficiencies, or similar.

I don't think that it is as obviously beneficial as you assert. It would be worse for me personally, so I would want clear evidence that it is more beneficial over the whole population.

I'm not being facetious. That seems a pretty high bar.

Nor am I. For me it is not beneficial and actually worse. So yes, I do ask for a higher bar than it being in some standard that appears to not be followed by the most major sites.

 

[sbrothy]

Most people I know think color blindness means that those that suffer from it see in black & white only.

 

[Dale]

"Blue hypertext is a good design decision: no perceptual disadvantage in reading and successful highlighting of relevant information" [underlining is addressed as well]
https://pmc.ncbi.nlm.nih.gov/articles/PMC5036113

It seems from this research that there is very little benefit to underlining in addition to blue color.

The effects seem small and the analysis is not corrected for multiple comparisons. It looks like the only place it has an effect is in "go past" time and total viewing time. But with the go-past time underlining and blue made it worse than just blue.

And none of the participants were vision-deficient in any way that was not corrected in the study.

I have not read this yet, but it may be more useful, particularly if it actually cites the research:
https://www.nngroup.com/reports/usability-guidelines-accessible-web-design/
This was a further link from the second link you posted above.

 

[AlexB23]

Yes, by all means throw a wrench in the gears.

Haha, I did that to demonstrate why it is good to use underlines for links, as blue text could be just colorized.

 

[DaveC426913]

Most color-blind users are not achromatic and would be effectively served by different color schemes. For example, the various viridis color maps that I use in R for this purpose.

Being a mildly vision-deficient (astigmatism) user myself, I personally don't believe that underlining helps. It certainly makes things more difficult to read for me personally. So, the evidence that I would require would actually be a peer-reviewed study or that included a full gamut of vision-deficiencies, or similar.

I don't think that it is as obviously beneficial as you assert. It would be worse for me personally, so I would want clear evidence that it is more beneficial over the whole population.


Nor am I. For me it is not beneficial and actually worse. So yes, I do ask for a higher bar than it being in some standard that appears to not be followed by the most major sites.

OK. I give up.

It seems as if to enact even the slightest change and accommodate a wider audience, apparently it will require PF to ignore the entire accessibility industry, its experts, their standards and established best practices, and instead launch its own studies to analyze the raw data to become its own expert, and come to its own conclusions, which - so far - consists of, like, three users who have said "I dunno ... I looked at this page for twelve seconds and for me it's not benefical ..."

OK, now I'm being facetious.


Anyway, I have nothing further to contribute. You guys know best.

 

[AlexB23]

OK. I give up.

It seems as if to enact even the slightest change and accommodate a wider audience, apparently it will require PF to ignore the entire accessibility industry, its experts, their standards and established best practices, and instead launch its own studies to analyze the raw data to become its own expert, and come to its own conclusions, which - so far - consists of, like, three users who have said "I dunno ... I looked at this page for twelve seconds and for me it's not benefical ..."

OK, now I'm being facetious.


Anyway, I have nothing further to contribute. You guys know best.

I side with you, Dave.

See, this is a link about HTML, and this is blue text.

 

[vela]

Add to that google search results.

Kagi search results, on the other hand, do have underlined links. So do the sites for the New York Times, the LA Times, the Washington Post, and the Wall Street Journal. That doesn't seem too surprising because newspapers probably prioritize making their sites accessible. I just checked a number of sites I visit regularly and noticed the majority of them have underlined links.

Told you lack of underline has become a de facto standard.

I don't think following allegedly de facto standards on the web should be the goal.

The visual indicator for a link shouldn't be just color for the reasons mentioned earlier. It doesn't necessarily have to be underlining, but there should be some visual indication other than color, which doesn't require a mouseover to discover. That is, of course, if PF cares about accessibility.

 

[Greg Bernhardt]

I think some years ago, heavy link websites started to move away from the underline because it added so much visual noise to the page.

 

[DaveC426913]

I think some years ago, heavy link websites started to move away from the underline because it added so much visual noise to the page.

Yes. Pandering to the default ideal user at the expense of accessibility. Not a good ethos for PF.


We are an aging population. For the first time in census records, seniors are now the largest demographic.