AccessibilityFocus

All users need to know where they are as they navigate their way through a document or web page, whether this is via keyboard or a mouse.

Focus indication

Keyboard users need to know where they are on the page, just as the mouse cursor does for mouse users. The way to show this is by ‘focus indication’. When you press the tab key and move through a page, you should see a highlighted box surrounding the element you’re currently focused on.

In the example here you can see which of the links is selected because it’s surrounded by a bright yellow box that looks very different to the content around it.

Visability and contrast

Make sure that focus indication is easily visible and clear to follow for all users. Aim for a contrast ratio of 3:1 between the focus indication box and:

• the surrounding content
• what the selected content looked like previously

This logout example shows bad focus indication. A thin blue line surrounds the selected button. This can be hard to tell apart from the already blue button, especially if the element is small.

A user would not immediately be able to pick this out as the focused element on a busy page.

When developing a service, setting a highly visible focus style effects many users. The default browser style is not sufficient to meet WCAG requirements for focus visibility.

Focus order

Keyboard users move through a page using a set range of navigation orders. It is not as easy to freely move about the page as it is with a mouse.

This means your content should be in a sensible order - normally left to right, top to bottom.

When you’re testing with the tab key, make sure that all interactive elements are selected and that you’re moving through the page in what you think is a sensible order. Your focus should not be jumping around the page.

When implementing modal dialogs, the focus order should be contained within the window until the user closes or dismisses it.

Good example

This good example shows the tab moves of a user. It sensibly moves through the search and popular sections before moving through the alphabetised columns of navigation items.

Bad example

This bad example shows irregular tab moves. The focus does not move in a left to right, top to bottom order - instead it jumps back up the page and from right to left. It also does not tab to all interactive elements in each section.

Find out more about WCAG success criteria on focus order.