Using CSS focus pseudo class

Focus is one of the lesser used Cascading Style Sheets (CSS) pseudo-classes. People familiar with CSS should be aware of the more commonly used pair, link and visited, but will often find that the focus and active pseudo-classes have been missed out. This article aims to explain why they are important and how they can be used to enhance your site.

So what is focus?

The focus pseudo-class is a dynamic selector that allows certain elements to be styled when they gain focus. Dynamic is the key word here, as focus can be used to change or render the element differently in response to an action from the user.

For example, one such “user action” would be to tab through links on a page using a keyboard. This effectively moves the focus from one element to another.

A link that has focus is often depicted in many browsers by outlining the element with a dotted-border. The focus pseudo-class is applied to the end of the element in the CSS, for example:

a: hover, a:focus {text-decoration: none;  }

So why use it?

CSS pseudo-classes are very straight forward to utilise and when used correctly, can greatly enhance your site. The chances are your site already has a styled hover state for your links, but up to now the focus pseudo-class has largely been overlooked.

Still not convinced? Ok, let’s take a closer look at some of the reasons why it can be important to include.

Firstly, you need to appreciate that not everybody uses the same input devices and control methods to navigate a website. While many users will interact using a mouse, it is important to take into account those using a keyboard or other devices. In practice, this often means that any implied functionality or dynamic change to the content works for a keyboard user. Therefore, something as simple as a hover effect on a link to make it more visually distinctive should and can be reproduced using the focus pseudo-class.

Another reason to use the focus pseudo-class is to improve upon the accessibility requirements of the Web Content Accessibility Guidelines (WCAG) 2.0. WCAG 2.0 were recently released as the recommended accessibility guidelines from the W3C. The WCAG 2.0 guidelines have been in development for some time and unlike version 1.0, include a checkpoint relating specifically to keyboard focus:

Checkpoint 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Default web browsers, including Firefox and Internet Explorer, try to address this checkpoint by outlining any element that has focus with a dotted line. However it is not uncommon for some developers to remove this outline, as it can produce a large, undesired dotted box effect that can overlap other elements on the page.

Removing this outline and not providing a substitute would fail checkpoint 2.4.7 and make it almost impossible for a keyboard user to trace what element has focus.

So rather than simply relying on the browser to do its own thing, why not use the focus pseudo-class to enhance this technique further, providing a distinctive visual indicator for a keyboard user.

It’s not working, why?

Now that we have discussed how to use focus and why it is important, it is now helpful to briefly mention another pseudo-class that is used in close relation to focus. You may find there are some inconsistencies in how browsers render the focus pseudo-class. For example, Internet Explorer 7 and below, does not natively render focus. Therefore the active pseudo-class needs to be included to produce the same effect for Internet Explorer users.

Strictly this pseudo-class becomes active for a brief moment when the element has been clicked and ends when the mouse button is released. Because the time an element is active for is normally very brief, you will often find both the focus and active pseudo-classes are used to apply the same styling in CSS.

We now have a style that is applied to an element that is hovered, focused on or currently active:

a: hover, a:focus, a:active {text-decoration: none;  }

However, there is no reason why the same styling should be applied for all of the dynamic states. They can be targeted specifically to provide a different experience for keyboard or mouse users.

Why not take this further?

Focus can be used on its own or in combination with the hover and active pseudo-class to aid a keyboard user, going beyond what a browser may implement by default. Here are some examples of how it can be used:

Emphasising focus

If you are not satisfied by the browser default outlining an element with focus, you can place more emphasis on them using CSS. The Haringey Council website applies a very different style to the links, when tabbing through the page.

Toggling visibility

There is no reason why you cannot use focus to create an effect that may be of particular use for a keyboard user. For example, skip links are not something your average user will find useful. However they can be extremely helpful for a user who is tabbing through the page. Using the focus and active pseudo-classes it is possible to hide content visually until they gain focus. An example of this in action can be found on the Soundtalking website.

This means the skip links do not impact on the design but still have the functionality they were intended for.

Something a little different

Finally, we will end on a nice feature used on the Barcham Online website. A small but effective CSS technique is used for the product photos, which makes the image increase in size when the image is hovered over or gains focus. This not only acts as a visual aid, but also added a nice touch to the product preview page.

To conclude, the focus pseudo-class can be used to create a variety of different effects, from a subtle styling change to a more obvious element toggling its visibility on the page. Just remember, you are trying to make your site more accessible for its users, so think carefully about where you want to use the pseudo-class and try not to overdo it.