WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hyperlinks Not Underlined Question

for

From: Birkir R. Gunnarsson
Date: Mar 31, 2020 6:37PM

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-technology-solutions
>>
>>
>> >> >> >> >>
>


--
Work hard. Have fun. Make history.