WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Hyperlinks Not Underlined Question

for

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

From: Jim Homme
Date: Tue, Mar 31 2020 1:29PM
Subject: Hyperlinks Not Underlined Question
No previous message | Next message →

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

From: glen walker
Date: Tue, Mar 31 2020 2:02PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

--00000000000076488805a22c0bad
Content-Type: text/plain; charset="UTF-8"

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

--00000000000076488805a22c0bad
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k8gbr7hc0>
X-Attachment-Id: ii_k8gbr7hc0

iVBORw0KGgoAAAANSUhEUgAAAm4AAABCCAYAAADuWVp3AAASHUlEQVR4nO3dW2wUV5oH8FYbX7DB
2GYcr2MwNtj40uehVXKsjnAyFkFGFrIYECEEhcWzCYLJAoFZGDEe2DFBkYesMLIVRjEM2Tg7EBnD
yILxOIkFagkspUGoE6HZ0SQSQx6QePDLjl/67b8Pp6q7qrpubbuNS/k//KTEdenu79R36qtTp4oA
4gEQERER0eIXeN5fgIiIiIi8YeFGRERE5BMs3IiIiIh8goUbERERkU+wcCMiIiLyCRZuRERERD7B
wo2IiIjIJ1i4EREREfkECzciIiIin2DhRkREROQTLNyIiIiIfIKFGxEREZFPsHAjIiIi8gkWbkRE
REQ+wcKNiIiIyCdYuBERERH5BAs3IiIiIp9g4UZERETkEyzciIiIiHyChRsRERGRT7BwIyIiIvIJ
Fm5EREREPsHCjYiIiMgnWLgRERER+QQLNyIiIiKfYOFGRERE5BOzK9ymcvF4PN/WD9EgEFuCH8bz
8WzKvH0OnmnrxAPJ9dL288USJOIBIFqIuyNL7L9LrAB3Pi3wtq94AIgHMX1zGW71l+LWcD5mFkEj
eJODZ58XY7S/FJOj+t8TQCKah8fjuem/ZSoXj8fzMB2z2NcNGYPRj5bh71pb6MzcdoqhdZum1td/
prosbfsgpr/It/7ei4g5tt9/uhz/mxZP43ppsbOIjVzfJnfiVsvT42T3OfqcS0QLcPcj2c7fJ/9u
bi/7trbe3h8S0Tw8uFQqc+Zzq+PMLg7O7fhsKuDe11gsT+8L5Xp/Hy7BaH8J7v45x/13xZbgm0sZ
tsdUrhqHYnxjketSLu5fLsS0xbKZ2/b573YcZycfnc85j2/nWG5jjH8Q018UYbJfxuWBaRv7vjPD
/tY29mr/dzsn9d+WMdb3n1qfad2nOOd89szcVuN4qTDtt1vG0FwbpNUTpm285pKXnHfZl5e+O9vx
9GJ2hdtgNYQQtrb2FAKjFdgqBI4MmrcvxRFtnXgguV7afjZX4FtteaQaY5NW3yWIhyfqIbpLve0r
nouxdxqh6JYpG6vwpeW+F5FYIS50NRt+U9uOcjxUD6Jve+ohRDXGLNupHgOjugN7bCXe+2mzKUbN
6Dq0Ak90B+VYd3ocWzrsYiXb1LC+Uo/eoVzd9zN+D9wsx1thga0nCh0KwufPHNuxboG27lI8dVjP
KnYpMg5yfZvciVsvVzbU4vJIqvO3+xwt554OrkZ7WLcsvB4nh3Kt28siX+y3f/7t4iwX0WNrEQmn
x2/oqv4EbRcH53Y8Mhjw1m+Zl4Ub8fYZ3fE+WYrjG0K6dULofHdF2rGl/10ju5shRDNaFAERWY3x
qHMsEiMvYKei/x5N2HvGIueuVKJDrMPQzfR9jHXr+1Cr497+OM5OPtp9Xi6u72mCaF2D61o/FStE
/2YBpbMi2V9icjnO/qzZcB4QIoT2neW4r53ELfpOuz4hybSNc+wLMbBZJM9dXx9rgLCK/5VKdAiB
N3oLUtvY9CnOOZ+NPAvi4al1aNF/l4iuj7KLobk2sKondOcPT7nkNedd9uWl737+/dt83Cq1K9Ay
LNzS1zPuR+l8Ia3jeDpYjTYh0go32319VomNIoR9fXlIxANITBTjg656nLiQ5/o7O9rXY2ywxHW9
//ndSrzc2oR/Tnm4evZo+sMaCNGA9z+R+5y5sRIHOmoxdEX+v+fCbfQFbA8LKBtX49poamTgm741
aA8bCxJjZ52DZ59WYHtYILJ/hUWhZWzTRLQQH28LQbxSiXvxABArxsmIgLJrpbr/JRjrboKIVGHS
wxXM84y9VeEmRAjbe4wnP7s2yPTv1suDmL5ZhiMRAdFVju8s28hsGT54Rcb8SSwAxPJw5+g6dO0v
wRPDesYTSObbL7Y2W4Lxd5rkSbKnODniMPPnYpztaoYI12EgWfya+iITx/h67Le05YloAa51NxlO
zveONkKEazA8EQTiQTy5XImdHaswPmGzz1gpDgqBg+eDwMRP8JYI4fgF51hc3SUg2l9EdCoAxHPw
qK8GXTvK8fU9/XpBfLm/CUIIdBwryigObsfxfHP9vMlSHGwVaHunBNPxAL49VQdF1KNfa/NoCY5H
ZIExcFG745KD7y9WYqcioOz4Cf4RD8xD4eYWe1Pe3SzHG2nxV9slXIORqFOuauaWsxmLrsQ+IdBx
eLmM49RSDO+ux97eIvyfUwwtC7fUejO3l6O/MwTRugpfxrzkUgY57yEv53JsL1S/55vCLe1kObkS
+7Tq2mvhdqkKEdGEg+czvwL521gBhBC4fzW9Y9Ov09G+Hrf/UDyvCfKPM2sh9J2PideOZGR3yHg1
qvP0wxooogm9l+X/p3fWQVzfY9eBp58AH56ohwivxrj6/9OD1YiIJpy8FETiUhXaMmiH5xl7y8It
HIIimnBkMNd2vdn+3Wn5wxMW38W2cCvGyVaByJ700UEju5OB1+0XWZupIxSWI7mxZfigXXdyXsDC
DfEAMFKBLbq/Tb7bZJuP1mSbdBxdjken10JJntDt5OPyNvkbHjpdIEXLcCAssHVzfepk6TEOi65w
i6f6spNn5ah+x9FlyWNBjmxZ96WJkWLcmXAZLXL6DoZt3GJvzjutf9bFX22X1MWyW+E2t5zN2F/K
8ZZdrjnF0KVwQzyAxPk1qb+55VImOe8hL+dybC9Uv5f1wq1j+2r8ap/eWhlkU+FmWO9XJWrHmlq+
tbMOimjC8QtLgFghBjpDEJvX4OCm9MLNdl/adqIZXd3l+MrLnBKd+1eL8HJrE/42VmDZGC+3Nnmq
tjM2WSpHW8KNePNQWdo8FXmANeBf95livb1BlxAlOB4W2Hh0mfVnxEpxRLc8rbNWr2SV3WUW82Dk
CXDj3nKM9pfis55qdCmpq165TgEubwtBbK7Gkc0CyrbUyNFijr1l4ba5Atd76gzF2+wKN2Ob/ddH
+fbbqbd8RHslvtZ/l9Y6/EK3j//+o/YZQTzsqYMiBFo6qjF00W4+p93JwOv2i6vN/nqqDkLU4KpN
QSPjqi2Xx+2WXy63nMcy1i0gNlXijtXcLY/9VqpfVKd1iAacvSL/lhiRo9hCqcd7vcWe5iN917su
eXvn+KD7hY92V0LZsA695wot5+h817tOjurcKsOBcAgHzhnnFLsXbvbHcXby0e3zcnF1l3oL2jCq
vxQXOgXErpWWc/kM5uFWqXPsLfLuSiU6RCr+0+dqoOiOl+Q27Wt1/fy/4NZf5i9nM5Mr75yIENq3
VqXu4rjF0LVwU295axcmLrmUUc57yEvXdnaxEP1e1gu3lkgDXntVrwktFoWbYb2d5fhr2v7VgyRS
jbMHGtThT9PB77aveEAOH/fUYJMiZAG3v9RysrkdbYjz6WSq0/znVA462tfjd/9Rmb0kmVqKa/vr
5D38cCPe7lmevKqSB1gz2l41xTrSrEsI59EFxAvRryuC5chSM9pfbcBrG9T5IBHjHKsUuW/lpcbk
Z7e/FIJQ1uGCbv3EiDZ6aj96uNhib1e4fat1Wuow/OwKN2Ob/dv7S22Wy5wxz1cxtJHqtx/rPyeI
J5crsF+d09jSsQrXx8xxd7qK97L94mozt87WcCVvOcctdQKxmu+Sab+lLW9TrOewJSaKMfBmg2xf
pR4nzhfYz/lU58Qp4ZDu9k8Q0WO1jtvN3CjDiU6Zw8qGWgx8oi/4inC2XRvVCWKsO2S4ODAe83bx
tj+Os9O+7p/39NwatAqBjYeX6+LiNmKlMw+Fm3Psrb5LAYa6tOkQ8r+NF8rqNkqTrp+vxR/+NL85
m5kcPDq3CtteCskCbmcFotoIckaFWwiRDQ147dVGdZ6abj6gSy5llPMe89JLX+Ik2/2eb26VHhkM
JOdKieRIh3XhZrsvvVge7vTUos1mXoeT3/yiCju21CUb4/De6uwWbXpTS3HtnfVQdFdm3joSdRjd
co5aIDlfYfsp2QmOdQuIV6rxcb98Qsf5CSWLojCWh+FdIevbrXtKZ/1AwkLH3r5wC6QeGolUY+Bw
Nm6VrsOZ/lKM/qYGbUJgywlj0e18q1RPduZ7IyLtpOztZOa0/eJqMzmtwHqSPeLavDLtFv7cR9zc
+q033ivFaH8FDkQExKYKPLT53omJYgzsaLK88tfa6UJnCEpnBe5H1TsHkWpcP1+FNhHC9lPuDwPM
3CjD8Y0h3Zyp9FGdxNAqREQTfj1kegjGR7dKk/PcNjRCEQ344DPtt6i3L7s8jPY7FG5yhGcNrpsv
+B22SY+9dd4l26OvEh2mdsio8JxjzmYuB4/OrUZnWFdsXlitzi+0zg1j4daIQ73qucb8hLUhl0rT
3qyQUc5nkJdzPbaz2e/5q3CLB5AYWYnfnixWr0IyK9wSEytwzfCETSaJYPTz12vx89drcXhvNXZs
qZvXCfFmM1fLcN0wQmWMobfCLSjn1BgmZ2uCuHfU+FST96LAok1VxpOkbr+ziPfzir1j4RYP6G6/
iyzOcVNvgZjazrGNYnkYP2e8irT+TJsc8Lz9Imsz9Wllqyd/tXmxqYuXBXw4YaQC28P6ebpBPPl9
mfEpbad9qssOnlfbX5s+IZymHeTg/rlS4xwrQ5+gjvAYRrDk6K5+pMdfhZt6my2yGuNRWezq55l9
d2Zt2vxUaO3xYSXOaiNiDkWYnCvdiPc/Mb7e497RBohwNcZiXmJvl3cr8OtWdYQ304usec5ZV1NF
uHbeOK/McKyoc+C6+4yxlnMQdbF1irWXXMsk513zcn5jl61+b9EUbvpqWlqO710bzbpws96XVrg0
4uDpZXg0no8HH1VhezjzETfEZQW9Y0td1guH5NwwZR1Of1SEx+NLcfd0DdoyHnELpIoMpR4nThfj
wXg+Hn9egoE966GIZuw8lTp4Z1O4pUYuijDZJ2NrnhM3H4XbwsXeQ+EWD+hOopkWbuqImp76TkKr
OW4DnfI21j39iJB+VFQ1MbJEfQAkhPY95bh7Q7bzf3am3wazOxl4337xtZmcWxRC+85KjA4vlTnT
V4XXIwLKhtW6VwvNvXDz3m9p84/UESDtSesNa3BxeCkejxfh5r/XmeY06agT1ZXOSnx1Ix+Phstx
UH2ViOUJKx5IntBaul7Ezc/z8fjGMlzcrZs7pM6peuuXxt/w2YH69Iu4tONM/k634zg7+Wj/eU/P
r0FEmwsdT80jTE1cL8TwDnkeePtYmTy2byzD8P56tIgQOo+qT0imjQJJd2/JfVzoDEFEanFW7ZO/
6qmVT+a/Wyw/xy32DkWYfIBCewWIRa52vWg65uT3mu+cdSOL4GbsPFyCB+PymDwQ0ff56tOe4fU4
3qeec8+tQpdiutiYa+GWSc675WXasTa3wi1b/d6iKdzs3qU0m8LNdl+xPIwfqtO966UZm94sd37i
yqVR9Pews2aqCEPaPBgh5zVtO7TCNMfN25wLw1w5dX8tP12LXtMcmdkUbsZ34zRj85u69yLp9zvH
wm0hY++pcItrJ4hMCzeLY1WNjeV26tWjdqK2e+eQzK0gnvy+Sp17orVzjcUcRfuHE7xtv/jazDzP
J5kz3eWp+Te643YuhVtm/ZY6aV59L2ViYgV6O3XvE1MasN/qHWuqp0NV6Eq+F0zOJ7rZJ09YViMG
iAcwc7XcEAflpTr1/VjqqyYsniLVikTtaUzr40z+TrfjODv5aPN52i1SQyGrnZh182oN85xTcXmv
ryg1md/mXaXJ9jS/C07tk/XvwrSPvVPeqfFXrJ4YtnuPm/a95j9nneXgfq8+jiFEOk3v+owV4Gq3
7tylnnMN54V5KNw857yHvDQea3MfrcxGv/cj/Sev5Nuo7d6+vGjFluCHeXt7s+lfsKA5m7m9OP8V
iJnb6W+TX8jtnyfbt9wvJlO5GXzH2eVtIprn8q+f/Bjp//WCubSdc5+ceeyDmI7OLd8WNmdlHB2P
Sdt/SWn++SLn5+hHWrgRERER+Q8LNyIiIiKfYOFGRERE5BMs3IiIiIh8goUbERERkU+wcCMiIiLy
CRZuRERERD7Bwo2IiIjIJ1i4EREREfkECzciIiIin2DhRkREROQTLNyIiIiIfIKFGxEREZFPsHAj
IiIi8gkWbkREREQ+wcKNiIiIyCdYuBERERH5BAs3IiIiIp9g4UZERETkEyzciIiIiHyChRsRERGR
T7BwIyIiIvIJFm5EREREPsHCjYiIiMgnWLgRERER+QQLNyIiIiKfYOFGRERE5BMs3IiIiIh84v8B
c/6JGqAqOn8AAAAASUVORK5CYII=
--00000000000076488805a22c0bad--

