This is one of the small things that really makes a difference the problem as mentioned in the article is that designers/developers add in the CSS reset without even thinking about what it does. Eric Meyers reset is great but all too often it is added but as it is not understood, will not be touched or modified.

That is why I think focus outlines should not be reset and I hope that he changes it. It then forces the designer or developer to actively suppress the outline and that is a concious decision rather than one of ignorance.

Great article. Its something that I’ve seen discussed a few times and definitely needs a solution. After attempting to implement this on a dev site I have to say your proposed method for suppressing it works amazingly, except when dealing with clicks that initiate Javascript actions on a specific page. As you are not leaving, and you do hover off the focus outline is returned.

The best thing you might have said though, that for some reason had never occurred to me is to design specific focus styles or use your hover styles which may end up being the best method.

One thing that surprised me is the number of times I see people using sites with their keyboard in everyday life – so its something that applies to everyone, not just people that navigate by keyboard out of necessity. It is a vital piece of a stylesheet, and the lack of :focus style often annoys me on sites (when I have a sandwich in my mouse hand!)

Matt is absolutely right. More and more users are using keyboard navigation, often to avoid RSI with a mouse. Also, users with non-touch mobile devices or web tv often tab through links to get around.

Just a quick tip: `outline: none;` can be shortened to `outline: 0;`.

I’m glad too see this article here, too, Patrick. It’s amazing the number of sites who don’t set :focus styles (especially those powered by Eric Meyer’s reset style sheet).

I admit I’ve done it in the past purely for aesthetic reasons but back then I knew nil about accessibility (not that I know a lot now, though).

It was great reading this article. I don’t have to use a keyboard out of necessity, but I often choose to. Turning on Firefox’s “start searching when you start typing” makes keyboard navigation in websites a breeze. Type what you see, hit enter, boom. It frustrates me when people turn off the :focus because of aesthetics, because I too often use the tab and shift+tab in addition to the above technique to surf a page.

Oh, it’s worth mentioning that the title was nicked from a conversation ages ago with the lovely Veeliam … cheers fella.

Nice article!

Did you manage to remove the inner outline in buttons with Firefox? I just tried *:active::-moz-focus-inner { border: 0; } but it seems like buttons keep focus after clicked and thus i didn’t manage to detect whether it’s a tab or click focus.

It would be great if we could achieve the same result with those pesky buttons.

Definitely cool trick. I never in the past considered this like a usability problem who need to be resolved. Now I have the awareness and I will implement this in my CSS Projects.

Thank you.

Great article, Patrick. This is one of the details that most web developers don’t pay attention to, even though it’s a big usability win.

The “Outline suppressed, reintroduced on :focus, suppressed on :active” example looks very interesting in case you want to reduce the outlines to a minimum for users that don’t need it, while maintaining its functionality for others.

Good article. I recently gave myself a kick up the rear to tighten up my accessibility-minded process on projects – and :focus was one of the issues I addressed.

The other was how my site looked and functioned with all images disabled – another consideration that often slips the net.

Good reminder, Pat. I think you hit upon the easiest solution in your final sentence: “if you’re already defining some fancy styles for :hover, by all means feel free to also make them display on :focus)”.

At Clearleft we do tend to turn off outline for focus states, however we also always include styles for hover states, so our rule is: wherever you have a:hover also include a:focus.

Thanks, Patrick, a great reminder :-)
I am defining my :focus but you’ve made me think again, will need to reconsider how exactly I do this. So thanks ;)

I’m glad someone actually wrote an article on my favourite CSS pet peeve.

I would go further and say I actually like to have an outline on :focus even for when I’m using a mouse, and I’m particularly happy that the outline becomes visible when using the Back button (because then is when I really need/want it).

I use this to keep :focus outlines from being too distracting for mouse users:

function hideOutlines() {$(“a”).click(function(e){this.blur();});}

great, a nice clear article! exactly what i need, i was just diving into making the outline work as i wanted. this is one of those little things that make a website complete

Good point. I hadn’t thought of using existing :hover styles as :focus styles.

(A little late, I know, but just found and bookmarked this)
Often, esp with image replacement, I’ll remove the outline, and then importantly (!!!) make hover and focus styles the same. Also, focus outline is only removed selectively, rather than on all anchors or whatever.

Whatever I’m using to give visual feedback to the mouser, the keyboarder gets it too. If I’m changing colour and underlining something, focus does that too. If I’m using Gilder-Levin image replacement, or similarly funky setups where there’s real text under an image, I still have text-related styles (either change colour or add/remove underline or whatever) and again, it’s for both focus and hover. Active tends to end up in my stylesheets more for IE6 than for actual :active states.

So, really, the point is visual feedback. If you have strong visual feedback going on for :hover and it’s a focusable element, you should be able to safely remove outline so long as :focus sits in the same declaration as :hover. Less Ugly, same feedback.

Brilliant article, Patrick – many thanks!

Just wanted to point out that, thanks to some recent bug fixes in Opera, I’ve updated my experiments to find a Better CSS outline suppression