Focus indicator pitfalls

During an accessibility audit of our new design system, I started spiraling about focus indicators. There are a bunch of WCAG success criteria that need to be considered in order to meet compliance. Surprisingly, a lot of famous design systems (I'm looking at your Material Design) have focus indicators that do not pass the criteria -- Especially for how much Google advocates for accessibility. But anyway, let's get into it.

First off, what is a focus indicator?

A keyboard indicator is a visual indicator that "highlights" what item on the webpage is receiving focus, commonly presented as a colored outline around that element. The purpose of these indicators is to give the user guidance as to what they are interacting with on the page. Imagine a world where you can't see your mouse cursor. Pretty frustrating right?

All web browsers offer default focus indicators, though most accessibility experts recommend creating custom ones to better fit the needs of your website. This, however, introduces some complexity for getting them right. So what do you need to do in order to create an accessible focus indicator?

Focus indicator success criteria

Couple notes before I dig in here:

• I'll be focusing on A and AA success criteria only since these are considered the gold standard.
• I know the WCAG 2.2 draft has criteria to address focus indicators, but since these aren't published yet, I also won't be addressing these.

2.4.7 Focus visible

We'll start with the most obvious success criteria related to focus indicators: 2.4.7 focus visible. This success criteria requires indicators to simply be visible. The requirements provide no guidance on what makes something visible. Which brings us to the next applicable success criteria...

1.4.11 Non-text contrast

This guy requires that the color of the focus indicator outline must have a 3:1 contrast ratio. The colors involved in that ratio depend on where your focus indicator is in relation to the UI element.

Focus indicator outside

Most commonly you will see the focus indicator appear on the outside of the component, not touching it whatsoever. This means the indicator only needs sufficient contrast against the adjacent background - no dependences on the element's color. In the example below, the indicator's color (#273F94) has a 9.43:1 contrast ratio against the background color (#FFFFFF), which would meet this success criteria.

Focus indicator inside

I'm not a regular user of focus indicators, but I have never seen this approach before! In this scenario, the indicator needs at least a 3:1 contrast ratio of the adjacent color of the UI element. In the example below, the color of the indicator has a 3.43:1 contrast ratio with the element's background color (#1AAAC9), which would meet this success criteria.

Focus indicator border

When the focus indicator is a border (either inside, center, or outside) it needs to have sufficient contrast against both the background and the component's color. The focus indicator in the example below passes contrast with both the white background color as well as the button's light blue background. If I were using the example below in my design, I might consider increasing the width of the indicator to make it more noticeable against the blue background.

Focus indicator partially inside, partially outside

Again, not a focus indicator pattern I've seen before, but now that I've mocked it up I kind of like it. Reminders me of some icon libraries that have subtle colors outside the lines. For this use case, the focus indicator's color must pass a 3:1 contrast ratio with either of it's adjacent colors.

Focus indicator border next to an already established border

And lastly here is the scenario that initially caused my spiral into this topic. My design system uses buttons that already have a border. When those buttons received focus, the border would then simply increase in stroke width. In order to pass this requirement, the focus indicator needs to have sufficient contrast with the background (#FFFFFF in the example below) and it's adjacent color, the original button's border. Below, the original border's color (#12798F) only has a contrast ratio of 1.86 with the focus indicator's color (#273F94) which does not meet the 3:1 requirement. We have a couple options to fix this issue: we can remove the original border, change the color of either borders, have our focus indicator sit outside of the component, etc.

Focus indicator that changes the color of the component

The 1.4.11 success criteria does not mention any requirements around differences between focused and unfocused states. So if a focus state relies only on a change of color (the example below shows the background color change) there are no requirements for the difference in contrast between them. However, this does not pass the next criteria I'll discuss, Use of Color.

1.4.1 Use of Color

This success criteria requires that color must not be used as the sole method for distinguishing visual elements (like focus states). This means, changing the background color alone to distinguish the focus state would not pass this success criteria. You would need to add an additional element that is visible and meets 3:1 contrast ratios.