Focus on Style

Focus indicators help users who rely on a keyboard or assistive technology to navigate a page.  They help users know exactly where they are within a digital document or webpage and make navigating with a keyboard easier, just like a cursor does for mouse users.

Clear focus indicators can benefit people with ADHD, dyslexia, or similar conditions that significantly impact focus, attention, or memory. These indicators are also helpful for individuals with limited fine motor control in their hands, making it difficult to use a mouse effectively.

What Elements Can Receive Focus?

If an element responds to mouse clicks, it should also respond to keyboard interactions. And those elements can include:

• Links
• Buttons
• Form Fields
• Elements triggered by hover

Default Focus Indicators

Browsers have default focus indicators that show which element on a webpage has keyboard focus and can be interacted with. These indicators can vary by browser and operating system.

In addition, these default indicators may not be truly accessible. Unless you (or someone on your design team) tabs through the webpage and checks the visibility, size, and contrast, you may not even realize it. For that reason, it is recommended that you create custom focus indicators to ensure they meet the current WCAG standards.

Designing Custom Focus Indicators

In creating custom focus indicators, keep these WCAG success criteria in mind:

• SC 2.4.7: Focus Visible (Level AA)
• SC 2.4.13: Focus Appearance (Level AAA)
• SC 1.4.11: Non-text Contrast (Level AA)
• SC 2.4.11: Focus Not Obscured (Minimum) (Level AA)
• SC 2.4.12: Focus Not Obscured (Enhanced) (Level AAA)

Let’s look at each success criterion, what it means, and how you can comply.

2.4.7: Focus Visible (Level AA) - Focus must be available and visible.

"Mode of operation accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used." ~ W3C, Focus Visible

This criterion states that any keyboard-operable user interface must have a method for making the keyboard focus indicator visible.

This means, at minimum, letting the browser handle the visible focus and not removing the browser's default focus indicator through scripting.

How to Comply with 2.4.7

Don't remove the default focus indicator unless you provide an alternative keyboard focus indicator. Doing this removes “focus from the content entirely, which means that the content can only be operated by a pointing device such as a mouse.” This will cause non-compliance with

• 2.1.1: Keyboard
• 2.4.7: Focus Visible
• 3.2.1: On Focus

Here is where it gets a little confusing. Since focus indicators are non-text visuals, they must also comply with 1.4.11 Non-text Contrast -

"In combination with 2.4.7 Focus Visible, 1.4.11 Non-text Contrast requires that the visual focus indicator for a component must have sufficient contrast against the adjacent colors when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author."

The difference between Focus Visible and Focus Appearance is that "Focus Visible requires that a visible focus indicator exists while a component has keyboard focus; Focus Appearance defines a minimum level of visibility." ~ Understanding SC 2.4.13: Focus Appearance (Level AAA)

SC 2.4.13: Focus Appearance (Level AAA) - Color contrast and size considerations

Note: This criterion is only applicable if the developer changes the default focus indicator's size and color. 

According to SC 2.4.13, a keyboard focus indicator is visible when it’s at least as large as the area of a 2 CSS pixel thick perimeter of an unfocused component and has a change of contrast between focused and non-focused states of at least 3:1.

How to Comply with 2.4.13  

Size: The criterion does not require that the focus indicator be exactly 2 CSS pixels thick, but it does require that it be at least 2 pixels thick.

The easiest way to comply with 2.4.13 is to create a 2 CSS pixel thick, solid line around the element of focus. This example is from Understanding SC 2.4.13: Focus Appearance (Level AAA) .

Contrast: One of the easiest ways to create a focus indicator with proper contrast is to create a two-color focus indicator with sufficient contrast against any solid background.

Choose two colors that have at least a 9:1 contrast ratio to each other. That will guarantee that at least one of those colors will meet the 3:1 contrast requirement with any solid color background. 

Some color combinations that have a 9:1 contrast ratio are

By the way, a black background with a white foreground (text, for example) has a 21:1 contrast ratio.

Although 3:1 is the minimum contrast ratio, the greater the contrast between states, the easier it is for users to see the focus indicator. Designers and developers are encouraged to make the change-of-contrast ratio as high as possible.

SC 2.4.11: Focus Not Obscured (Minimum) (Level AA) - focus indicator is at least partially visible

Because some responsive website designs can be complex, this guideline permits focused elements to be partially covered by other content. While the element may not be entirely hidden, visibility decreases as the overlap increases. Designers and developers should minimize instances where focused elements are partially obscured. Ideally, focused elements should be fully visible at all times.

For example, in the image below, the red arrow points to where the focus indicator highlights a news item in the list, but the messages list partially obscures the news items list.

How to Comply with 2.4.11

As previously discussed, minimizing instances where focused elements are partially hidden is essential. To achieve this, eliminate or use sparingly the two primary causes:

• non-modal dialogs
• sticky headers, and footers

Focus on Testing

To ensure optimal accessibility and user experience, test all focus indicators. Verify that:

• you can access all interactive elements using the keyboard.
• focus indicators are present and visible and have proper contrast.
• that focus indicators are the proper size.
• that no focused element is obscured by author-created content.
• when the focus is placed on each element, it remains there until the user moves it.
  

Also, test your content with different web browsers and operating systems. Pay special attention to user interface components, including form elements, user login fields, and hyperlinks.

Incorporating clear and accessible focus indicators is fundamental to creating an inclusive web experience. By understanding the importance of these visual cues and following the guidelines outlined in this post and the W3C guidelines, you can ensure that your website is navigable and usable for everyone, regardless of their abilities.

Resources

• Never remove CSS outlines
• The Importance of Accessible Focus Indicators
• A Complete Guide To Accessible Front-End Components
• Avoid Default Browser Focus Styles
• A guide to designing accessible, WCAG-conformant focus indicators