WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: underlining links

for

Number of posts in this thread: 9 (In chronological order)

From: Jon Brundage
Date: Thu, Sep 29 2022 10:37AM
Subject: underlining links
No previous message | Next message →

Raging debate today in my group: should all links be underlined? Is it a
WCAG success criteria?



Thanks,



Jon

From: Sandy Feldman
Date: Thu, Sep 29 2022 11:33AM
Subject: Re: underlining links
← Previous message | Next message →

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>hey Jon,</p>
<p><a class="moz-txt-link-freetext" href="https://www.w3.org/TR/WCAG20-TECHS/F73.html">https://www.w3.org/TR/WCAG20-TECHS/F73.html</a></p>
<p>says "Link underlines or <b>some other non-color visual
distinction</b> are required".</p>
<p>so yeah, I don't think the underline is strictly necessary. <br>
</p>
<p>For example you generally don't see underlines in navigation
links and they make sense. In the content the underline is a
convention we all understand and that helps make it usable. I've
seen sites where the content links are bold and that makes sense
too - just takes an extra second to see what they're doing.<br>
</p>
<div class="moz-signature">Sandy
<p><a href="https://sandyfeldman.com">sandyfeldman.com</a>
<br>
<a href="https://www.a11yready.com/">a11yready.com</a><a>
</a></p>
<a><br>
<br>
</a></div>
<div class="moz-cite-prefix">On 2022-09-29 12:37 p.m., Jon Brundage
via WebAIM-Forum wrote:<br>
</div>
<blockquote type="cite"
cite="mid:030601d8d421$bd4cb5c0$37e62140$@yahoo.com">
<pre class="moz-quote-pre" wrap="">Raging debate today in my group: should all links be underlined? Is it a
WCAG success criteria?



Thanks,



Jon

List archives at <a class="moz-txt-link-freetext" href="http://webaim.org/discussion/archives">http://webaim.org/discussion/archives<;/a>
</pre>
</blockquote>
</body>
</html>

From: Patrick H. Lauke
Date: Thu, Sep 29 2022 11:41AM
Subject: Re: underlining links
← Previous message | Next message →

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

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: glen walker
Date: Thu, Sep 29 2022 12:19PM
Subject: Re: underlining links
← Previous message | Next message →

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

From: Juliette McShane
Date: Thu, Sep 29 2022 12:22PM
Subject: Re: [WEBAIM] Underlining Links
← Previous message | Next message →

Hi all!

I'm usually a quiet observer of this list, but I wanted to clarify
something that Sandy said.

The failure condition F73 that Sandy cited is related to SC 1.4.1 Use of
Color https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html .
This can be a tricky one to understand.

This failure condition applies IF color has been used to indicate that
something is a link AND that link is in a 'block of text'. If both of those
things are true, then the link requires an additional non-color indication
that it is a link. This is commonly an underline, but may be applying a
heavier font weight or italicizing, changing font family, increasing text
size...

IF you choose to apply hover styes, they must meet SC 1.4.11
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

The focus indicator for links also must meet SC 1.4.11.

None of these SC require that a link is underlined. It is an irritation of
mine that WCAG, in fact, does not have a failure related to not styling a
link differently than unlinked text. The logic for that is basically that
an undifferentiated link is pretty awful for everyone,so disabled folks
aren't disadvantaged.

