homepage Welcome to WebmasterWorld Guest from 54.226.147.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Links Should Be Underlined!
text-decoration:none
pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 1:40 pm on Feb 4, 2007 (gmt 0)

Guidelines for Visualizing Links
[useit.com...]

If there is one thing that really gets under my skin when it comes to usability, its links that are not underlined. Don't get me wrong, there are times when links not being underlined works. What doesn't work is making the links the same color as your copy. Or, using a shade of color that is too close to the color of your copy. For example; #000000 for copy and #333333 for non-underlined links.

And for those of you who think making the links a shade of red or green, that doesn't work either. In the United States, 7-10% of men have red-green color blindness. Overall, 1.3% of the United States population has some form of color blindness.

Why take the chance?

If I find that I have to scrub your page with my cursor to find links to other content, c'ya!

 

Quadrille

WebmasterWorld Senior Member quadrille us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 1:46 pm on Feb 4, 2007 (gmt 0)

The figures don't add up - unless only about 20% of the US population is male :)

Can't a colorblind person set their browser to diplay links as they like them, regardless of the web site's preference?

I agree it's pretty pointless having a link that visitors can't see is a link - but webmasters have as much right to be pointless as the next person ;)

[edited by: Quadrille at 1:47 pm (utc) on Feb. 4, 2007]

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 1:50 pm on Feb 4, 2007 (gmt 0)

This [colorfilter.wickline.org] is one of my most valuable tools. I have it in my WebDeveloper custom tools.

I use blue simply because it works as differentiation in all the ColorFilter tests.

I also style :hover attributes so there is some "movement" that catches the eye. What I usually do is but a text-decoration: none in the :hover. This is the opposite of what I used to do, but I learned, the hard way, that you should:

A) Always underline inactive links

B) Color them blue

C) Make them move

D) Turn them red when active/hovered

E) Never, EVER use underlined text for non-links

[edited by: pageoneresults at 3:08 pm (utc) on Feb. 4, 2007]
[edit reason] Removed URI Reference - Please Refer to TOS [/edit]

appi2

5+ Year Member



 
Msg#: 3242275 posted 3:34 pm on Feb 4, 2007 (gmt 0)

Sorry but, best way to turn people off accessability - tell them they must use a colour.

cmarshall
What happens when those blue/red links are on a red/blue background?

skipfactor

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3242275 posted 3:44 pm on Feb 4, 2007 (gmt 0)

>>Never, EVER use underlined text for non-links

Made me click & no reward: bad webmaster.

Also blue non-linked text is a no-no IMO, especially for headings and bolded text.

ken_b

WebmasterWorld Senior Member ken_b us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 3:46 pm on Feb 4, 2007 (gmt 0)

Can't a colorblind person set their browser...

Possibly, but why should they? It's not like any given site is the ONLY site of it's kind or the ONLY site that addresses whatever the issue is.

If a webmaster doesn't want the traffic I'm pretty sure there are other sites that would welcome it.

Quadrille

WebmasterWorld Senior Member quadrille us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 4:30 pm on Feb 4, 2007 (gmt 0)

Realistically, unless you want total control of the www (an unlikely scenario), then people will continue to use whatever design features they like. And take a risk on who visits.

Much as I loathe white-on-black, flash, splash, and every other gimmick, I see no reason why you should attempt to limit webmasters' freedom in that way.

I don't support flash, but I'll support people's right to, if you know what I mean.

If I were colorblind, I hope I'd accept that reality, too - I don't think I'd want my minor physical challenge to diminish the diversity of the web; any more than I'd want perfectly-sighted people to wear thick specs to reduce their advantage, or ballet dancers to carry lead weights to reduce their grace to my level of clumsiness. [(c) Kurt Vonnegut]

If the alternative is a monochrome screen and political correctness, I'd reset my browser and live with it. It's one thing to call on 'public service sites' to be 100% accessible, a different story when you want to control everybody.

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 4:40 pm on Feb 4, 2007 (gmt 0)

Sorry but, best way to turn people off accessability - tell them they must use a colour.

Oh, no, no, no. The best way to turn a designer off of ANYTHING is to tell them to do something, or give them restrictions. I've been working with top-shelf designers for quite some time, and they react...less than favorably...to ANY types of restrictions. Working with designers is ALWAYS a tug-of-war (at least the good designers).

Most designers I know have Jakob Nielsen dartboards in their offices.

