Accessibility Tips

A collection of tips, guidance and practical suggestions in developing accessible websites

Aiding keyboard usage with :focus cues

By Isofarro on February 9th, 2009 - 3 comments

Knowing where the keyboard focus is at any time is critical for keyboard users to navigate through and to a particular page. It’s not only screen reader users who don’t use a mouse, many disabilities leave the keyboard as the only viable way to interact with a computer whilst still using a monitor.

The dotted outline on links is the main visual cue to where the current keyboard focus is on a page at any one time. By tabbing or shift-tabbing through the document the focus is set on the next or previous focusable elements.

This focus rectangle is removed because it makes things look unsightly, but they serve a very useful purpose. And that purpose is critical for a keyboard user to find their way through a page.

So it is essential that there is a clear focus indicator, both on links and form fields. Clear enough that a visitor looking at the page for the first time can spot where the keyboard focus is as quickly as possible.

We do this though CSS’ :focus pseudo-class on the target element. For example, to change the background colour of a link when it receives focus we use the following:


a:focus {
    background-color: #aaf;
}

We can do the same with input fields:


input:focus {
    background-color: #aaf;
}

In each case, the background colour of the focusable element changes colour when it received focus, and that background colour changes back when the element loses focus. By making this background color change enough it is possible for a visitor to find the focused region of the page.

The same argument can also apply to when links are active, using the :active pseudo-class. An active link is one that is in the process of being clicked, so for example when the mouse-button is being held down when over a link and just about to be lifted, this link is seen to be active. Using this active pseudo-class to style an element that is active provides a visible cue about what is going to happen.


a:active { color: red; }

And, we often overlook the usefulness of setting a visited link colour (with the :visited pseudo-class). This proves very helpful in distinguishing destinations a visitor has already been to, thus simplifying the choice of which link to try next.


a:visited { color: purple; }

A common pitfall is that certain browsers need these pseudo-classes in a specific order so as not to have one pseudo-class override the styles of another. The safest pseudo-class order is :link, :visited, :hover, :focus and then :active:


a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: magenta; }
a:focus { color: magenta; }
a:active { color: red; }

3 Responses to “Aiding keyboard usage with :focus cues”

  1. Excellent post! I think you forgot :focus in the list at the bottom. I think link, visited, hover, focus, active works best.

    I typically put my hover and focus styles together – there rarely a reason why they would need to be different:
    a:hover, a:focus { color: magenta; }

    Read about removing the focus indicator at http://webaim.org/blog/plague-of-outline-0/

  2. Jared, thanks for the corrections. I’ve made the necessary changes.

  3. 3 Priti Rohra says: December 9th, 2009 at 1:11 pm

    Several other user groups will benefit with the visual focus indications on web pages, such as low vision users, senior citizens and persons with cognitive limitations.

Add a comment or reply





Copyright © 2007 - 2009, isolani