WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Minimal style needed to make links accessible?

for

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

From: E.J. Zufelt
Date: Mon, Aug 23 2010 12:06PM
Subject: Minimal style needed to make links accessible?
No previous message | Next message →

Good afternoon,

I would like to know if anyone has a suggestion for the minimal style necessary to make links distinguishable fron non-link text? One or more of the Drupal 7 core themes use only colour to distinguish links fron non-link text. Using the standard underline has been decided against for stylistic reasons (which really aren't worth debating).

So, in short, when a link does not use the standard underline, what is the minimal stylistic difference it must have from the non-link text on the page to maintain perceivability?

Thanks,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt

From: Langum, Michael J
Date: Mon, Aug 23 2010 12:18PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I wouldn't claim to be authoritative on this.... But my personal thought is that there should be (at a minimum) distinctive a:hover, and a:active psuedo classes for the links.

-- Mike


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of E.J. Zufelt
Sent: Monday, August 23, 2010 2:06 PM
To: WebAIM Discussion List
Subject: [WebAIM] Minimal style needed to make links accessible?


Good afternoon,

I would like to know if anyone has a suggestion for the minimal style necessary to make links distinguishable fron non-link text? One or more of the Drupal 7 core themes use only colour to distinguish links fron non-link text. Using the standard underline has been decided against for stylistic reasons (which really aren't worth debating).

So, in short, when a link does not use the standard underline, what is the minimal stylistic difference it must have from the non-link text on the page to maintain perceivability?

Thanks,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt

From: Patrick Dunphy
Date: Mon, Aug 23 2010 12:24PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I'm in agreement with Mike's response but would also add the :focus class as
well.

Cheers!
-PD

On Mon, Aug 23, 2010 at 2:17 PM, Langum, Michael J
< = EMAIL ADDRESS REMOVED = >wrote:

> I wouldn't claim to be authoritative on this.... But my personal thought
> is that there should be (at a minimum) distinctive a:hover, and a:active
> psuedo classes for the links.
>
> -- Mike
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of E.J. Zufelt
> Sent: Monday, August 23, 2010 2:06 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Minimal style needed to make links accessible?
>
>
> Good afternoon,
>
> I would like to know if anyone has a suggestion for the minimal style
> necessary to make links distinguishable fron non-link text? One or more of
> the Drupal 7 core themes use only colour to distinguish links fron non-link
> text. Using the standard underline has been decided against for stylistic
> reasons (which really aren't worth debating).
>
> So, in short, when a link does not use the standard underline, what is the
> minimal stylistic difference it must have from the non-link text on the page
> to maintain perceivability?
>
> Thanks,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
>

From: Jared Smith
Date: Mon, Aug 23 2010 12:27PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

On Mon, Aug 23, 2010 at 12:06 PM, E.J. Zufelt wrote:

> So, in short, when a link does not use the standard underline, what is the minimal stylistic difference it must have from the non-link text on the page to maintain perceivability?

This WebAIM blog entry presents the WCAG 2.0 requirements -
http://webaim.org/blog/wcag-2-0-and-link-colors/

In short, WCAG 2.0 requires a contrast ratio of of 3:1 between
non-underlined links and surrounding text. As the article points out,
when you combine this requirement with the foreground/background
contrast requirements, the possible color combinations for the page
become fairly limited.

Also of note is that non-color designators (typically the introduction
of the underline) are required when the link is hovered with the mouse
or receives keyboard focus (a:focus, a:hover in CSS). This is a Level
A requirement.

Jared Smith
WebAIM.org

From: Eyal Sela (@eyalsela)
Date: Mon, Aug 23 2010 4:21PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

PS "If the visual cue is only provided on hover (as in the example above),
it would still fail."
--
Eyal Sela
productivewise.com
twitter.com/Eyalsela
linkedin.com/in/selaeyal
Cell:+972-54-445-8271



On Tue, Aug 24, 2010 at 01:18, Eyal Sela (@eyalsela)
< = EMAIL ADDRESS REMOVED = >wrote:

> according to "F73: Failure of Success Criterion 1.4.1 due to creating
> links that are not visually evident without color vision<http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/complete.html#F73>;",
> they could be (for example) bolded or italicized insted of underlined.
>
> --
> Eyal Sela
> productivewise.com
> twitter.com/Eyalsela
> linkedin.com/in/selaeyal
> Cell:+972-54-445-8271
>
>
>
> On Mon, Aug 23, 2010 at 21:25, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On Mon, Aug 23, 2010 at 12:06 PM, E.J. Zufelt wrote:
>>
>> > So, in short, when a link does not use the standard underline, what is
>> the minimal stylistic difference it must have from the non-link text on the
>> page to maintain perceivability?
>>
>> This WebAIM blog entry presents the WCAG 2.0 requirements -
>> http://webaim.org/blog/wcag-2-0-and-link-colors/
>>
>> In short, WCAG 2.0 requires a contrast ratio of of 3:1 between
>> non-underlined links and surrounding text. As the article points out,
>> when you combine this requirement with the foreground/background
>> contrast requirements, the possible color combinations for the page
>> become fairly limited.
>>
>> Also of note is that non-color designators (typically the introduction
>> of the underline) are required when the link is hovered with the mouse
>> or receives keyboard focus (a:focus, a:hover in CSS). This is a Level
>> A requirement.
>>
>> Jared Smith
>> WebAIM.org
>>

From: Eyal Sela (@eyalsela)
Date: Mon, Aug 23 2010 4:24PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

according to "F73: Failure of Success Criterion 1.4.1 due to creating links
that are not visually evident without color
vision<http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/complete.html#F73>;",
they could be (for example) bolded or italicized insted of underlined.

--
Eyal Sela
productivewise.com
twitter.com/Eyalsela
linkedin.com/in/selaeyal
Cell:+972-54-445-8271



On Mon, Aug 23, 2010 at 21:25, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Mon, Aug 23, 2010 at 12:06 PM, E.J. Zufelt wrote:
>
> > So, in short, when a link does not use the standard underline, what is
> the minimal stylistic difference it must have from the non-link text on the
> page to maintain perceivability?
>
> This WebAIM blog entry presents the WCAG 2.0 requirements -
> http://webaim.org/blog/wcag-2-0-and-link-colors/
>
> In short, WCAG 2.0 requires a contrast ratio of of 3:1 between
> non-underlined links and surrounding text. As the article points out,
> when you combine this requirement with the foreground/background
> contrast requirements, the possible color combinations for the page
> become fairly limited.
>
> Also of note is that non-color designators (typically the introduction
> of the underline) are required when the link is hovered with the mouse
> or receives keyboard focus (a:focus, a:hover in CSS). This is a Level
> A requirement.
>
> Jared Smith
> WebAIM.org
>

From: tom mcCain
Date: Mon, Aug 23 2010 7:15PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

> according to F73: . . . they could be (for example) bolded or
italicized insted of underlined.


Bold face and italic (more accurately, oblique, not italic on web
sites) have other, better uses than link styling.


. . / tom mcCain

____

Cartoon illustrator & web designer focused on rivers, trails, children
and culture
(317) 414-7784 / (317) 251-4992 / Indianapolis
www.crittur.com / crittur.wordpress.com

From: Tim Harshbarger
Date: Tue, Aug 24 2010 8:54AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

Is this actually a perceivability issue or an understandability issue?

I mean isn't the problem we really want to solve "how does the user know
this is a link?" How are the themes indicating that these elements are
links? Actually, I suppose we really just want the user to know the
elements are clickable and convey some idea of what the user can expect
if he or she clicks the element. The user doesn't need to think it is a
link necessarily.

I think once you know what about the link makes people think they can
click it, you can answer the perceivability issue. If it is color, I
assume you will need to ensure it contrasts well against the background
and that it is possible for users to tell it is a different color from
other non-interactive elements on the page.

However, please don't make the users have to hold their mouse over the
element to figure out if it is clickable. That is just poor usability.
And if that is the only way to tell visually, I imagine most people
using voice recognition are going to remain totally unaware of those
interactive elements--unless they suddenly feel the impulse to try to
interact with elements that look non-interactive.

Thanks!
Tim

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of E.J. Zufelt
Sent: Monday, August 23, 2010 1:06 PM
To: WebAIM Discussion List
Subject: [WebAIM] Minimal style needed to make links accessible?

Good afternoon,

I would like to know if anyone has a suggestion for the minimal style
necessary to make links distinguishable fron non-link text? One or more
of the Drupal 7 core themes use only colour to distinguish links fron
non-link text. Using the standard underline has been decided against
for stylistic reasons (which really aren't worth debating).

So, in short, when a link does not use the standard underline, what is
the minimal stylistic difference it must have from the non-link text on
the page to maintain perceivability?

Thanks,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt

From: Karlen Communications
Date: Tue, Aug 24 2010 9:30AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

It would be the same for people with visual disabilities or learning
disabilities. We would be waving our mice over content looking for "hot
spots" we could activate. I don't really have time to do that so would not
find any of the hoverable links.

As an aside I am so used to underlined text being links that I often try to
activate underlined text on pages or in documents where the link is not
easily recognizable. When that fails/LOL I assume there are no links on the
page.

Cheers, Karen

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Tim Harshbarger
Sent: August-24-10 10:54 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

Is this actually a perceivability issue or an understandability issue?

I mean isn't the problem we really want to solve "how does the user know
this is a link?" How are the themes indicating that these elements are
links? Actually, I suppose we really just want the user to know the
elements are clickable and convey some idea of what the user can expect if
he or she clicks the element. The user doesn't need to think it is a link
necessarily.

I think once you know what about the link makes people think they can click
it, you can answer the perceivability issue. If it is color, I assume you
will need to ensure it contrasts well against the background and that it is
possible for users to tell it is a different color from other
non-interactive elements on the page.

However, please don't make the users have to hold their mouse over the
element to figure out if it is clickable. That is just poor usability.
And if that is the only way to tell visually, I imagine most people using
voice recognition are going to remain totally unaware of those interactive
elements--unless they suddenly feel the impulse to try to interact with
elements that look non-interactive.

Thanks!
Tim

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of E.J. Zufelt
Sent: Monday, August 23, 2010 1:06 PM
To: WebAIM Discussion List
Subject: [WebAIM] Minimal style needed to make links accessible?

Good afternoon,

I would like to know if anyone has a suggestion for the minimal style
necessary to make links distinguishable fron non-link text? One or more of
the Drupal 7 core themes use only colour to distinguish links fron non-link
text. Using the standard underline has been decided against for stylistic
reasons (which really aren't worth debating).

So, in short, when a link does not use the standard underline, what is the
minimal stylistic difference it must have from the non-link text on the page
to maintain perceivability?

Thanks,
Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt

From: Jukka K. Korpela
Date: Tue, Aug 24 2010 11:39AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

tom mcCain wrote:

>> according to F73: . . . they could be (for example) bolded or
> italicized insted of underlined.
>
> Bold face and italic (more accurately, oblique, not italic on web
> sites) have other, better uses than link styling.

Indeed: they can, for example, be used to _emphasize_ some links.

On web pages, italic and oblique really mean the same, which can be italic,
oblique, or false oblique, depending on the font. But this is a typographic
issue. (For Times New Roman, <i> gives you italic. For Arial, oblique, more
or less. For Arial Unicode MS, false oblique, i.e. normal letters as
algorithmically slanted. This isn't really about accessibility, except that
false oblique may create an insult and an obstacle to typographically
oriented people. :-))

I fail to see any wisdom in F73. Surely you cannot expect that bolding or
italics (or oblique) font as such could convey the meaning of a link. It
might do that in a well-design user style sheet known to the user. But on
the authoring side, if you remove underlining of links, there's nothing you
could use to communicate link-ness except (possibly) by color. Anything else
is up to a convention, and there are no global conventions on this. Using
italics or bolding will probably just confuse.

And if the idea is that such rendering features are explicitly explained on
a page, like "bolding means link on this page", then there are several
objections:
1) it draws attention to technicalities, which is a bad thing in itself
2) people don't read explanations
3) it deprives you of possibilities of using bolding for any other purpose
4) it sounds foolish when read aloud.