From: Birkir R. Gunnarsson
Date: Tue, Mar 31 2020 6:37PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

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

From: Jim Homme
Date: Wed, Apr 01 2020 8:10AM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, March 31, 2020 8:38 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Birkir R. Gunnarsson
Date: Wed, Apr 01 2020 8:12AM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

Fail.

On 4/1/20, Jim Homme < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Tuesday, March 31, 2020 8:38 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Jim Homme
Date: Wed, Apr 01 2020 8:13AM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

Hi Glen,
Is there a technique that talks about items that opening menus are cool because of positioning? I saw something about this on Webaim when looking at documentation that says that header links are OK in banners.

 
=========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 ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Tuesday, March 31, 2020 4:02 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Hyperlinks Not Underlined Question

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 ADDRESS 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-techn
> ology-solutions
>
>
> > > archives at http://webaim.org/discussion/archives
> >

From: Marjorie Meyer
Date: Wed, Apr 01 2020 11:11AM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
>
> Fail.
>
>> On 4/1/20, Jim Homme < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Tuesday, March 31, 2020 8:38 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > >

From: glen walker
Date: Wed, Apr 01 2020 11:16AM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

I think we might be talking about too many scenarios and there isn't a
single answer that covers them all. I had talked about link text embedded
in a paragraph and the requirements for that and then talked about links in
a menu where you might have two types of links (submenus and direct links).

