WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hyperlinks Not Underlined Question

for

From: Birkir R. Gunnarsson
Date: Apr 1, 2020 8:12AM

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.