On Thu, Sep 29, 2022 at 11:00 AM < = EMAIL ADDRESS REMOVED = >
wrote:

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS REMOVED =
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> = EMAIL ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. experiences using axe auditor (Nathan Clark)
> 2. underlining links ( = EMAIL ADDRESS REMOVED = )
> 3. Re: underlining links (Sandy Feldman)
> 4. Re: underlining links (Patrick H. Lauke)
>
>
>
> ---------- Forwarded message ----------
> From: Nathan Clark < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Cc:
> Bcc:
> Date: Thu, 29 Sep 2022 11:04:42 -0400
> Subject: [WebAIM] experiences using axe auditor
> Dear list,
> Does anyone have any experience using axe auditor tool and do you find
> the tool to be useful when doing accessibility testing? Thanks.
>
> Sincerely,
> Nathan Clark
>
>
>
> --
> Nathan Clark
> QA Automation Analyst Tech team
> Accessibility assistant
> CPACC
> cell: 410-446-7259
> email: = EMAIL ADDRESS REMOVED =
> 101 Village Blvd
> Princeton, NJ 08540
> SMBE & Minority Owned Business
>
>
>
>
> ---------- Forwarded message ----------
> From: < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 29 Sep 2022 12:37:16 -0400
> Subject: [WebAIM] underlining links
> Raging debate today in my group: should all links be underlined? Is it a
> WCAG success criteria?
>
>
>
> Thanks,
>
>
>
> Jon
>
>
>
>
>
> ---------- Forwarded message ----------
> From: Sandy Feldman < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 29 Sep 2022 13:33:03 -0400
> Subject: Re: [WebAIM] underlining links
>
> hey Jon,
>
> https://www.w3.org/TR/WCAG20-TECHS/F73.html
>
> says "Link underlines or *some other non-color visual distinction* are
> required".
>
> so yeah, I don't think the underline is strictly necessary.
>
> For example you generally don't see underlines in navigation links and
> they make sense. In the content the underline is a convention we all
> understand and that helps make it usable. I've seen sites where the content
> links are bold and that makes sense too - just takes an extra second to see
> what they're doing.
> Sandy
>
> sandyfeldman.com
> a11yready.com <https://www.a11yready.com/>
>
>
> On 2022-09-29 12:37 p.m., Jon Brundage via WebAIM-Forum wrote:
>
> Raging debate today in my group: should all links be underlined? Is it a
> WCAG success criteria?
>
>
>
> Thanks,
>
>
>
> Jon
>
> > > > >
>
>
>
> ---------- Forwarded message ----------
> From: "Patrick H. Lauke" < = EMAIL ADDRESS REMOVED = >
> To: = EMAIL ADDRESS REMOVED =
> Cc:
> Bcc:
> Date: Thu, 29 Sep 2022 18:41:26 +0100
> Subject: Re: [WebAIM] underlining links
> 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
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
>
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Sep 29 2022 12:54PM
Subject: Re: underlining links
← Previous message | Next message →

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

From: chagnon
Date: Thu, Sep 29 2022 1:51PM
Subject: Re: underlining links
← Previous message | Next message →

Quote/ "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?"
Unquote/

Thank you Birkir for such a straightforward, logical explanation.

And thanks to all others. Very valuable ideas.

— — —
Bevi Chagnon | Designer, Accessibility Technician | = EMAIL ADDRESS REMOVED =
— — —
PubCom: Technologists for Accessible Design + Publishing
consulting ' training ' development ' design ' sec. 508 services
Upcoming classes at www.PubCom.com/classes
— — —

From: Jon Brundage
Date: Fri, Sep 30 2022 12:52PM
Subject: Re: underlining links
← Previous message | Next message →

Thanks everyone for the input. So my take away is:



Links that are in navigational arrangement or styled like buttons don't require underlining.



Links in content must be delineated by some method. This includes underlining (probably the best method), bold text or italicized text - all with proper color contrast.



Sound right?



Also let me say a big way to help everyone with recognizing links is to have good link text.



"Our site is best in helping you find a product"



"Our site is best in helping you find a product"



Thanks again,



Jon











From: Birkir R. Gunnarsson
Date: Fri, Sep 30 2022 2:47PM
Subject: Re: underlining links
← Previous message | No next message

If you use the non-color treatment of links (like underline, bolding,
or icon) you dn't need to meet the color contrast or link text to
adjacent text, they can be the same color if you want.
It's only wen you choose not to use any visual treatment to identify
links in content that you must meet the color contrast of link text to
adjacent text requirement.
That's why the non-color treatment is typically the more agreeable
option for designers.


On 9/30/22, Jon Brundage via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks everyone for the input. So my take away is:
>
>
>
> Links that are in navigational arrangement or styled like buttons don't
> require underlining.
>
>
>
> Links in content must be delineated by some method. This includes
> underlining (probably the best method), bold text or italicized text - all
> with proper color contrast.
>
>
>
> Sound right?
>
>
>
> Also let me say a big way to help everyone with recognizing links is to have
> good link text.
>
>
>
> "Our site is best in helping you find a product"
>
>
>
> "Our site is best in helping you find a product"
>
>
>
> Thanks again,
>
>
>
> Jon
>
>
>
>
>
>
>
>
>
>
>
>