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.
All browsers have a default value they apply to the currently focused item. For example Chrome on OS X uses the following:
1 2 3 4
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.
outline can be removed with the following:
1 2 3 4 5
This is obviously bad per the reasoning above. The HTML5 specification has the following to say about removing the default
“…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:
1 2 3 4 5
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?
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.
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:
1 2 3 4
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.