Home Categories JavaScript JavaScripts Special Effects Tutorial

Hiding the Browsers Focus Borders. Should I, Or Shouldn’t I?

Not rated
Rate:

Cody Lindley
May 24, 2006


Cody Lindley
www.codelindley.com

Cody Lindley has written 1 articles for WebKnowHow.
View all articles by Cody Lindley...

I’m not sure how this will jive with the accessibility minded folks, but I must admit I am just sick and tired of those pesky dotted borders. The dotted visual clutters up the presentation. I know, when using a keyboard instead of a mouse this dotted indicator is useful in order to visually tab select linked elements in a webpage. However, I’m convinced that with certain layouts and CSS trickery (Image replacement techniques) it can become rather confusing to have the dotted borders appearing. To a certain extend, I think it can even effect the user experience.

For instances, things really get bad in some browsers when you use the popular image replacement technique from Mike Rundle ( http://phark.typepad.com/phark/2003/08/accessible_imag.html )to hide text by moving it off the screen with a negative text indent. When this technique is used a dotted box appears around not only the visible image, but also the text that is indented. This will often cause (Mozilla) a gigantic dotted box to appear over the content as it attempts to focus the indented text. The focused element gets lost. So, in this scenario it would seem the borders used to show browser focus become useless. Don’t get me wrong, I’m not saying the image replacement technique is rotten. Heck, I’ve use this technique for some time now. It’s great! What I am saying is those pesky borders can cause visual confusing, instead of help the user determine visual focus.

Another example of the unwanted borders showing up is when you fire an event that does not refresh the webpage. This is pretty common nowadays with all the transparent calls to the server happening (AJAX). Without a page refresh, the browsers focus remains on the elements that fire browser events. For example those little icons used to expand and contract (plus and minus icons) hidden content will receive focus until the user fires another event. These borders can often change the visual appearance of icons and images. This might be a little nit-picky but it just bugs the heck out of my when the visual layer changes without my consent.

So, because I’m such a control freak when it comes to the visual layer I have decided to eliminate the dotted borders when possible. With Mozilla based browsers this is pretty simple. In your global CSS file simply place the following declarations.

:focus { -moz-outline-style: none; }

In IE, it’s of course not as simple as adding a CSS declaration. To hide the borders in IE you’re going to have to add the following attribute and value to link elements that you don’t want to receive the dotted borders.

<a href="" onfocus="this.hideFocus=true;">link</a>

Now if you’re like me, adding an attribute to each and every link sounds very unpleasant, for many reasons. Most of all, it makes maintaining client side code more complicated. With this in mind I decided that it would be simpler to write some Javascript that would add this attribute and value to all the links in a html document. You can check out the working example, or preview the Javascript below.

//Find all link elements and add an onfocus attribute and value
function hideFocusBorders(){
var theahrefs = document.getElementsByTagName("a");
if (!theahrefs){return;}
for(var x=0;x!=theahrefs.length;x++){
theahrefs[x].onfocus = function stopLinkFocus() {this.hideFocus=true;};
}
}


-------

This article is published under a Creative Commons License.


Add commentAdd comment (Comments: 1)  
Title: Thanks June 22, 2007
Comment by Jereme

Thank you so much for this. As a fellow control freak I am so happy to get rid of the dreaded dotted borders.

Jereme
www.jeremehancock.com

Advertisement

Partners

Other Resources