[Discuss] Adding underlines to links

[myasonik]

TL;DR Accessibility with only color is hard. Underlines are the de facto "this is a link" styles so we should add ours back.

---

There's been a lot of hubbub recently about link underlines. Seems that every accessibility advocate I follow strongly recommends them as the preferred approach because it's the easiest way to meet WCAG criteria and tests well with users. Should our links be underlined? (Yes, that would diverge our button and link styles which I think is also a good thing.)

The Spec

So, the official criteria for Use of Color:

• If color alone is used to identify a link, they require a 4.5:1 contrast ratio with the background and a 3:1 contrast ratio with the surrounding text (G183)
• Otherwise, we can include a non-visual cue. This can be nearly anything. (G182)

Our conformance

Right now, we've got lots of link colors and lots of backgrounds that they can go on so it's difficult to do a full analysis but I'll check the contrast just for link colors vs text (#343741):

• subdued: 2.38
• secondary: 2.36
• accent: 2.47
• danger: 1.96
• warning: 5.89
• text: 1
• ghost: 11.87

So we can see that nearly all of our colors fail the check. (Why is text even an option?)

What now?

Well, I think the first step is adding underlines to our links as managing the color contrast seems way harder. If we really want to go the color route, I'll leave it to a designer to come up with appropriate colors.

At some later date, we could also revisit button styles but I think adding underlines to buttons would be really, really confusing.

A common complaint is that underlines are ugly to which I have to kind of shrug at. I'd rather prioritize accessibility than the pretties links the world. But two easy ways to improve underline appearance can be text-decoration-color and text-decoration-skip-ink which have pretty decent browser support (and the fallback is regular underlines so it's not a big deal if they don't).

Why now?

I said there's been a hubbub, so why now? Well, some big names in web accessibility opened an issue with Mastodon to do the same. The issue got heated, the ended up closing it with little action. Now at accessibility conferences people are calling out Mastodon for being shitty. Seems like a lot of bad press for some link styles.

More info

• Underlines are beautiful
• On link underlines
• I Don’t Care What Google Did, Just Keep Underlining Links

[cchaos]

To be clear, are you asking for underlines just on things that render as <a> anchor tags not <button>s correct?

[myasonik]

Yup!

[snide]

Hey there. I appreciate the spirit of this request, and I'm trying to find some old discussions on this since it came up several times in the early days of EUI. But I feel pretty strongly that underlines for links in an application versus a text document is very challenging and not a good thing for EUI.

I really appreciate the thought and care of the WCAG guidelines, but I do feel they are written primarily towards the idea of the browser as a publishing platform (delivering articles) rather than a creation engine for building dense, non-text things. When everything is given equal weight, design is extremely hard. Kibana is filled, utterly filled with links and interaction. Density and noise is one of our primary challenges. The way the guidelines are written at present makes it very difficult to meet contrast guidelines between links and surrounding text. From that basis it's very easy to say... hey, you must use underlines, even though it doesn't expressly state that. Specifically I've read that rule over and over in the past three years and concluded it's just not realistic for Kibana.

In a round about way, I'm saying I think the guidelines in this case are too strict, and like AAA certification, if followed for very complex applications, lead to experiences that cause an application to degrade. There's a happy middle to this kind of work where the experience is good for people of low and high vision. What I want to make sure is that we retain that middle, and assume best intent in our work, without straying too far into blanket adoption of rules. It's a slippery slope, and suddenly you start making choices like "why are we making non standard html form elements like comboboxes". The reason we do these things is because sometimes the guidelines and standards are insuffiencent to our work requirements.

The last time this came up I remember looking to the larger players in this field. Specifically Google, Apple and Microsoft. All three ignore this specification as much as not, even on their own accessibility websites. I'm not saying that gives me pause we can't do better, but it at least makes me skeptical about this specific issue. The page I'm writing this comment on for example I would consider makes a very decent attempt at accessibility and also ignores this rule.

[myasonik]

Discussed live and came to the conclusion this is hard 😅

We'll try rolling out some underlines in specific areas and see how that goes. Further down the line we may also consider doing something to EuiButtonEmpty, expanding the scope of when to use underlines (or other visual indicators), or improving our color contrast but we're going to start small.