WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hyperlinks Not Underlined Question

for

From: Marjorie Meyer
Date: Apr 1, 2020 11:11AM

WebAIM has a comprehensive article on links https://webaim.org/techniques/hypertext/
and tool for testing surrounding contrast.
https://webaim.org/resources/linkcontrastchecker/

Hope this helps you.

Marjorie Meyer
Sent from my iPad

> On Apr 1, 2020, at 9:12 AM, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>
> Fail.
>
>> On 4/1/20, Jim Homme < <EMAIL REMOVED> > wrote:
>> Hi,
>> In this case, the links are the same color as the surrounding text. You can
>> only tell they are links if you hover or focus them.
>>
>>
>> =========>> Jim Homme
>> Digital Accessibility
>> Bender Consulting Services
>> 412-787-8567
>> https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Tuesday, March 31, 2020 8:38 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Hyperlinks Not Underlined Question
>>
>> Basically SC 1.4.3 requires that users can tell links from surrounding plain
>> text (i.e. can realize that the piece of text inside the link is actionable,
>> in this case clickable.
>> The exception is if the color of the link text has a contrast of 3 to
>> 1 with the color of surrounding text and that both link text and surrounding
>> text have a contrast ratio of 4.5:1 with the background.
>> My understanding is that there are only a handful of color combinations that
>> would meet both of these requirements.
>> You can use formatting or icons to distinguish the link text from
>> surrounding text, or just leave the damn underline, (fortunately, in my
>> organization we can set some of our own requirements and we do not allow
>> removing the underline).
>> AS a wise man once said, underlines are beautiful
>> https://adrianroselli.com/2019/01/underlines-are-beautiful.html
>>
>>
>>
>>> On 3/31/20, glen walker < <EMAIL REMOVED> > wrote:
>>> 1.4.11 usually does not come into play because that's for non-text.
>>> Most links are text but I suppose if you had a graphical link, it might
>>> apply.
>>>
>>> If a link is embedded in a paragraph and the link text is a different
>>> color than the text paragraph *and* you have underlines turned off,
>>> that would be a problem. G183 regarding 1.4.1 talks about this
>>> situation but says the link text must have at least a 3:1 difference
>>> from the paragraph text (so that most people can perceive there's a
>>> difference) **and* *there must be another visual clue when the link
>>> receives keyboard or mouse focus.
>>>
>>> If the link text is bold and the paragraph text is not, then
>>> technically the link text and the paragraph text can be the same color
>>> and underlines can be turned off and it would pass 1.4.1 (because
>>> color is not being used for meaning - a font style (bold) is being used).
>>>
>>> The link text could be a different color from the paragraph text and
>>> only have a 1.5:1 contrast difference but if it were also bold (or
>>> italic or some other non-color difference), it would be ok. (Which is
>>> pretty much what I just said in the previous paragraph but a slightly
>>> different
>>> situation.)
>>>
>>> There is nothing that requires links to have underlines. That's just
>>> the standard that has been around for 20+ years.
>>>
>>> If the links are for navigating or for opening menus, they don't
>>> necessarily need underlines. It might be understandable from the
>>> context what their behavior is.
>>>
>>> In your specific case, it sounds like there are a group of links in a
>>> "menu" and some of the links are for navigation and others are for
>>> dropdowns. Does there need to be a distinction? From a visual
>>> perspective, there should be but it might not be required. From an
>>> aria perspective, there should be too.
>>>
>>> As an example, I was on Lego.com the other day. The main menu
>>> (themes, shop by, interests) has both dropdown menus and direct navigation
>>> links.
>>> The dropdown menus have a visual indicator (down arrow) and the direct
>>> links do not. The dropdown menus have aria-haspopup so that the
>>> screen reader will announce "submenu" but the direct links do not.
>>>
>>> (Side note, when using aria-haspopup or menu roles, you are committing
>>> to using arrow navigation to traverse the menu. Personally, I would
>>> have used aria-expanded for the dropdowns and let the user use the tab
>>> key for navigating through the items.)
>>>
>>> [image: image.png]
>>> (Screenshot of menu. Yellow background and black text. Dropdown
>>> menus have a down arrow next to them. Direct links do not.)
>>>
>>> Anyway, if the dropdowns did not have the down arrow but they had aria
>>> properties to indicate they're dropdowns, that would be an advantage
>>> for the screen reader user and a disadvantage to the sighted user. I
>>> would consider that a poor design.
>>>
>>>
>>>
>>>
>>> On Tue, Mar 31, 2020 at 1:30 PM Jim Homme < <EMAIL REMOVED> >
>>> wrote:
>>>
>>>> Hi,
>>>> I want to see if my understanding of SC 1.4.1, 1.4.3, and 1.4.11 is
>>>> correct in this area. My understanding is that when neither the mouse
>>>> nor the keyboard is pointing to a link that someone with color
>>>> blindness must be able to tell that it is a link. Also, the
>>>> recommended way to solve this most of the time is to recommend that
>>>> the developer allow the browser to underline the link.
>>>>
>>>> In the page I'm looking at, some links go to other pages. Some drop
>>>> menus down. Does this make any difference?
>>>>
>>>> I have not inspected the code yet, so I do not know if they are anchors.
>>>>
>>>> Thanks.
>>>>
>>>> Jim
>>>>
>>>>
>>>> =========>>>> Jim Homme
>>>> Digital Accessibility
>>>> Bender Consulting Services
>>>> 412-787-8567
>>>>
>>>> https://www.benderconsult.com/our%20services/hightest-accessible-tech
>>>> nology-solutions
>>>>
>>>>
>>>> >>>> >>>> archives at http://webaim.org/discussion/archives
>>>> >>>>
>>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> http://webaim.org/discussion/archives
>> >> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >