WebAIM Blog

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.