Home | All Questions | alt.html FAQ > Client-side Navigation Scripting

How do I remove the dotted focus box around links?

The dotted rectangle around links is a cue to the visitor which link currently has the focus. It is an accessibility feature added by Microsoft to permit the browser to be used entirely from a keyboard without using the mouse. Some users prefer to surf this way, or have handicaps that make mouse-based navigation difficult or impossible. If you use JavaScript to defeat this feature, the users who want or need to navigate by keyboard will be compelled to disable JavaScript to use your site.

If however you insist that the focus box be removed, then there are two ways of going about it.

The right way

The right way involves not making it impossible for a keyboard user to navigate your site:

 <a href="page.html" onclick="this.hideFocus=true;"
  onblur="this.hideFocus=false">

This is better as this lets the user see the focus indicator before they activate the link, only hiding it when it's clicked, and then reseting so it will appear visible next time you tab to it.

The wrong way

The kludgy way of disabling the focus box is by putting in a JavaScript "onfocus" event that calls the "blur()" function to remove focus from the current object; but there are a lot of users who will be annoyed if you do this.

Recommended Resources

Discussion

Related Questions