Focus visible

This information relates to criterion 2.4.7 Focus Visible, which states:

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

One of the aspects of this website that I've not been entirely happy with, is my focus indicator. The focus indicator enables a person navigating by keyboard (rather than with a mouse) to see where they are on the page.

What is the keyboard focus indicator?

If you only ever use a mouse to navigate, you may not have seen the focus indicator before. Load a page and then hit the Tab key. Maybe hit it two or three times. Watch the page. Can you see a box or some other indication that the focus is moving between interactive elements on the page?

How do you make the focus indicator visible?

Like many visual aspects of webpages, the focus indicator can be styled in your CSS. You need to think about the different kinds of interactive elements. These could include:

Let's try a few examples.

Plain black box

The BBC use a plain black box to show focus. It is clean and stylish. I find it fairly easy to see and track where I am on the page.

Let's create a few interactive elements and style the focus indicator with a black box. For the purpose of these examples, I have removed the hover indicator completely, so if you hover the mouse over them, there will be no visible change. They still work with a mouse though.

This type of focus indicator is used by the BBC Website Opens in new window.

CSS for plain black box

a.bbc:focus {
	border: solid 0.1rem #000000;
	background-color: #ffffff;
	padding: 0.2rem;}
	
button.bbc:focus {
	outline: 0.125rem solid #000000;
	outline-offset: 0.125rem;}
	
input[type=text].bbc:focus {
	outline: 0.125rem solid #000000;
	outline-offset: 0.125rem;
	background-color: #ffffff;}

Reversing colours

For some interactive components, it can be helpful to completely reverse the colours. This works well with links and buttons, but I couldn't get it to work well with a text box.

Here is a link to the Accessibility Manual Opens in new window with a reverse focus indicator.

CSS for reversing colours

a.reverse:focus {
	background-color: #0066cc;
	color: #ffffff;
	padding: 0.2rem;}
button:focus {
	background-color: #ffffff;
	color: #004080;}

Customised focus indicator

It would be hard to produce examples here, as there are unlimited options for customising the focus indicator. There is one thing to keep in mind though. This criterion states that the focus indicator must be visible. Although it doesn't state it, that really means it also has to meet contrast minimum. For interactive elements, this is a minimum contrast ratio of 3:1. Whatever focus indicator you create, ensure that it has sufficient contrast to be visible.

One of my next tasks will be to amend my focus indicator. I like the fact that it is easily visible but I don't feel like it has sufficient contrast, even though it technically passes. I have also been thinking about doing a colour rebrand, to incorporate the purple that is widely associated with disability. I might wait and do it all at the same time.

Clicky