I am seeing an increasingly alarming trend in the implementation of CSS on web sites – the inclusion of outline:0 or outline:none.
The outline CSS property allows you to define the visual outline that displays when elements are selected or have focus. Otherwise known as the focus indicator, it is seen as the dotted lines that surround links and buttons when you tab to them with the keyboard.
In some rare instances where designs are rigidly defined with pixel precision and when the browser improperly changes the size of an element when the outline appears, pages can break (even though the CSS spec indicates that the outline should take no space). In other cases, designers are annoyed by the fact that the focus indicator remains visible when a user activates a link and then returns to the original page. As a result, developers are more and more removing the outline behavior from their page elements. By doing so, they can make it nearly impossible for sighted keyboard users to effectively navigate the page.
For example, try to navigate cnn.com in Firefox while using only your keyboard. There is no visual indication of which link currently has the keyboard focus because the outline and the text-decoration for links have been removed. The result – total keyboard inaccessibility. I am beginning to see this very regularly across the web even though most browsers now properly implement CSS outlines.
The prevalence of this is increased by the inclusion of outline:0 in many CSS reset files, such as Eric Meyer’s CSS Reset. It applies outline:0 to all page elements. While he clearly indicates that focus styles should be re-implemented,…
/* remember to define focus styles! */
:focus {
outline: 0;
}
… the inclusion of outline:0 in the default code does not provide anything useful. This recommendation is almost always either misunderstood or ignored as evidenced by the many sites that use this code as is. Simply changing the focus code to outline:1px would result in better accessibility and understanding.
If a linked image already provides a visual indication of focus (with either CSS or scripted image replacement), the focus indicator may not be required. And sometimes a linked element contains content that is positioned off-screen, resulting in an overly large focus indicator. You can also provide focus indication using any number of styles (change the background, add a border, etc.) in place of or in addition to the outline property. The WebAIM site underlines and changes the background color for focused links, in addition to maintaining the default outline.
In most cases, particularly for text links, it is vital that visual focus indication be provided. The use of outline:0 or outline:none is not recommended. In almost all cases, this CSS can be removed from links with absolutely no impact on the layout or functionality of the site, but with the result of increased accessibility.
The dotted line can’t be seen by the most visually impaired people. On some backgrounds I also can’t see them (I’m 40+). Often the dotted line surrounds a bigger area then the width of the link, especially on floating link list items.
The better way then this dotted line is defining CSS for hover and focus states of links with an underlining and/or changing colour/contrast or whatever shows an explicit changed link state.
You should have it for the simple reason of making it easier for those without a pointing device, say on a laptop. Great tip.
RE: Rainer. Some modern browsers allow user style sheets. If you can’t see the outline, I’d suggest using a user style sheet to make it more visible. 🙂
This is good info — I hadn’t noticed this when using a reset.css.
Well, I’m kind of late to the party, but my $.02 are that sometimes the intent of the designer is that there be no visual trash on the screen. IMO, the W3C failed by limiting our choices of outline value properties. If they want designers to stop doing this, then add the url() value to this property, and perhaps even allow a pointer to a function to enable the designer to indicate the selected state in whatever way they choose. It looks really really stupid when you have a triangle (e.g., a “prev/next” arrow), and the browser throws a rectangle around it. In other cases, like where you have a series of tabs, but some disabled, the outline can create a confusing indication of state by staying there when the user clicks on a disabled tab.
Mark Pilgrim wrote a GreaseMonkey script with CSS code which makes focus very easy to spot. It can also be used in a user stylesheet in Firefox.
http://diveintomark.org/archives/2006/04/25/new-focus-indicator
What I’ve been experimenting lately is keeping the default :focus styling and using:
:active {
outline:0;
}
Mouse users don’t get the outline, but keyboard users do.
a:hover,a:active {outline: none;} is better
html:hover a {outline: none;} kills the outline no matter where the mouse is in relation to the link once it has been clicked, but mouse users who also navigate via keyboard could be confused 🙁
Sometimes I use a background color to indicate the focused element, if I really need to remove the outline.
Harald-
Please note that background color alone is not sufficient for linked images (which cannot present a background). It also does not work if the user overrides page colors, something quite common for users with low vision. This is why WCAG 2.0 requires a non-color designator – typically the introduction of the underline – on both focus and hover states of non-underlined links.
Just what I was looking for. Why not to use it, as me, in .body a{} for example.
Hi
I am just reading your page and you refer to cnn.com and that you can’t navigate it using the keyboard. THey may have updated their site as you can now navigate using the tab key and the name of the link appears in the lower part of your browser. If you hit Return it takes you to the page.
Jafooooli-
This assumes that your browser displays this information and that the user can scan back and forth between the page and the status bar and that the user isn’t using magnification that might make this very difficult. The point is that allowing the focus indicators directly at the focused link location rather than forcing the user to reference the URL of the link in the status bar (which often is not terribly useful) provides much better accessibility.
CNN.com still does not provide this functionality.
I do know that absolutely there are problems with outline:none being used inappropriately and http://outlinenone.com does a good job of linking to some of these issues.
I do think though that if you provide enough visual cue’s for keyboard only users to be able to easily locate themselves that one not always rely on the browser to implement it best.
Focus should be the responsibility of the user agent, not the webpage author. Outline none should only be used when you have a RIA with ARIA and advanced javascript fulfilling the role described.