Don’t remove the outline from links

I came across an web page (I don’t link) that had removed the outline from all links. Why? I don’t know. Maybe because it looks nicer. By removing the outline, however, an accessibility problem occurs.

But first, what are the outlines? And how to remove them? Outlines are the gray dotted borders around links, buttons and input elements that indicate where the focus is. To remove them, the CSS property outline needs to set to none. Example: a:focus {outline:none;}. Some CSS reset methods also remove the outline. Not all browsers support this property, but quite a few do.

The problem you get when you do remove the outline, is quite simple. If you don’t use a mouse to navigate, but instead use the keyboard, you cannot navigate easily. Because you use the tab-key, you don’t know which link you are when you hit tab. As alternative you only can see the URL in the status bar (not ideal, is it?).

It can become even worser when the page uses the tabindex attribute to mess up the default order. I have never believed in the usage of that attribute, since you simply need to place the elements in the order you want in the source. With CSS you can visually place them almost anywhere you want.

Conclusion: just not remove the outline. Your page looks the same, and everybody is happy.

Posted on Monday, November 12th, 2007 in CSS, Accessibility, Browsers, Usability, Design
Comments and trackbacks are welcome.

16 responses to Don’t remove the outline from links

Yeah, nice point of view. I also mostly remove the outline, but never thought that it could be a handy feature :-)

And reading this I would say that you should give the outline a more clear style, so it is much better visible
Arjan Snaterse said on November 12th, 2007.
Very true.

The temptation to remove them comes from weird outline behaviors when certain image replacement techniques are put to use. Specifically, if someone uses text-indent:-9000em; for a span. The outline wants to encompass the full width of that negative indent, with odd results for anyone paying attention.

But I agree that doesn’t warrant removing the outlines. I’d much rather keep a keyboard user happy than have customized focus states.
Tony White said on November 12th, 2007.
Don’t understand why a (web)developer does this. I’m not a webdeveloper but I do write software. When a textbox e.g gets focus in a program, I give it another color.
Christophe said on November 12th, 2007.
I’m not entirely against it, if a custom :focus state is specified. Of course this custom focus state should be just as clear or clearer than the default outline.

Luckily most browsers that support outline also support the :focus pseudo-class (or is it pseudo-selector?), so in my opinion a developer is not irresponsible by default when removing the outline.
Harmen Janssen said on November 13th, 2007.
@Tony white: a simple overflow hidden on the specific anchor element will fix the stretching outline.

Thx Arjan btw, forgot outline was still in my global reset on my website :D
Wolf said on November 13th, 2007.
@ Arjan.
Giving a clearer style is much better than completely remove it. Read more at Anne’s blog.

@ Tony and Wolf.
I don’t recommend using a negative text-indent for image replacement. Read the blog post on that subject.

@ Harmen.
Point is more that removing the outline will not work if you only specify it for the a-element. You need to specify the :focus pseudo-class.

By the way, pseudo-selectors don’t exist, only pseudo-classes and elements.
Arjan Eising said on November 13th, 2007.
Argh, you’re right, got my terminology mixed up :p
By the way, I believe a { outline: none; } works fine…
Harmen Janssen said on November 13th, 2007.
Exactly in which situation do you browse with CSS off and images on?
Wolf said on November 13th, 2007.
@ Wolf.
Do you mean CSS on and images off? It sounds silly to say we must prepare a web page for users that might have disabled displaying images. But if the visitor has images turned off, the page is very inaccessible (if you use a negative value for text-indent). As discussed over there, other image replacement methods handle the images-turned-off-problem better.

@ Harmen.
You might be right. I see Firefox removes the outline. I can’t test Konquerror (The KHTML-parser also supports outline), and Safari is like Opera (you can’t use tab for links, correct me if I’m wrong).
Arjan Eising said on November 13th, 2007.
@Arjan: that;s what I meant.

So blind and low-vision users browse with css on and images off? Don’t think so. These users browse with CSS off and images off.
Wolf said on November 13th, 2007.
Arjan, as I mentioned in the comments on my blog, when using -9999px for image replacement, the outline extends to the left to contain the entire element, however instead of doing outline:none you can do overflow:hidden and have the outline not extend all the way to the left. Also with a clear a:focus and a:active defined you can use outline:none and not have any accessibility issues. It is up to the developer to utilize all techniques together to create a well designed and easily accessible website.
Zak said on December 10th, 2007.
If the problem is only the accebility with tab key at a visual level, you can always define the same styles attibutes as the hover for the links. I always the define my styles for hover, active and focus together so they can always behave the same. I mean, If you define a style for focs and active states so the user can see where is the focus, thats alright, you use ort not the dotted outline.
But, if there is a problem on crossbrowser compatibily when this attribute is set, it must not be used (those dotted outline it´s not big deal to get in a compatibility trouble). I dont know if there is an issue related to it, despiste that visual fact of tab key.
Hernan said on January 11th, 2008.
@ Hernan. Thanks for your input. It is good to also declare a focus and active state for your links. What I mentioned in my article is just completely ignoring the accessibility, and go for the designers mode.
Arjan Eising said on January 11th, 2008.
All valid points. The exceptions are:

Web application elements.

i.e. I’ve got a piece in some software I’ve written that has a “record” button, nice and embossed. When clicked it indents and the record circle turns from grey to red until clicked again. The outline drives me nuts because it doesn’t look right and nobody is going to be tabbing through my buttons (buttons don’t get “tabbed” onto anyway).

Pixel Perfect Designs:

Some of the stuff I’ve built is designed down to the last pixel, when an element gets the outline it causes an overflow and the whole design blows up. Again, this is in a web app where tabbing through the app doesn’t make sense. (Ever used photoshop with just your keyboard?)

Again, I agree, but I just wanted to throw out a couple exceptions.
Ryan said on September 5th, 2008.
Curious - how can I remove this from my Flash (embedded with swfObject)? As in, I want to keep it for when users tab through the buttons/fields within the Flash, but now when they click anywhere the outline goes around the entire SWF. This only happens in FF3 from what I’ve seen, but that’s my browser and my client’s as well…

Pls contact me if you know what’s going on… Thanks!
Nate said on September 9th, 2008.
Ryan: Buttons get tabbed. If you aren’t able to do that, you cannot acttiave it with your keyboard. Also, outlines don’t mess up a layout (they aren’t borders).

Nate: Sorry, I don’t know anything about that. Please check the developer section on Adobe.com.
Arjan Eising said on September 14th, 2008.

Respond

Wordpress and Akismet powered
Syndication feeds: RSS & Atom
Contact information

Pages

Feeds

Categories

Archives

Don’t remove the outline from links

16 responses to Don’t remove the outline from links

Respond