Removing the Dotted Outline from Focused Links

mikesmullin — Fri, 16 Jun 2006 19:23:37 -0600

Have 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.

posts on "JavaScript"

Removing the Dotted Outline from Focused Links