Focus styles

Visible focus helps all users track where they are within pages.

Recommendations

Make focusable elements have a clearly identifiable visual style when they have focus.

Why it matters

Sighted keyboard users don't have the explicit association between pointer and content that pointing device users have, similar to someone navigating a television interface with a remote. So it鈥檚 important that they are aware at all times what element currently has focus and which element keyboard interactions will operate on.

Do not depend on a browser's default visible state for focus, for example it may not work with the page design in all browsers.

An element with focus should have a visual style that makes it clearly distinguishable from the surrounding content, even if the element was not previously in view.

Examples

Recommended:

<style>
    a {
        text-decoration: none;
    }
    a:focus {
        text-decoration: underline;
    }
</style>

Not recommended:

<style>
    a {
        outline: none;
    }
</style>

Testing

Use the tab key to move focus to each focusable element in a page and check that the visual style of the :focus state is distinguishable from the default state and surrounding content.

Note: to enable tabbing through all the elements in a page, you may need to adjust some OS and browser鈥檚 settings (see ).