Birkir also talked about links embedded in paragraphs.

But your latest question seems to be about links by themselves used as a
menu (but not about submenus and direct links) but I'm not following what
you're asking for.

Are you asking if menu links need sufficient contrast, and if so, contrast
with what? Link text is no different than other text when it comes to
contrast. The link text must be 4.5:1 compared to the background (ignoring
"large" text for the moment and ignoring if the link text is next to
paragraph text).

Are you asking if menu links need underlines? No, they don't. They should
be contained in a <nav> element and there should be some visual clue that
they're a menu. It might be a subtle visual clue such as the position of
the menu relative to the rest of the page. The reference to WebAIM might
have been an article or blog that talked about WebAIM's main menu
(Services, Articles, Resources, Community) and the fact that it doesn't
have underlines. I can't remember where I saw that.

On Wed, Apr 1, 2020 at 8:13 AM Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Glen,
> Is there a technique that talks about items that opening menus are cool
> because of positioning? I saw something about this on Webaim when looking
> at documentation that says that header links are OK in banners.
>
>
> ==========
> Jim Homme
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
>
> https://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
>
>
>

From: Jim Homme
Date: Fri, Apr 03 2020 2:31PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

Hi,
I'm talking about links in paragraphs. The links are not underlined and the text and background of the links is the same as the text and background of the paragraphs unless you tab to or hover on 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 ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Wednesday, April 1, 2020 1:16 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Hyperlinks Not Underlined Question

