E-mail List Archives
Thread: Color of link text
Number of posts in this thread: 14 (In chronological order)
From: Joseph Sherman
Date: Mon, Jun 27 2016 1:15PM
Subject: Color of link text
No previous message | Next message →
In 1.4.1, assuming you cannot get folks to underline their links- if you have a 3:1 link and text contrast, does the default focus outline count as "additional differentiation" on focus?
"Color alone is not used to distinguish links<http://webaim.org/techniques/hypertext/>; from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus."
Joseph
From: Snahendu Bhattacharya
Date: Mon, Jun 27 2016 1:47PM
Subject: Re: Color of link text
← Previous message | Next message →
Hi Joseph!
I think there is a gap between these two guideline.
By providing additional non color visual clue (1.4.1), you are ensuring
your links are clearly and readily identifiable, for the people with or
without color vision, immaterial to the fact whether user has focused on
the link or not.
Second part is about visible focus (outline/caret line) for the keyboard
user (2.4.7), when user uses screen focus to understand their current
focused location in the screen, they should be able to do it.
Now if you make the 'caret line/outline' as default
identifier/differentiator for your link, that would create confusion for
the user who is trying to tab through the page and can't identify any
considerable amount of visual change for the links when the links receives
focus, as because the caret line/outline is already present.
Preferably the underline (or any other non color differentiator) should be
present by default and then on focus to the link, should make a significant
change to the focusable element to make the user understand about their
current keyboard focus position. Either by removing the underline or adding
a outline/caret line (to be consistent).
On Jun 27, 2016 3:15 PM, "Joseph Sherman" < = EMAIL ADDRESS REMOVED = > wrote:
> In 1.4.1, assuming you cannot get folks to underline their links- if you
> have a 3:1 link and text contrast, does the default focus outline count as
> "additional differentiation" on focus?
>
> "Color alone is not used to distinguish links<
> http://webaim.org/techniques/hypertext/>; from surrounding text unless the
> luminance contrast between the link and the surrounding text is at least
> 3:1 and an additional differentiation (e.g., it becomes underlined) is
> provided when the link is hovered over or receives focus."
>
>
>
> Joseph
>
> > > > >
From: Joseph Sherman
Date: Mon, Jun 27 2016 2:31PM
Subject: Re: Color of link text
← Previous message | Next message →
I think there is a confusion. No one is proposing to use the focus outline on non-focused links.
In the WCAG specs for 1.4.1, it says you should have a non-color visual clue like underline. However, you do not NEED a non-color clue for your links if: you have a least 3:1 contrast between the link text and surrounding text, AND an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.
My question is whether the focus outline itself counts as an additional differentiation, when the link receives focus, if it has the 3:1 contrast between the link and surrounding text. It seems to technically satisfy 1.4.1, but I don't think it should.
Joseph
From: Jonathan Avila
Date: Mon, Jun 27 2016 7:17PM
Subject: Re: Color of link text
← Previous message | Next message →
> My question is whether the focus outline itself counts as an additional differentiation, when the link receives focus, if it has the 3:1 contrast between the link and surrounding text. It seems to technically satisfy 1.4.1, but I don't think it should.
Joseph, I often wondered the same thing. F73 does not include test steps saying to focus the links which G183 does and thus currently with F73 a link that just uses color (hue) would fail F73. F73 also does not relate to contrast -- but only focuses on Hue -- so links and text that are differentiated with contrast/lightness could pass F73. This is definitely an area that could use some clarification.
F73: https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F73
In the check for G183 it doesn't seem to say that an outline is not sufficient -- it just says some other visual enhancement but doesn't specify if that enhancement must be on the link text itself or can surround the link text. If you consider image links -- they have similar challenges with the user not knowing they are clickable.
G183 https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G183.html
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART GroupÂ
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!
From: Joseph Sherman
Date: Thu, Jul 07 2016 1:06AM
Subject: Re: Color of link text
← Previous message | Next message →
Given that focus and hover do not really exist on mobile, and mobile devices are ubiquitous, should the 3:1 contrast plus focus/hover indication remain a conforming technique?
If not, then to use links without underline wouldn't you need to find three colors (background, text, links) with 4.5:1 contrast from the other two? Do such colors exist?
Joseph
On Jun 27, 2016 9:17 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> My question is whether the focus outline itself counts as an additional differentiation, when the link receives focus, if it has the 3:1 contrast between the link and surrounding text. It seems to technically satisfy 1.4.1, but I don't think it should.
Joseph, I often wondered the same thing. F73 does not include test steps saying to focus the links which G183 does and thus currently with F73 a link that just uses color (hue) would fail F73. F73 also does not relate to contrast -- but only focuses on Hue -- so links and text that are differentiated with contrast/lightness could pass F73. This is definitely an area that could use some clarification.
F73: https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F73
In the check for G183 it doesn't seem to say that an outline is not sufficient -- it just says some other visual enhancement but doesn't specify if that enhancement must be on the link text itself or can surround the link text. If you consider image links -- they have similar challenges with the user not knowing they are clickable.
G183 https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G183.html
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | Linkedin | Blog
Check out our Digital Accessibility Webinars!
From: Srinivasu Chakravarthula
Date: Thu, Jul 07 2016 1:55AM
Subject: Re: Color of link text
← Previous message | Next message →
I think it's still relevant on touch devices too. Imagine user with low
vision / cognitive who may use screen reader for reading purpose but have
habit of looking at screen.
Thanks,
Srinivasu
Regards,
Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com
Let's create an inclusive web!
Lead Accessibility Consultant, Informatica
Hon. Joint Secretary, The National Association for the Blind, Karnataka
Branch
On Thu, Jul 7, 2016 at 12:36 PM, Joseph Sherman < = EMAIL ADDRESS REMOVED = >
wrote:
> Given that focus and hover do not really exist on mobile, and mobile
> devices are ubiquitous, should the 3:1 contrast plus focus/hover indication
> remain a conforming technique?
>
> If not, then to use links without underline wouldn't you need to find
> three colors (background, text, links) with 4.5:1 contrast from the other
> two? Do such colors exist?
>
> Joseph
>
> On Jun 27, 2016 9:17 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
> wrote:
> > My question is whether the focus outline itself counts as an additional
> differentiation, when the link receives focus, if it has the 3:1 contrast
> between the link and surrounding text. It seems to technically satisfy
> 1.4.1, but I don't think it should.
>
> Joseph, I often wondered the same thing. F73 does not include test steps
> saying to focus the links which G183 does and thus currently with F73 a
> link that just uses color (hue) would fail F73. F73 also does not relate
> to contrast -- but only focuses on Hue -- so links and text that are
> differentiated with contrast/lightness could pass F73. This is definitely
> an area that could use some clarification.
>
> F73: https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F73
>
> In the check for G183 it doesn't seem to say that an outline is not
> sufficient -- it just says some other visual enhancement but doesn't
> specify if that enhancement must be on the link text itself or can surround
> the link text. If you consider image links -- they have similar challenges
> with the user not knowing they are clickable.
>
> G183 https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G183.html
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | Linkedin | Blog
> Check out our Digital Accessibility Webinars!
>
>
>
From: Patrick H. Lauke
Date: Thu, Jul 07 2016 2:14AM
Subject: Re: Color of link text
← Previous message | Next message →
On 07/07/2016 08:55, Srinivasu Chakravarthula wrote:
> I think it's still relevant on touch devices too. Imagine user with low
> vision / cognitive who may use screen reader for reading purpose but have
> habit of looking at screen.
When using touch+AT, note that focus/hover is not always triggered (e.g.
no "focus" event is fired when the AT's focus moves to an item, no
:focus CSS pseudo-classes are applied). Currently, it seems that only
VoiceOver/iOS fires focus/applies :focus, while other combinations
(TalkBack/Android, Narrator/Windows 10 Mobile) don't. See
https://patrickhlauke.github.io/touch/tests/results/#mobile-tablet-touchscreen-assistive-technology-events
However, the AT will generate and display its own fairly heavy-weight
focus indication/outline, so this is less of a problem in practice.
Also, don't forget scenarios where an actual keyboard (e.g. external
bluetooth keyboard paired with the phone) is used - see
https://patrickhlauke.github.io/touch/tests/results/#mobile-tablet-keyboard-mouse-events
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Srinivasu Chakravarthula
Date: Thu, Jul 07 2016 2:38AM
Subject: Re: Color of link text
← Previous message | Next message →
Thanks Patrick. You have made a great point about users using external
keyboards.
Thanks,
Srini
Regards,
Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com
Let's create an inclusive web!
Lead Accessibility Consultant, Informatica
Hon. Joint Secretary, The National Association for the Blind, Karnataka
Branch
On Thu, Jul 7, 2016 at 1:44 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:
> On 07/07/2016 08:55, Srinivasu Chakravarthula wrote:
>
>> I think it's still relevant on touch devices too. Imagine user with low
>> vision / cognitive who may use screen reader for reading purpose but have
>> habit of looking at screen.
>>
>
> When using touch+AT, note that focus/hover is not always triggered (e.g.
> no "focus" event is fired when the AT's focus moves to an item, no :focus
> CSS pseudo-classes are applied). Currently, it seems that only
> VoiceOver/iOS fires focus/applies :focus, while other combinations
> (TalkBack/Android, Narrator/Windows 10 Mobile) don't. See
> https://patrickhlauke.github.io/touch/tests/results/#mobile-tablet-touchscreen-assistive-technology-events
>
> However, the AT will generate and display its own fairly heavy-weight
> focus indication/outline, so this is less of a problem in practice.
>
> Also, don't forget scenarios where an actual keyboard (e.g. external
> bluetooth keyboard paired with the phone) is used - see
> https://patrickhlauke.github.io/touch/tests/results/#mobile-tablet-keyboard-mouse-events
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
> > > > >
From: Joseph Sherman
Date: Thu, Jul 07 2016 10:11AM
Subject: Re: Color of link text
← Previous message | Next message →
On a mobile device a color blind user may not be using AT. Therefore it seems impossible to satisfy the 3:1 plus the allowance for underlining only on hover or focus.
Joseph
From: Guy Hickling
Date: Fri, Jul 08 2016 6:09PM
Subject: Re: Color of link text
← Previous message | Next message →
I think the solution for mobiles is easy enough. It just needs a media
query, as used in responsive development, to detect small screens
(everything from tablet size or less) and have it underline all links
on them. (As usual we can except those links, such as menu options,
that have other clear indication of them being links.) The query would
be:
@media all and (max-width: 1000px) {
a:link, a:visited { text-decoration : underline }
}
The difficulty might be getting everyone to accept and apply this as a
necessary part of accessibility even though not specified in the WCAG.
Really, G183 ought to be rewritten to include a requirement for links
to be underlined, in their unvisited and visited states, on anything
with a screen small enough that it is likely to be a tablet or mobile.
And it could include an example with a media query like the above.
That way underline-hating designers can have their wicked way on
desktops but, being allowed that, maybe they wouldn't mind quite so
much if underlines appear on their mobile designs!
I realise of course that there is a somewhat blurred boundary in
screen sizes between tablets and desktops, so the above 1000px is
necessarily very arbitrary. But this approach would cater for the vast
majority of touch screen devices. I've pitched the figure quite high
as it would be better to have underlines appear on a few small
desktops rather than no underlining on many larger touch screens.
Regards,
Guy Hickling
http://www.enigmaticweb.com
From: Patrick H. Lauke
Date: Sun, Jul 10 2016 10:11AM
Subject: Re: Color of link text
← Previous message | Next message →
On 09/07/2016 01:09, Guy Hickling wrote:
> I think the solution for mobiles is easy enough. It just needs a media
> query, as used in responsive development, to detect small screens
> (everything from tablet size or less) and have it underline all links
> on them. (As usual we can except those links, such as menu options,
> that have other clear indication of them being links.) The query would
> be:
>
> @media all and (max-width: 1000px) {
> a:link, a:visited { text-decoration : underline }
> }
>
> The difficulty might be getting everyone to accept and apply this as a
> necessary part of accessibility even though not specified in the WCAG.
> Really, G183 ought to be rewritten to include a requirement for links
> to be underlined, in their unvisited and visited states, on anything
> with a screen small enough that it is likely to be a tablet or mobile.
I think this proposed solution is a bit facile/simplistic. The main
points for me are:
- G183 gives a loophole to keep a relatively low color contrast, under
the assumption that focus/hover can be used to further
complement/strengthen the visual indication of actionable items like links.
- mobile does not (with some caveats/exceptions that are very specific)
have a concept of hover, and focus is only applied as part of an
activation (so it's already too late at that point).
But going from that to "we just need to force/mandate underlines" is a
bit reductive. WCAG can't mandate specific solutions. The point is that
clear differentiation between, say, static text and links need to be
provided. This can take many forms (use of bold text, or an icon, or
similar).
I think part of the solution (which I'd suggest taking to WCAG WG) is
that G183 should include a note/clarification that it can't be used for
touchscreen interfaces (for lack of hover and only partial support for
focus).
> And it could include an example with a media query like the above.
> That way underline-hating designers can have their wicked way on
> desktops but, being allowed that, maybe they wouldn't mind quite so
> much if underlines appear on their mobile designs!
Can we drop the usual "designers hate accessibility" bashing?
> I realise of course that there is a somewhat blurred boundary in
> screen sizes between tablets and desktops, so the above 1000px is
> necessarily very arbitrary. But this approach would cater for the vast
> majority of touch screen devices.
Screen/viewport size is not a reliable indicator of "this is a
touchscreen" or, more generally "the user is using an input that is not
hover capable". At a stretch, you should start looking at Media Queries
Level 4 Interaction Media Queries for the "hover" feature - but note
that this will also give you potential false positives/negatives, see
https://dev.opera.com/articles/media-features/
> I've pitched the figure quite high
> as it would be better to have underlines appear on a few small
> desktops rather than no underlining on many larger touch screens.
P--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Patrick H. Lauke
Date: Mon, Jul 11 2016 5:02AM
Subject: Re: Color of link text
← Previous message | Next message →
On 10/07/2016 17:11, Patrick H. Lauke wrote:
...
> I think part of the solution (which I'd suggest taking to WCAG WG) is
> that G183 should include a note/clarification that it can't be used for
> touchscreen interfaces (for lack of hover and only partial support for
> focus).
For what it's worth, I filed this https://github.com/w3c/wcag/issues/201
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Guy Hickling
Date: Mon, Jul 11 2016 4:11PM
Subject: Re: Color of link text
← Previous message | Next message →
Patrick,
You're right, I should have said, underlines or other style such as
bold, italic etc (same alternatives as in G182 and G183). But I didn't
say "force or mandate". I was merely suggesting that G183, since it
relies on hover and focus (and since it is accepted as a WCAG
technique), must also provide an alternative solution for
touchscreens. And using media queries to do so would allow the
developer to do something acceptable (i.e. underline the link or, yes,
use bold or italics etc) when the query detects a small screen. G183
would work "as is" on desktops, but links on the same website would
be underlined when shown on mobiles.
G183 can't say "G183 should include a note/clarification that it can't
be used for touchscreen interfaces" because the web developer knows
his site (if it is a public one) will be viewed by users on all kinds
of device. He must cater for desktops, tablets and mobiles.
Regards,
Guy
From: Patrick H. Lauke
Date: Mon, Jul 11 2016 4:15PM
Subject: Re: Color of link text
← Previous message | No next message
On 11/07/2016 23:11, Guy Hickling wrote:
> G183 can't say "G183 should include a note/clarification that it can't
> be used for touchscreen interfaces" because the web developer knows
> his site (if it is a public one) will be viewed by users on all kinds
> of device. He must cater for desktops, tablets and mobiles.
I'm now actually leaning more heavily towards scrapping the technique
altogether, as it's dubious even for mouse/keyboard users in its current
state. See https://github.com/w3c/wcag/issues/201
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke