This is the latest in my series of accessibility best practices after getting frustrated with using a keyboard on the internet. Last time I talked about enter submitting forms, this time I’m going to explain why removing the browser’s default focus outline is a bad idea.

Focus Rings

All browsers have a default value they apply to the currently focused item. For example Chrome on OS X uses the following:

:focus {
    /* -webkit-focus-ring-color = '#5B9DD9' */
    outline: -webkit-focus-ring-color auto 5px;
}

Firefox uses a 1px dotted #212121 outline, other browser use other values. The focus ring looks like this for Chrome on OS X:

Keyboard users depend on this outline to determine where they are on the page. I cannot stress depend enough, without the outline you have no idea where you are. Don’t believe me? Go to cnn.com right now. Hit tab a few times and try to figure out where the hell you are on the page.

The outline can be removed with the following:

:focus {
    outline: 0;
    /* or */
    outline: none;
}

This is obviously bad per the reasoning above. The HTML5 specification has the following to say about removing the default outline:

“…if an alternative focusing style isn’t made available instead, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.”

Custom Focus Outlines

As the spec mentions, you can create your own styling for focused items instead of using the browser’s default. For example the following will change all focused links to white text on a black background:

:link:focus, :visited:focus {
    outline: none;
    background-color: black;
    color: white;
}

Although this is possible, I would strongly recommend simply leaving the default browser outline in place. Changing the default display messes with a user’s expectations, which is a big usability no no. Furthermore, you need to make sure that whatever alternative you put in is sufficiently identifiable for users with reduced vision.

Why do People Want it Removed?

At the jQuery UI project we get a lot of requests to remove the browser default outlines from our widgets.

The most recent tickets have come from the slider and tabs widgets. This is what they look like on the latest Chrome on OS X:

Some people find this unsightly. Others are thrown off by the fact that the display varies on different browsers / operating systems. While these concerns are reasonable, they do not outweigh the importance of the outline for keyboard users and users with reduced vision.

jQuery UI does nothing to alter the browser’s default outline on these widgets and I encourage others to do the same.

CSS Reset

Unfortunately one of the reasons much of the internet removes the default focus ring is because the first version of Eric Meyer’s CSS reset included the following:

/* remember to define focus styles! */
:focus {
    outline: 0;
}

As you can see it’s made abundantly clear that you should define your own focus styles, but most people simply copied and pasted the file without realizing this.

The updated version of the CSS reset no longer features this, but sadly it’s a bit too late for a lot of sites.

Sigh.