A more sensible idea is to insert a left-pointing arrow before each link
that might not otherwise be recognized as a link. This corresponds to an
encyclopedic tradition and is fairly intuitive. I'm not advocating such
rendering except that it beats the F73 ideas without breathing hard.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: David Farough
Date: Tue, Aug 24 2010 12:15PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I think that Tim made a good point when he said that the user needs to
be able to understand that an element can be activated or clicked. If
the link looks to much like the surrounding text it may be overlooked.
While using an arrow or some other symbol may be a solution, it might
also create extra chatter for a screen reader user. While finding
suitable contrasting colours for link text may be difficult, Perhaps a
slight modification to the background colour for the link would also
help to set it apart from the surrounding text.

This idea of using as little styling as possible to display a link is
likely to make the web more difficult for everyone in the long run.



David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779

>>> "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = > 01:38 PM Tuesday, August
24, 2010 >>>
tom mcCain wrote:

>> according to F73: . . . they could be (for example) bolded or
> italicized insted of underlined.
>
> Bold face and italic (more accurately, oblique, not italic on web
> sites) have other, better uses than link styling.

Indeed: they can, for example, be used to _emphasize_ some links.

On web pages, italic and oblique really mean the same, which can be
italic,
oblique, or false oblique, depending on the font. But this is a
typographic
issue. (For Times New Roman, <i> gives you italic. For Arial, oblique,
more
or less. For Arial Unicode MS, false oblique, i.e. normal letters as
algorithmically slanted. This isn't really about accessibility, except
that
false oblique may create an insult and an obstacle to typographically
oriented people. :-))