If the bar is don't do anything that will make a designer squirm, then you are in for a long, lonely, designer-less future.

cmarshall
What happens when those blue/red links are on a red/blue background?

Actually, I do exactly that in a highly accessible site I've designed. The link is still underlined, but the color is different, and is surrounded by another color that snaps in :hover. It is, very obviously, a link, but you can't do that for every link embedded in your main content.

If your main content is deep blue or red, then you might as well forget all about accessibility.

As I have stated before, I design sites that can save lives. If someone dies because I want to drink some academic Kool-Aid or express my inner Warhol, then I shouldn't be designing these sites, as I'm just going to kill people.

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 4:54 pm on Feb 4, 2007 (gmt 0)

I see no reason why you should attempt to limit webmasters' freedom in that way.

And here we have the crux of the issue. Guys like Nielsen come in and make edicts, so people consider it an abridgment of their freedom.

Notice how quiet this forum is? I have alerts turned on for it, and I get maybe one or two alerts a week.

Now THAT'S freedom. If no one wants to design an accessible or usable site, then they don't have to. Just like if someone wants to use <table> elements, they have every God-given right to do exactly that.

Just because pundits climb up on soapboxes and make pronouncements is no law.

However, in the US, we have something called Section 508 [section508.gov]. This is, very often, a requirement. I believe that they have something like it in the UK and EU as well.

Section 508 is actually pretty namby-pamby. I generally code WAI Priority 3 [w3.org]. It's really not too difficult at all. I seldom even have to think twice about it.

I actually consider it a challenge to produce fast, accessible and usable sites that can support older browsers, yet provide modern technologies like AJAX and advanced CSS.

It's actually fun, and I have been known to "high five" when I've solved a vexing issue of old browser support or an accessibility issue.

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 5:38 pm on Feb 4, 2007 (gmt 0)

A) Always underline inactive links

Agree.

B) Color them blue

Don't agree with this one. While blue is the default color and recommended by some, as long as the link is visible and recognizable, it can be any color. That underline is the key factor.

C) Make them move

Don't agree with this one. If you make anything move, its going to shift other things which makes for an unfriendly user experience. You can provide the effect of movement by using text-decoration:none for hover and active.

D) Turn them red when active/hovered

Don't agree with this one. Again, color is not really that important here for effects.

E) Never, EVER use underlined text for non-links

Totally agree! I was doing a review on a site which is what caused me to start this topic. Can you believe they had their links in black with no underline? I had no idea what was a link and what wasn't. And, to top it off, they decided to use underlines to emphasize text. And here I was trying to click them. Bad Webmaster!

luckychucky

10+ Year Member



 
Msg#: 3242275 posted 6:03 pm on Feb 4, 2007 (gmt 0)

I really disagree with the edict that every site must underline all links. What about clean, minimalist sites (which, let's say, don't care about their SEO for whatever reason) whose pages are pure photos, pure thumbnails, pure visuals with no text at all...fine them, banish them, jail their webmasters?

I find underlined links visually primitive, and a real eyesore.

If someone's colorblind, let him load a browser extension which identifies and visually tags all links on a page. Less than 5 minutes work, and problem solved for every single site across the entire web, at zero inconvenience or aesthetic mangling for anyone.

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 6:39 pm on Feb 4, 2007 (gmt 0)

A) Always underline inactive links

Agree.

B) Color them blue

Don't agree with this one. While blue is the default color and recommended by some, as long as the link is visible and recognizable, it can be any color. That underline is the key factor.

C) Make them move

Don't agree with this one. If you make anything move, its going to shift other things which makes for an unfriendly user experience. You can provide the effect of movement by using text-decoration:none for hover and active.

My bad. By "move" I mean usually apply a text-decoration: none :hover style. Sometimes more, like switching a background-color. The deal is that there is a visible change when hovered or activated.

D) Turn them red when active/hovered

Don't agree with this one. Again, color is not really that important here for effects.

As I said, I've learned the hard way. Just my experience. I'm not making rules for anyone else. These are just what I follow.

As far as "visually primitive," etc. I think that we are witnessing exactly what happens when people are given accessibility guidelines. Look at the tone of this very thread.

If a client requires it (like a government contractor requires Section 508, plus extra restrictions), then will you refuse their custom? I'm an engineer. I've worked my entire adult life meeting goals restricted by parameters. I used to work for a US defense contractor. You want restrictions? I think you'd probably pass out if saw one of their specifications. I'm talking an entire bookshelf full of 3-inch ring binders as the spec for ONE project.

