Why the focus indicator is important

This video explains why the focus indicator is important and how to make it accessible. Why the focus indicator is important


Hi, I’m Kate from Nomensa and today I’ll be talking about the focus indicator – why it’s important, and how to make it accessible.

All major browsers provide a default visible focus when certain elements on the page, such as anchor and input elements, are active or focussed on. However, a lot of websites override this in order to show no visible focus, often because people don’t like the look of the default indicator surrounding focussed-on elements. This can make navigating a page extremely difficult for anyone using a keyboard to browse pages.

Let’s take a look at a sample web page on which the focus indicators have been removed. To a person able to use a mouse, navigating the page is no problem and they can easily see whereabouts they are on the page. However, many people, such as those with motor disabilities, are unable to use a mouse, and instead use a keyboard to navigate web pages.

I am now tabbing through the page, but it is impossible to see which element is being focussed on. Any person could find navigating a site with focus indicators removed extremely difficult, or even impossible, and so may be put off using the site altogether. Now let’s try tabbing through a web page which still has the focus indicator intact. As I tab through the page, it is now quite easy to see the location of the element currently receiving focus. However, for people with mild visual impairments, or when some form fields such as checkboxes are highlighted, it can still be difficult to locate the focussed-on element. This is why it is important to create a focus indicator that has a high contrast against the background colour. This can be done by removing the default focus indicator in the CSS file by setting the outline to none, and then adding on focus styles.

Finally, let’s have a look at a web page that implements a highly visible focus indicator. In this case, we have changed the colour of the link text, and added a 2 pixel border to the checkboxes and button when they are receiving focus, using a colour which provides a large amount of contrast with the background colour. Implementing this technique will ensure that all users will be able to determine their location on a page when using a keyboard, and also that your site complies with the WCAG success criterion 2.4.7 – Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. It is also important to note that form controls must be implemented according to HTML specifications in order to ensure that they will actually receive focus.

Add a comment

Fields marked with an asterisk (*) are mandatory.