I think we might be talking about too many scenarios and there isn't a single answer that covers them all. I had talked about link text embedded in a paragraph and the requirements for that and then talked about links in a menu where you might have two types of links (submenus and direct links).

Birkir also talked about links embedded in paragraphs.

But your latest question seems to be about links by themselves used as a menu (but not about submenus and direct links) but I'm not following what you're asking for.

Are you asking if menu links need sufficient contrast, and if so, contrast with what? Link text is no different than other text when it comes to contrast. The link text must be 4.5:1 compared to the background (ignoring "large" text for the moment and ignoring if the link text is next to paragraph text).

Are you asking if menu links need underlines? No, they don't. They should be contained in a <nav> element and there should be some visual clue that they're a menu. It might be a subtle visual clue such as the position of the menu relative to the rest of the page. The reference to WebAIM might have been an article or blog that talked about WebAIM's main menu (Services, Articles, Resources, Community) and the fact that it doesn't have underlines. I can't remember where I saw that.

On Wed, Apr 1, 2020 at 8:13 AM Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Glen,
> Is there a technique that talks about items that opening menus are
> cool because of positioning? I saw something about this on Webaim when
> looking at documentation that says that header links are OK in banners.
>
>
> ==========
> Jim Homme
> Digital Accessibility
> Bender Consulting Services
> 412-787-8567
>
> https://www.benderconsult.com/our%20services/hightest-accessible-techn
> ology-solutions
>
>
>

