I don't think it is good idea to use alternative styling for focus outlines. People who prefer navigating with their keyboards rely on their browser's native outline style for feedback. If you really must remove the outline, do it for hover and active states only, and leave the focus styling to the browser:<p><pre><code> a:hover, a:active { outline: none; } /* Requires IE > 6 */
</code></pre>
See Patrick Lauke's article for more tests and reading: <a href="http://people.opera.com/patrickl/experiments/keyboard/test" rel="nofollow">http://people.opera.com/patrickl/experiments/keyboard/test</a>
Deriving authority for this statement form Eric Meyer is misleading. Eric didn't say don't use outline: none, he said make sure you have focus styles.<p>Browser defaults are ugly and inconsistent. Ordering designers everywhere to not override that is like telling Picasso to paint realistically because some people find his work inaccessible.<p>Asking designers nicely to make sure they have elegant focus styles is both appealing to their ability and sensibility without insulting their creativity.
yesterday I was in the position of having to download the driver software for the logitech unified remote receiver in order to get my mouse working.<p>While I had a working keyboard, there was no way to move the mouse cursor.<p>I was wondering where the focus rectangle had gone and now I know. Very timely submission indeed.<p>In the end, I had to temporarily plug another mouse to actually navigate to the driver download page.
I like this trend of making single-page domain names out of what would just be a blog post advocating something with clear points and logic. They feel like they'll have more impact when linking someone to them.
This is why I love Opera's shift+arrow navigation. There's a large outline that's added by Opera regardless of the style, and it's much more visually intuitive than tabbing along.
I'm sure the author means well, but I doubt this passive approach (where everyone else has to fix the problem) combined with the irritating, holier-than-thou tone will get much traction.<p>A little greasemonkey script to add outline, along with some visual examples of would be far more effective way to advocate the issue.
That's a pretty poor title for an article.<p>It's a naive to blame it on the outline property. You can do whatever you want with the outline, just remember to make it do something else when it receives focus.<p>This applies both to input boxes as well as <a> tags.<p>I have a default styling when I code PSDs into HTML/CSS that makes all a:focus elements have an opacity of 0.8. It doesn't look as bad and insures that all <a> elements will have a focus behavior.
In theory, HTML5 (in the loose, HTML+CSS+JS sense) should reduce the need for outline:none. Before, it was necessary because any input using an image (for rounded corners, box shadows, etc) would look horrible with it.<p>Now, however, a majority of common input styles can be done using CSS- which is compatible with the browser's default outlining.
<i>Usually "design vanity" or total ignorance of accessibility.</i><p>That's a pretty ignorant statement intended as fact. When designing and developing applications with advanced functionality, it is sometimes necessary to override the outline in favor of the intended user functionality. That is why you can set outline to zero or none.<p>Just peruse jQuery and stop being a standards fascist.