I fail to see any wisdom in F73. Surely you cannot expect that bolding
or
italics (or oblique) font as such could convey the meaning of a link.
It
might do that in a well-design user style sheet known to the user. But
on
the authoring side, if you remove underlining of links, there's nothing
you
could use to communicate link-ness except (possibly) by color. Anything
else
is up to a convention, and there are no global conventions on this.
Using
italics or bolding will probably just confuse.

And if the idea is that such rendering features are explicitly
explained on
a page, like "bolding means link on this page", then there are several

objections:
1) it draws attention to technicalities, which is a bad thing in
itself
2) people don't read explanations
3) it deprives you of possibilities of using bolding for any other
purpose
4) it sounds foolish when read aloud.

A more sensible idea is to insert a left-pointing arrow before each
link
that might not otherwise be recognized as a link. This corresponds to
an
encyclopedic tradition and is fairly intuitive. I'm not advocating such

rendering except that it beats the F73 ideas without breathing hard.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Allison Bloodworth
Date: Tue, Aug 24 2010 12:45PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I think the standard for links is that a) they are a different color from the rest of the text on the page, hopefully with sufficient contract (also note that visited links should be a different color from regular links) and b) the link upon mouseover is underlined, which is an additional cue that they are clickable. The color attracts the user to inspect it further, and then if they do they are given the visual cue for a link--an underline. I definitely wouldn't underline links in text other than on mouseover because as Karen points out then you really can't underline anything else on the page.

Cheers,
Allison

On Aug 24, 2010, at 8:28 AM, Karlen Communications wrote:

> It would be the same for people with visual disabilities or learning
> disabilities. We would be waving our mice over content looking for "hot
> spots" we could activate. I don't really have time to do that so would not
> find any of the hoverable links.
>
> As an aside I am so used to underlined text being links that I often try to
> activate underlined text on pages or in documents where the link is not
> easily recognizable. When that fails/LOL I assume there are no links on the
> page.
>
> Cheers, Karen
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Tim Harshbarger
> Sent: August-24-10 10:54 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Minimal style needed to make links accessible?
>
> Is this actually a perceivability issue or an understandability issue?
>
> I mean isn't the problem we really want to solve "how does the user know
> this is a link?" How are the themes indicating that these elements are
> links? Actually, I suppose we really just want the user to know the
> elements are clickable and convey some idea of what the user can expect if
> he or she clicks the element. The user doesn't need to think it is a link
> necessarily.
>
> I think once you know what about the link makes people think they can click
> it, you can answer the perceivability issue. If it is color, I assume you
> will need to ensure it contrasts well against the background and that it is
> possible for users to tell it is a different color from other
> non-interactive elements on the page.
>
> However, please don't make the users have to hold their mouse over the
> element to figure out if it is clickable. That is just poor usability.
> And if that is the only way to tell visually, I imagine most people using
> voice recognition are going to remain totally unaware of those interactive
> elements--unless they suddenly feel the impulse to try to interact with
> elements that look non-interactive.
>
> Thanks!
> Tim
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of E.J. Zufelt
> Sent: Monday, August 23, 2010 1:06 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Minimal style needed to make links accessible?
>
> Good afternoon,
>
> I would like to know if anyone has a suggestion for the minimal style
> necessary to make links distinguishable fron non-link text? One or more of
> the Drupal 7 core themes use only colour to distinguish links fron non-link
> text. Using the standard underline has been decided against for stylistic
> reasons (which really aren't worth debating).
>
> So, in short, when a link does not use the standard underline, what is the
> minimal stylistic difference it must have from the non-link text on the page
> to maintain perceivability?
>
> Thanks,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
>

From: Jared Smith
Date: Tue, Aug 24 2010 12:54PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> We would be waving our mice over content looking for "hot
> spots" we could activate.

Assuming one had a mouse to wave around. Beyond the issues for those
with some motor disabilities, I also don't have a mouse on my iPhone
or iPad (assuming I actually owned one - something I do quite often).
All :hover, :focus, and :active styles are ignored on touch screen
devices. Additionally, color differences alone can be quite
unnoticeable until fully zoomed into the text. If I'm just looking for
'clickable' elements in a page, the lack of underline could render
these links invisible to users of these devices despite the fact the
user may have good vision.

It's quite likely that in a few years as touch devices replace today's
massive, terribly inefficient computers that generally require both
keyboard and mouse that the lack of underlined links will be viewed as
a design faux pas of today. The non-underlined links of today will be
as the animated gifs of the late 90s.

In the meantime, until designers realize the folly of not underlining
links, the solution is simply:
1. Ensure there is sufficient contrast between link text and non-link
text. WCAG 2.0 provides a good measure.
2. Provide a non-color designator (usually the underline) on mouse
hover AND keyboard focus.

Jared Smith
WebAIM

From: Waltenberger, Lon (LNI)
Date: Tue, Aug 24 2010 12:57PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I can't understand any stylistic reason to not underline links; however,
I can spend a long time justifying underlining links.

Thank you, Jared, for saving me some keyboarding and time.

You've stated the case quite elegantly.

From: Jukka K. Korpela
Date: Tue, Aug 24 2010 2:42PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

Waltenberger, Lon (LNI) wrote:

> I can't understand any stylistic reason to not underline links;
> however, I can spend a long time justifying underlining links.

I could write an essay on why underlining links is a stylistically very bad
idea. For one thing, it breaks the patterns of words, especially if many
letters have descenders (as in "g") or parts that more or less reside on the
baseline (as in "u").

Yet, underlined links has become common practice on the web, and underlining
is rarely used for anything else (and shouldn't be used for anything else
except in special cases). So bad habit has more or less become a good habit
by becoming common,

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Jason Kiss
Date: Tue, Aug 24 2010 3:36PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

On 25/08/10 08:41, Jukka K. Korpela wrote:
> I could write an essay on why underlining links is a stylistically very bad
> idea. For one thing, it breaks the patterns of words, especially if many
> letters have descenders (as in "g") or parts that more or less reside on the
> baseline (as in "u").
>

Can't this be mitigated by using border-bottom for a faux underline
instead of text-decoration: underline? The bottom border can act as an
underline but does not need to bisect a letter's descender nor, if a
sufficient line-height is applied, cut in to the text on the next line.
One account of this approach is described here:
http://dev.opera.com/articles/view/32-styling-lists-and-links/#fauxunderlines

Jason Kiss
accessibleculture.org

From: Waltenberger, Lon (LNI)
Date: Tue, Aug 24 2010 4:15PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

Even though I respect the talents of graphic designers, I'm not one. Any
site I designed would be visually dull to most but it'd be highly
accessible and, therefore, usable. I'd have to hire a graphic designer
for the visual side.

I look at Web design more from a utilitarian, accessible, and usable
perspective. I'm not saying graphic designers don't understand
usability; they merely have different innate preferences.

I prefer following the KISS Principle in everything I do:
http://en.wikipedia.org/wiki/KISS_principle &
http://searchcio-midmarket.techtarget.com/sDefinition/0,,sid183_gci52169
4,00.html. I've learned over 6 decades that it works best.

And regarding form over function, style over accessibility, I refer to
Nielsen's Alertbox at http://www.useit.com/alertbox/20040510.html.

I'm happy that cars, planes, trains, and scuba gear aren't designed like
desktops, laptops, some ghastly cell phones, and websites.

...Lon


On 25/08/10 08:41, Jukka K. Korpela wrote:
> I could write an essay on why underlining links is a stylistically
very bad
> idea. For one thing, it breaks the patterns of words, especially if
many
> letters have descenders (as in "g") or parts that more or less reside
on the
> baseline (as in "u").
>

Can't this be mitigated by using border-bottom for a faux underline
instead of text-decoration: underline? The bottom border can act as an
underline but does not need to bisect a letter's descender nor, if a
sufficient line-height is applied, cut in to the text on the next line.
One account of this approach is described here:
http://dev.opera.com/articles/view/32-styling-lists-and-links/#fauxunder
lines

Jason Kiss
accessibleculture.org

From: Simius Puer
Date: Wed, Aug 25 2010 2:36AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

Ah, the voice of common sense - great input Lon! And it's great to see
someone quoting Nielsen whose advice is always well grounded - and backed up
by research unlike some other 'gurus'.

From: Jeevan Reddy
Date: Wed, Aug 25 2010 3:45AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

Hi Friends,
Jared Smith has given great explanation on Distinguishable links.
Well, As an Accessibility tester how can we predict the Contrast between
link text and non- text.
Is there any Tool to predict that? Generally i use Juicy Studio conntrast
analyzer, but it Predicts contrast of text and back ground. Any help is
Appreciated!

On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> > We would be waving our mice over content looking for "hot
> > spots" we could activate.
>
> Assuming one had a mouse to wave around. Beyond the issues for those
> with some motor disabilities, I also don't have a mouse on my iPhone
> or iPad (assuming I actually owned one - something I do quite often).
> All :hover, :focus, and :active styles are ignored on touch screen
> devices. Additionally, color differences alone can be quite
> unnoticeable until fully zoomed into the text. If I'm just looking for
> 'clickable' elements in a page, the lack of underline could render
> these links invisible to users of these devices despite the fact the
> user may have good vision.
>
> It's quite likely that in a few years as touch devices replace today's
> massive, terribly inefficient computers that generally require both
> keyboard and mouse that the lack of underlined links will be viewed as
> a design faux pas of today. The non-underlined links of today will be
> as the animated gifs of the late 90s.
>
> In the meantime, until designers realize the folly of not underlining
> links, the solution is simply:
> 1. Ensure there is sufficient contrast between link text and non-link
> text. WCAG 2.0 provides a good measure.
> 2. Provide a non-color designator (usually the underline) on mouse
> hover AND keyboard focus.
>
> Jared Smith
> WebAIM
>

From: Dan Conley
Date: Wed, Aug 25 2010 7:00AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

I think Jared already linked this, but Webaim has a tool:

http://webaim.org/resources/contrastchecker/

Dan Conley
Information Specialist
Center for International Rehabilitation Research Information and Exchange (CIRRIE)
University at Buffalo, Health Sciences Library B6
Phone: (716) 829-5728
= EMAIL ADDRESS REMOVED =
http://cirrie.buffalo.edu


On 8/25/2010 8:57 AM, Tim Harshbarger wrote:
> You should be able to use the Jucy Studio contrast analyzer to determine
> the difference between link and non-link text. The formula that the
> contrast analyzer uses isn't necessarily specific to foreground and
> background colours. The formula basically determines the luminosity
> index of colours and then calculates the ratio between the two colours.
>
> The part I am less certain about is using the success criteria for the
> colour contrast between foreground/background colours to determine if
> there is enough contrast between link and non-link text. Since I don't
> really have a better idea to offer, I guess it will do.
>
> My difficulty with applying the foreground/background contrast ratios to
> link/non-link text is that I am uncertain that the ratios may need to be
> the same. In the case of foreground and background colours, we want to
> ensure there is enough contrast to read the content. With link/non-link
> text we are wanting to ensure there is enough difference between the
> colours that the user can identify that there is a difference.
>
> I think it might be possible that the contrast ratio can be lower, but
> since the other ratio works and I don't have a ratio to suggest, I will
> keep using the ones mentioned in WCAG 2.0.
>
> I only mention this now in case someone else might have information that
> would support using a different ratio or that would help me understand
> that the ratios mentioned in WCAG 2.0 are equally valid for these type
> of situations.
>
> Thanks!
> Tim
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeevan Reddy
> Sent: Wednesday, August 25, 2010 4:45 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Minimal style needed to make links accessible?
>
> Hi Friends,
> Jared Smith has given great explanation on Distinguishable links.
> Well, As an Accessibility tester how can we predict the Contrast between
> link text and non- text.
> Is there any Tool to predict that? Generally i use Juicy Studio
> conntrast
> analyzer, but it Predicts contrast of text and back ground. Any help is
> Appreciated!
>
> On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith< = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
>>> We would be waving our mice over content looking for "hot
>>> spots" we could activate.
>> Assuming one had a mouse to wave around. Beyond the issues for those
>> with some motor disabilities, I also don't have a mouse on my iPhone
>> or iPad (assuming I actually owned one - something I do quite often).
>> All :hover, :focus, and :active styles are ignored on touch screen
>> devices. Additionally, color differences alone can be quite
>> unnoticeable until fully zoomed into the text. If I'm just looking for
>> 'clickable' elements in a page, the lack of underline could render
>> these links invisible to users of these devices despite the fact the
>> user may have good vision.
>>
>> It's quite likely that in a few years as touch devices replace today's
>> massive, terribly inefficient computers that generally require both
>> keyboard and mouse that the lack of underlined links will be viewed as
>> a design faux pas of today. The non-underlined links of today will be
>> as the animated gifs of the late 90s.
>>
>> In the meantime, until designers realize the folly of not underlining
>> links, the solution is simply:
>> 1. Ensure there is sufficient contrast between link text and non-link
>> text. WCAG 2.0 provides a good measure.
>> 2. Provide a non-color designator (usually the underline) on mouse
>> hover AND keyboard focus.
>>
>> Jared Smith
>> WebAIM
>>

From: Tim Harshbarger
Date: Wed, Aug 25 2010 7:03AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

You should be able to use the Jucy Studio contrast analyzer to determine
the difference between link and non-link text. The formula that the
contrast analyzer uses isn't necessarily specific to foreground and
background colours. The formula basically determines the luminosity
index of colours and then calculates the ratio between the two colours.

The part I am less certain about is using the success criteria for the
colour contrast between foreground/background colours to determine if
there is enough contrast between link and non-link text. Since I don't
really have a better idea to offer, I guess it will do.

My difficulty with applying the foreground/background contrast ratios to
link/non-link text is that I am uncertain that the ratios may need to be
the same. In the case of foreground and background colours, we want to
ensure there is enough contrast to read the content. With link/non-link
text we are wanting to ensure there is enough difference between the
colours that the user can identify that there is a difference.

I think it might be possible that the contrast ratio can be lower, but
since the other ratio works and I don't have a ratio to suggest, I will
keep using the ones mentioned in WCAG 2.0.

I only mention this now in case someone else might have information that
would support using a different ratio or that would help me understand
that the ratios mentioned in WCAG 2.0 are equally valid for these type
of situations.

Thanks!
Tim
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeevan Reddy
Sent: Wednesday, August 25, 2010 4:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

Hi Friends,
Jared Smith has given great explanation on Distinguishable links.
Well, As an Accessibility tester how can we predict the Contrast between
link text and non- text.
Is there any Tool to predict that? Generally i use Juicy Studio
conntrast
analyzer, but it Predicts contrast of text and back ground. Any help is
Appreciated!

On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith < = EMAIL ADDRESS REMOVED = >
wrote:

> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> > We would be waving our mice over content looking for "hot
> > spots" we could activate.
>
> Assuming one had a mouse to wave around. Beyond the issues for those
> with some motor disabilities, I also don't have a mouse on my iPhone
> or iPad (assuming I actually owned one - something I do quite often).
> All :hover, :focus, and :active styles are ignored on touch screen
> devices. Additionally, color differences alone can be quite
> unnoticeable until fully zoomed into the text. If I'm just looking for
> 'clickable' elements in a page, the lack of underline could render
> these links invisible to users of these devices despite the fact the
> user may have good vision.
>
> It's quite likely that in a few years as touch devices replace today's
> massive, terribly inefficient computers that generally require both
> keyboard and mouse that the lack of underlined links will be viewed as
> a design faux pas of today. The non-underlined links of today will be
> as the animated gifs of the late 90s.
>
> In the meantime, until designers realize the folly of not underlining
> links, the solution is simply:
> 1. Ensure there is sufficient contrast between link text and non-link
> text. WCAG 2.0 provides a good measure.
> 2. Provide a non-color designator (usually the underline) on mouse
> hover AND keyboard focus.
>
> Jared Smith
> WebAIM
>

From: Kinnunen,Daniel (DFPS)
Date: Wed, Aug 25 2010 10:12AM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | Next message →

There is a also very nice contrast analyzer available on the Paciello
group's site
(http://www.paciellogroup.com/resources/contrast-analyser.html),
also linked from the Web Accessibility Tools Consortium page
(http://www.wat-c.org/)

You can select any two colors from a page using the eye-dropper tool.
The fields are labeled Foreground and Background, but if you select one
text color as the foreground, and the other text color as the
background, you will get the contrast ratio between the two text colors.

You can use this tool to test contrast in any application, not just for
content viewed in a Web browser. For example, you could test the text
contrast in a PDF document or any software dialog also.

As an aside, the Juicy Studio toolbar is great, but I have not figured
out how to get it to test contrast for text that is found on top of a
background image. It seems to test only colors specified as text and
background colors in the CSS.

regards,
Dan

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeevan Reddy
Sent: Wednesday, August 25, 2010 4:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

Hi Friends,
Jared Smith has given great explanation on Distinguishable links.
Well, As an Accessibility tester how can we predict the Contrast between
link text and non- text.
Is there any Tool to predict that? Generally i use Juicy Studio
conntrast
analyzer, but it Predicts contrast of text and back ground. Any help is
Appreciated!

On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith < = EMAIL ADDRESS REMOVED = >
wrote:

> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> > We would be waving our mice over content looking for "hot
> > spots" we could activate.
>
> Assuming one had a mouse to wave around. Beyond the issues for those
> with some motor disabilities, I also don't have a mouse on my iPhone
> or iPad (assuming I actually owned one - something I do quite often).
> All :hover, :focus, and :active styles are ignored on touch screen
> devices. Additionally, color differences alone can be quite
> unnoticeable until fully zoomed into the text. If I'm just looking for
> 'clickable' elements in a page, the lack of underline could render
> these links invisible to users of these devices despite the fact the
> user may have good vision.
>
> It's quite likely that in a few years as touch devices replace today's
> massive, terribly inefficient computers that generally require both
> keyboard and mouse that the lack of underlined links will be viewed as
> a design faux pas of today. The non-underlined links of today will be
> as the animated gifs of the late 90s.
>
> In the meantime, until designers realize the folly of not underlining
> links, the solution is simply:
> 1. Ensure there is sufficient contrast between link text and non-link
> text. WCAG 2.0 provides a good measure.
> 2. Provide a non-color designator (usually the underline) on mouse
> hover AND keyboard focus.
>
> Jared Smith
> WebAIM

From: Kroon.Kurtis
Date: Thu, Aug 26 2010 2:27PM
Subject: Re: Minimal style needed to make links accessible?
← Previous message | No next message

For the most part, these tools measure contrast between foreground and
background ... which is less useful when you're comparing two _text_
colors viewed against the _same_ background.

If we rely strictly on the test results, fully-saturated blue (#00f) and
black (#000) fail to provide enough contrast. And that's 100% true:
blue text on a black background (or vice versa) indeed fail to provide
enough contrast, _when one is set on the other_.

Consider, however, that this blue is the "classic web link color" ...
and most web-using folks have no problem recognizing it as link text.
Instead, I propose that we evaluate color _difference_. The W3C
considers this to be just a part of contrast, and have removed it from
their officially-recommended algorithm. As a result, the tools I tested
don't report it. (I can't download software, so I can't test the
Paciello Group's tool ... can anyone tell me -- privately, so we don't
clutter the list -- if it does?)

For myself, I set up a spreadsheet in Excel to calculate color contrast.
I created it before the W3C changed their algorithm, so it reports color
differences. However, it uses the old success criteria, which failed
any score lower than 500: the blue/black example would still fail
because it only scores 255. Not a problem: color difference is no
longer normative, so I can redefine success to mean anything that suits.

I'd say anything with a color difference greater than about 200 should
be okay -- purple (#800080), the "classic visited web link color",
scores 256 ... and if it's darkened to the nearest websafe color (just
for grins), it scores 204.

Just something to consider ...

Thanks!

Kurtis Kroon
Web Business Services
State of California Franchise Tax Board
= EMAIL ADDRESS REMOVED =


-----Original Message-----
From: Kinnunen,Daniel (DFPS) [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, August 25, 2010 9:11 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

There is a also very nice contrast analyzer available on the Paciello
group's site
(http://www.paciellogroup.com/resources/contrast-analyser.html),
also linked from the Web Accessibility Tools Consortium page
(http://www.wat-c.org/)

You can select any two colors from a page using the eye-dropper tool.
The fields are labeled Foreground and Background, but if you select one
text color as the foreground, and the other text color as the
background, you will get the contrast ratio between the two text colors.

You can use this tool to test contrast in any application, not just for
content viewed in a Web browser. For example, you could test the text
contrast in a PDF document or any software dialog also.

As an aside, the Juicy Studio toolbar is great, but I have not figured
out how to get it to test contrast for text that is found on top of a
background image. It seems to test only colors specified as text and
background colors in the CSS.

regards,
Dan

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeevan Reddy
Sent: Wednesday, August 25, 2010 4:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

Hi Friends,
Jared Smith has given great explanation on Distinguishable links.
Well, As an Accessibility tester how can we predict the Contrast between
link text and non- text.
Is there any Tool to predict that? Generally i use Juicy Studio
conntrast
analyzer, but it Predicts contrast of text and back ground. Any help is
Appreciated!

On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith < = EMAIL ADDRESS REMOVED = >
wrote:

> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> > We would be waving our mice over content looking for "hot
> > spots" we could activate.
>
> Assuming one had a mouse to wave around. Beyond the issues for those
> with some motor disabilities, I also don't have a mouse on my iPhone
> or iPad (assuming I actually owned one - something I do quite often).
> All :hover, :focus, and :active styles are ignored on touch screen
> devices. Additionally, color differences alone can be quite
> unnoticeable until fully zoomed into the text. If I'm just looking for
> 'clickable' elements in a page, the lack of underline could render
> these links invisible to users of these devices despite the fact the
> user may have good vision.
>
> It's quite likely that in a few years as touch devices replace today's
> massive, terribly inefficient computers that generally require both
> keyboard and mouse that the lack of underlined links will be viewed as
> a design faux pas of today. The non-underlined links of today will be
> as the animated gifs of the late 90s.
>
> In the meantime, until designers realize the folly of not underlining
> links, the solution is simply:
> 1. Ensure there is sufficient contrast between link text and non-link
> text. WCAG 2.0 provides a good measure.
> 2. Provide a non-color designator (usually the underline) on mouse
> hover AND keyboard focus.
>
> Jared Smith
> WebAIM