From: Jim Homme
Date: Fri, Apr 03 2020 2:33PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

Hi,
What SC?

 
==========
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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, April 1, 2020 10:12 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Hyperlinks Not Underlined Question

Fail.

On 4/1/20, Jim Homme < = EMAIL ADDRESS 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-techn
> ology-solutions
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Tuesday, March 31, 2020 8:38 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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-tec
>>> h
>>> nology-solutions
>>>
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Patrick H. Lauke
Date: Fri, Apr 03 2020 4:07PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

On 03/04/2020 21:31, Jim Homme wrote:
> Hi,
> I'm talking about links in paragraphs. The links are not underlined and the text and background of the links is the same as the text and background of the paragraphs unless you tab to or hover on them.


Paradoxically, if you have links that are visually completely
indistinguishable from static text inside a passage of text (i.e. use
the same foreground color and no other distinguishing visual
characteristics), this doesn't currently fail any WCAG SC (e.g. doesn't
fail 1.4.1 use of color, as color is not used to distinguish the link).

This sort of gap is something that 2.2 may attempt to fix (partially at
least), requiring some form of visual identification for actionable
controls/links.

P
--
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: Jeremy Echols
Date: Fri, Apr 03 2020 4:24PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | Next message →

It seems like this creates a usability issue for everybody equally. Will 2.2 address problems that make a page tougher to use even if it's tougher for all people?

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Patrick H. Lauke
Sent: Friday, April 3, 2020 15:07
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Hyperlinks Not Underlined Question

On 03/04/2020 21:31, Jim Homme wrote:
> Hi,
> I'm talking about links in paragraphs. The links are not underlined and the text and background of the links is the same as the text and background of the paragraphs unless you tab to or hover on them.


Paradoxically, if you have links that are visually completely indistinguishable from static text inside a passage of text (i.e. use the same foreground color and no other distinguishing visual characteristics), this doesn't currently fail any WCAG SC (e.g. doesn't fail 1.4.1 use of color, as color is not used to distinguish the link).

This sort of gap is something that 2.2 may attempt to fix (partially at least), requiring some form of visual identification for actionable controls/links.

P
--
Patrick H. Lauke

https://urldefense.com/v3/__https://www.splintered.co.uk/__;!!C5qS4YX3!VhD_cD3AZ6Jd3EXevaTyoIKUhCKFfzKOqrhe0um6mopeKl7UDtwr2QGMcOK3xAyszQ$ | https://urldefense.com/v3/__https://github.com/patrickhlauke__;!!C5qS4YX3!VhD_cD3AZ6Jd3EXevaTyoIKUhCKFfzKOqrhe0um6mopeKl7UDtwr2QGMcOKHtbu91g$
https://urldefense.com/v3/__https://flickr.com/photos/redux/__;!!C5qS4YX3!VhD_cD3AZ6Jd3EXevaTyoIKUhCKFfzKOqrhe0um6mopeKl7UDtwr2QGMcOLgZ3RQUw$ | https://urldefense.com/v3/__https://www.deviantart.com/redux__;!!C5qS4YX3!VhD_cD3AZ6Jd3EXevaTyoIKUhCKFfzKOqrhe0um6mopeKl7UDtwr2QGMcOLfU89VKw$
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick H. Lauke
Date: Fri, Apr 03 2020 5:00PM
Subject: Re: Hyperlinks Not Underlined Question
← Previous message | No next message

On 03/04/2020 23:24, Jeremy Echols wrote:
> It seems like this creates a usability issue for everybody equally. Will 2.2 address problems that make a page tougher to use even if it's tougher for all people?

There's a lot being pushed/discussed for the cognitive accessibility
side, which will overlap with general usability (but admittedly, it's a
fine line to walk).

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