As I said, I've actually enjoyed meeting accessibility guidelines with pleasing, high-performance and modern sites. It's quite possible, and the posit that it is either accessible or aesthetic is simply a strawman. Just because Nielsen chooses to use his bugly site as a Platonic Ideal for accessible design doesn't mean I have to follow his aesthetics blindly in my own work.

Setek

5+ Year Member



 
Msg#: 3242275 posted 1:03 am on Feb 5, 2007 (gmt 0)

I really disagree with the edict that every site must underline all links. What about clean, minimalist sites (which, let's say, don't care about their SEO for whatever reason) whose pages are pure photos, pure thumbnails, pure visuals with no text at all...fine them, banish them, jail their webmasters?

It's all about purpose. Let's not think about whose responsibility it is to do what (is it the Web Developer's job? Or is it the colourblind person's job?)

I have to develop a gallery style website, for an art gallery. The entire thing is all pictures. Did anybody stop and think that maybe, if a colourblind person came to visit this site, that they'd be aware some things wouldn't look right to them? Art is art, and they're not going to change the pictures because somebody's colourblind...

Now, I have to develop a government department's website. Due to law, I have to conform to minimum Accessibility Level 1. For this reason, I must do certain things that would make the website more accessible.

If your target market is your extended family because it's a website you created of your last holiday photos, then do you really need to make it thoroughly accessible?

It's all about purpose...

If someone's colorblind, let him load a browser extension which identifies and visually tags all links on a page. Less than 5 minutes work, and problem solved for every single site across the entire web, at zero inconvenience or aesthetic mangling for anyone.

And at the same time, I don't agree with this at all. Who said the entire colourblind population knows their browser even has extensions? Let alone where to get one that meets their needs? How many users do you know (that aren't web developers or web-related gurus) that even know their browser can override link colours?

In the end, it's up to a developer whether or not to implement such accessibility features. The level might always change (I for instance, may never do as much as cmarshall does) but the reason always stays the same:

We do it to be accommodating.

Not to say "you can go find an extension you didn't know existed for a browser you probably don't use and live with your problem."

P.S.: I don't always keep my inactive links #00f - I make them a colour that suits the website's branding and colour scheme. But I do make it significantly different to the main copy's colour (different with a monochrome filter [did you know OS X has a "Greyscale" function under "Universal Access"?!])

I also have some indication of an active/focussed link when tabbing with the keyboard (outline is good, as it is on by default, but sometimes not quite practical.)

Sometimes I don't always underline inactive links, either. Maybe due to client disapproval, or design aesthetic, but it's something that I sometimes have to live with.

But I never, ever, use underline on things that aren't links. There is a rare occasion for report-publishing (as in, using <del> and <ins> properly) but otherwise, I avoid it like the plague.

luckychucky

10+ Year Member



 
Msg#: 3242275 posted 7:18 am on Feb 5, 2007 (gmt 0)

I don't agree with this at all. Who said the entire colourblind population knows their browser even has extensions?
If you've got a statistically rare disability, then you acquire whatever basic gear you need to get by in the world. If you're Stephen Hawking, that's a device which translates your eye movements into text. If you're blind, you get a seeing-eye dog, a white cane and a TTD reader/writer. If you're legless, you get a prosthetic limb, crutch and/or wheelchair. And if you're colorblind, you add a simple extension to your browser, or get a volunteer geek to make those 3 or 4 basic clicks for you. If you operate a computer yet don't even know how to do a download, nor install an app or extension, then your issues go beyond that fundamental disability alone, because you just don't know how to use a computer, period.

Up to a certain point some basics are assumed to be a given, and taken for granted: you know how to load your OS. You know how to set up an Internet connection with your ISP. You know how to install an app. And you know how to install a browser extension, esp since it's a basic one-click operation (in FireFox at least).

...which leads to another point: forcing every website within the vast, uncharted and for all practical purposes infinite expanses of CyberSpace to reprogram (sometimes in drastic and aesthetically jarring ways) so as to visually accommodate the unique disability of only a narrow percentage of users is a bass-ackward non-solution. A better way to go is to campaign/ensure that the 3 or 4(?) major browsers out there have preferences settings allowing for color-independent highlighting of hyperlinks. Simple solution, highly effective, and makes sense.

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 11:46 am on Feb 5, 2007 (gmt 0)

