WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: underlining links

for

From: Birkir R. Gunnarsson
Date: Sep 29, 2022 12:54PM

Per WCAG 1.4.1 (use of color)

When links are embedded in a block of text, there needs to be a clear
visual distinction between the link text and the surrounding static
text.
To think of it differently, users need to be able to clearly tell the
link from the adjacent static text.
Think of, say
More information is available in "our most recent news update"
(the text in quotes would be a link).
or
Our "menus" are both vegan and meat eater friendly.

Focus outlines or hover effects on the links are not enough, these
could be low vision mouse users.

The visual treatments that pass this are
* Link underlines (it's the classic, that's how people know links,
it's the least amount of effort), you can easily tell the link from
static text when it's underlined.
* Some other non-color-dependent visual treatment (bold link text or
icons), it passes
* Color, but only if
* the color of the link text has a contrast of 3:1 with the color of
adjacent text and
* both the link text and the adjacent text pass the 4.5:1 color
contrast with the background.

There are not many combinations of colors that pass the 3:1 with each
other + 4.5:1 with the background requirements, so that sounds like
the worst option.

When links are grouped without static text, such as in menus, headers,
or footers, then this requirement does not apply, there is no static
text.

For usability reasons, it's often good to have some indication.

Recently a colleague of mine (who is fully sighted and a pretty durn
good web accessibility tester to boot) did not realize that the links
on www.tetralogical.com (e.g. blog, services etc.) were links, so she
never clicked them.

My typical usability argument is. You put the link in this paragraph
because you want users to click it.
When you then try to hide the link or disguise it as regular text,
then users are not going to click it. Why would you do that?

Links are meant to be followed, and if you hide their purpose you will
get a lot fewer target page visits.

Unless you are working to minimize customer complaints by making it
hard to find the complaint form, you probably will listen to that
argument.
Thanks
-B

On 9/29/22, glen walker < <EMAIL REMOVED> > wrote:
> To add on to what Patrick said, when you ask if they "should" be
> underlined, that's a bit subjective. If you're asking if they "must" be
> underlined, then as Patrick said, WCAG does not require that.
>
> Now whether they "should" be underlined depends on the context. Personally,
> I like them underlined most of the time because I find them easier to spot
> (for people that have vision). But there are cases where an underline
> isn't necessary.
>
> As an example, look at webaim.org. The main menu in the upper right is a
> list of links. The links are not underlined. But the section below that
> lists the services they offer, each service is a link and it is underlined
> (and is a heading). But the "community" section to the right is also a
> list of links but none of them are underlined (unless you tab to them or
> hover over them).
>
> So there's a mix of underlining and not.
>
> Just be careful if you use color (1.4.1) to distinguish a link from the
> text around it. That would be a failure but it doesn't mean the link must
> be underlined.
>
> On Thu, Sep 29, 2022 at 11:41 AM Patrick H. Lauke < <EMAIL REMOVED> >
> wrote:
>
>> On 29/09/2022 17:37, Jon Brundage via WebAIM-Forum wrote:
>> > Raging debate today in my group: should all links be underlined? Is it a
>> > WCAG success criteria?
>>
>> No, and no.
>>
>> --
>> Patrick H. Lauke
>>
>>
> > > > >


--
Work hard. Have fun. Make history.