Removing the Dotted Outline from Focused Links
June 16th, 2006Have you ever noticed the dotted outline that appears around links as you click on them? That is an accessibility feature for people who can't use the mouse for whatever reason. It is supposed to show where the current focus is when you use the TAB key to move through a document, and does a fantastic job.
But why does it appear when you are using the mouse to click on a link?
This naturally subtle visual cue has become a convention across all browsers, gently reassuring the user when they have successfully clicked on a link. Without it, users will try again to click a link thinking they missed it—and if the server isn't immediately responsive they assume the browser is frozen and contemplate closing it.
But for a designer this happens to be particularly annoying on image links, when the dotted focus remains even after you have clicked the link and moved your mouse away from it.
While I am an advocate of using JavaScript to remove the dotted focus from links onMouseDown or onMouseOut, but I would not recommend removing the dotted focus entirely. You still need it to be there when people are using the keyboard.
Remember: This is an accessibility feature, and people who can't use the mouse for whatever reason depend on it. You know, people who eat and surf the web, like me.
Enough banter, show me the code:
<script type="text/javascript">//<!--
var runOnLoad = new Array(); // for queuing multiple onLoad event functions
window.onload = function() { for(var i=0; i<runOnLoad.length; i++) runOnLoad[i]() }
// hide dotted :focus outlines when mouse is used
// but NOT when tab key is used
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('A')) {
a[i].onmousedown = function() {
this.blur(); // most browsers
this.hideFocus = true; // ie
this.style.outline = 'none'; // mozilla
}
a[i].onmouseout = a[i].onmouseup = function() {
this.blur(); // most browsers
this.hideFocus = false; // ie
this.style.outline = null; // mozilla
}
}
//--></script>
Alternatively, you could remove the dotted outline entirely in favor of a different visual cue. Maybe even one that matches your design. I've experimented with color, backgroundColor, and font-size and they were all pretty cool.
Posted in: JavaScript
February 9th, 2007 at 05:14 AM
Nice tip.
February 9th, 2007 at 05:15 AM
Sweet.
February 16th, 2007 at 23:57 PM
I was just writting about this other day... and with jQuery! $("div.navigation a").each(function(){this.onmouseup = this.blur();});
February 18th, 2007 at 23:39 PM
nice
March 25th, 2007 at 07:16 AM
That's awesome. I love little features such as this. Thank you
April 29th, 2007 at 05:53 AM
i wonder if this can be changed from my browser if yes it will be great coz its annoying ever since i converted to Firefox i have seen it
July 20th, 2007 at 12:54 PM
This seems to do a good job: http://sonspring.com/journal/removing-dotted-links
October 10th, 2007 at 12:55 PM
Great!!! Nice effort to make it out with out compromising accessibility.
November 1st, 2007 at 10:23 AM
cool tip man.. make this blog more informative.. :)
November 4th, 2007 at 05:52 AM
cool !
November 12th, 2007 at 15:01 PM
thanks!
December 11th, 2007 at 09:39 AM
Nice code dude, may uses it sometime. LD
December 18th, 2007 at 06:31 AM
I also can not mmake it work, any idea what can go wrong? i copied and pasted the code above inside my html head but gives no result...
December 29th, 2007 at 13:04 PM
Great post! Will be sure to share with everyone at my Florida web design....thanks
August 26th, 2008 at 17:49 PM
check this out:
a {
noFocusLine:expression(this.onFocus=this.blur())
outline:none;
}
September 27th, 2008 at 21:28 PM
Without JavaScript the best way to disable the dotted outline is tu enter following tags in CSS:
*:focus { outline: none; }
*::-moz-focus-inner { border: none; }
and then change every
*:hover { ... }
into
*:hover, *:focus { ... }
and you will be able to browse through links by tab key.
December 6th, 2008 at 21:25 PM
Great job!
you can simply remove the outline form your button ,
you can use onfocus="this.blur();"
Post new comment