...which leads to another point: forcing every website within the vast, uncharted and for all practical purposes infinite expanses of CyberSpace to reprogram (sometimes in drastic and aesthetically jarring ways) so as to visually accommodate the unique disability of only a narrow percentage of users is a bass-ackward non-solution.

At the risk of being repetitive, here we have the real issue before us, once again.

A few pundits [useit.com] are making a lot of noise about accessibility, and presenting some fairly unattractive [useit.com] (IMO) solutions as "The One True Way™."

Just like the table wars [webmasterworld.com], extreme camps are being established, and the rhetoric has gone feral.

Reality has been left beaten and bloody behind a dumpster in a bad neighborhood.

The reality of the situation is that there are actually very few sites that are required to strictly follow accessibility guidelines. They are guidelines, NOT laws. As WPTS (Web Pages That Suck) shows, there are millions of sites out there that not only break accessibility guidelines, but also cross boundaries of taste and usability.

The final arbiter is always our users. It was mentioned here earlier, in a very sensible post, that we craft our site to meet our intended audience. If our audience is composed of an unusually high number of disabled persons (like the ones I make), then we follow more stringent guidelines. If, for example, it is a movie site, then they can be pretty sure that they won't be getting too many blind visitors, and they want to immerse their visitors in the "experience," so they use a lot of Flash, ActiveX and QuickTime.

In many cases, we can develop habits that increase the basic accessibility of our sites with almost no cost. I have done this in my own work. I certainly don't expect others to do so. I simply state it here to be an example. It can get pretty tiresome to be accused of being a pundit without being paid like a pundit.

As I have stated before [webmasterworld.com], the single biggest thing that a site can do to support accessibility is to extend support for older browsers. With all the noise about AJAX and whatnot, this simple message gets drowned out. It is a practical message, and surprisingly easy to accomplish. AJAX can run all the way down to IE5 (Which was where it was introduced).

Many accessibility techniques can also translate to basic usability and site efficiency techniques.

For example, if you code strict XHTML, then that allows DOM and XML tools more efficiency when hitting your site. I'm pretty sure that many crawlers and aggregators are using these tools, not just blind readers.

Accessibility and usability become marketing points. If you are a site designer, and you can tell a customer that you can give them a site that can be used by even 5% more people, or allow 75% of the audience to hit the "money shot" withing ten seconds, then you have a SERIOUS tool.

If you don't want to, then there are no laws stopping you from doing whatever you like, no matter what Jakob says.

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3242275 posted 9:40 am on Feb 7, 2007 (gmt 0)

Actually, I do exactly that in a highly accessible site I've designed. The link is still underlined, but the color is different, and is surrounded by another color that snaps in :hover. It is, very obviously, a link, but you can't do that for every link embedded in your main content.

add the :active and :focus to your link definitions and you will get a link that has a state when someone tabs to it :)

:active for IE5, 5.5 and 6
:focus for more standard compliant browsers.



This is what I have have in one of my stylesheets

a{color:#03c; padding:.3ex .5ex; }
a:visited{ color:#639; }
a:active,a:hover,a:focus{ background:#06c; color:#fff; }

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 11:22 am on Feb 7, 2007 (gmt 0)

I always use hover and active. I think I had a validation issue with focus at one time, and that may be why I don't use it. Maybe I need to re-evaluate my workflow.

Thanks!

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 11:33 am on Feb 7, 2007 (gmt 0)

a{color:#03c; padding:.3ex .5ex; }
a:visited{ color:#639; }
a:active,a:hover,a:focus{ background:#06c; color:#fff; }

Shouldn't that a:hover be before the a:active?

Setek

5+ Year Member



 
Msg#: 3242275 posted 12:33 pm on Feb 7, 2007 (gmt 0)

Shouldn't that a:hover be before the a:active?

It doesn't matter when they're both assigned the same properties... does it?

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3242275 posted 3:25 pm on Feb 7, 2007 (gmt 0)

Shouldn't that a:hover be before the a:active?

It doesn't matter when they're both assigned the same properties... does it?

I think you are right P1R but as Setek said, if they have the same property I don't think it matters.

I'll change it to LVAH anyway

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 3:56 pm on Feb 7, 2007 (gmt 0)

I'll change it to LVAH anyway.

You meant LVHA didn't you? ;)

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 1:52 am on Feb 8, 2007 (gmt 0)

And to be quite correct, it's LV(f)HA. Not to mention the fact that you may sometimes want to distinguish between :link:hover and :visited:hover

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 2:30 am on Feb 8, 2007 (gmt 0)

And to be quite correct, it's LV(f)HA. Not to mention the fact that you may sometimes want to distinguish between :link:hover and :visited:hover

lol! As if LVHA wasn't enough? Now we have LVFHA? :)

I've not done anything with focus yet. Haven't seen a need to really. Care to share with us your insights on styling focus?

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3242275 posted 8:17 am on Feb 8, 2007 (gmt 0)

I'll change it to LVAH anyway.

You meant LVHA didn't you? wink

now you see why I got it wrong the first time ;)

Not to mention the fact that you may sometimes want to distinguish between :link:hover and :visited:hover

Whoa! never knew about this. Does it work in every browsers?

Care to share with us your insights on styling focus?

Sure. When you tab through your page, the focus stops on links. I use the :active to see which link in IE5, IE5.5 and IE6 and :focus to see the link in standard compliant browsers.

I did mention it above ;) [webmasterworld.com]

grandpa

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3242275 posted 9:07 am on Feb 8, 2007 (gmt 0)

I'm on dangerous ground here I know, but this is one of the few situations where I disagree with the common consensus about links, at least in part. I use a page header with general site links on each page, and those are all text-decoration: none. I do at least change color, black to blue or vice-versa. Why does it work then? I think part of the reason is because the page headers are consistent in appearance. The headers certainly have a cleaner look. I just don't believe that the usability has been significantly reduced. It's conceivable that some of my one-hit-wonders have left after taking one look and not seeing an obvious link. I would be very surprised to learn this was a significant number leaving for that reason.

There is little experiment underway right now on a couple of my pages. I've created some javascript/css non-underlined links across the top of the page that will allow people to essentially change the page view - to see another group of similar widgets. It's still a bit early to tell if this is effective, but my gut says it will work just fine.

Now, let me step back on some firm ground and say that 99% of the other links on my site are underlined. As a rule I do try to follow convention and, I do agree at least in theory about what has already been said. Sometimes though I've just got to be me.

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3242275 posted 11:32 am on Feb 8, 2007 (gmt 0)

I do something similar for the tabs across my own personal site, but they are also quite obviously links. Also, if a tab is selected, and a "sub-page" is selected away from that tab's index, the tab link turns blue and underlined.

One thing that I get pretty worked up about is a link to the page you are on still being active, so clicking on it reloads the page. I insist on deactivating "this page" links. Not just making them look inactive, but act like links when you mouseover, but make them actually inactive. This is not always easy to accomplish, which is why most sites simply opt for an appearance change, but there are things that you can do to accomplish this.

Here are the tricks I use:

1) Use a Dreamweaver template that has an editable region for the link. IN the selected page, remove the <a>nchor.

2) Use PHP to deactivate the link on a selected page.

3) Use JavaScript to do this (yuch)

4) There is a CSS way of doing this. Thus:

<body id="selected_page">
<div id="link_tab">
<div id="plain_text">The Link</div>
<div id="anchor_text"><a href="#">The Link</a></div>
</div>
</body>

With CSS thus:

body div#link_tab div#plain_text {display: none}
body div#link_tab div#anchor_text {display: block}
body#selected_page div#link_tab div#plain_text {display: block}
body#selected_page div#link_tab div#anchor_text {display: none}

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3242275 posted 10:05 pm on Feb 9, 2007 (gmt 0)

Not to mention the fact that you may sometimes want to distinguish between :link:hover and :visited:hover

Whoa! never knew about this. Does it work in every browsers?

Although slightly outdated, it does show how legacy browsers support (or not, as the case may very well be) such syntax. [dbaron.org...]

For what it's worth ... You should not simply use a:hover a:active, as this would match named anchors. Instead, you should use the following syntax for your links:

:link { /* styles here */ }
:visited { /* styles here */ }
:link:hover, :link:focus, :visited:hover, :visited:focus { /* styles here */ }
:link:active, :visited:active { /* styles here */ }

Reason? You only want the hover/focus/active link styles applied to elements that are truly links to begin with. Further, it is preferrable not to specify anchors, as the plan for future implementations is to allow links on non-anchor tags. :link and :visited is sufficient to distinguish links from non-links, regardless of element.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved