Ensuring accessible focus indicators
Not all users navigate websites using a mouse or pointer. Many people, including those who use screen readers or have motor disabilities, rely on the keyboard only—and ensuring your website supports keyboard navigation is essential to providing an accessible experience. The global gold standard for digital accessibility, the Web Content Accessibility Guidelines (WCAG) include several criteria addressing keyboard access, such as WCAG 2.4.13 Focus Appearance (Level AAA).
In this article, we’ll explain what WCAG 2.4.13 Focus Appearance is, why it’s important, and how to successfully meet this criterion to provide a more inclusive web experience for keyboard users.
What is WCAG 2.4.13 Focus Appearance (Level AAA)?
WCAG 2.4.13 Focus Appearance (Level AAA) is a WCAG success criterion that addresses the appearance of focus indicators. A critical consideration for keyboard accessibility, focus indicators are elements that show keyboard users when interactive items on a webpage—like buttons and form fields—are in focus.
WCAG 2.4.13 explains that focus indicators must be visible, accessible, and easy to identify. Specifically, the success criterion states: “The focus indicator must have a minimum contrast ratio of 3:1 against adjacent colors and must be at least as large as the perimeter of the focused element.”
In simpler terms, this means that when a user navigates through a webpage using the keyboard, the focus indicator (such as a border or outline around the focused element) must be clearly visible and meet specific size and contrast requirements.
Key requirements for focus indicators
To conform with WCAG 2.4.13 Focus Appearance, your focus indicators must meet the following criteria:
- Minimum contrast ratio of 3:1: The color of the focus indicator must have a contrast ratio of at least 3:1 relative to the colors next to it. This ensures it stands out clearly from the background and surrounding elements.
- Minimum size requirement: The focus indicator must be at least as large as the edge of the focused element. For example, if a button has a perimeter of 120px, the focus indicator must cover an area equivalent to or larger than this.
These requirements may be met with either solid indicators (such as a solid rectangle around the focused element) or non-solid indictors (such as a dashed or dotted rectangle). If the focus indicator is not solid, the indicator must be thick enough to ensure visibility.
How to implement WCAG 2.4.13 Focus Appearance
If you’re ready to start improving focus indicator accessibility on your website, the following best practices will help you meet the requirements of WCAG 2.4.13.
- Design focus states for all elements: Ensure every interactive element in your design system (including buttons, links, form fields, and menus) has a defined focus state
- Ensure adequate contrast: Use tools like color contrast checkers to verify that your focus indicators meet the 3:1 contrast ratio requirement against adjacent colors.
- Adjust focus indicator size: If a focus indicator is too small, increase its thickness or size. For example, add a few pixels to its border thickness to meet WCAG 2.4.13’s perimeter requirement.
- Test with keyboard navigation: Try navigating through your website using only the tab key to ensure focus indicators for all interactive elements are visible and work as expected.
- Avoid removing default focus styles: Many browsers provide default focus indicators (e.g., a dotted outline). Avoid removing these styles unless you replace them with a custom focus indicator that meets WCAG requirements.
Common mistakes to avoid
Even well-meaning designers make mistakes when working to enhance keyboard accessibility. As you aim to conform with WCAG 2.4.13, avoid the following common pitfalls:
- Invisible or low-contrast focus indicators: Focus indicators that blend into the background can make it difficult for users to identify focused elements.
- Inconsistent focus states: Incorporating focus indicators with different styles across your website can confuse users. Ensure all interactive elements have a uniform focus state.
- Overly complex indicators: While creative focus indicators can enhance design, avoid overly complex styles that may reduce visibility or accessibility.
By conforming with WCAG 2.4.13 Focus Appearance (Level AAA), you can empower all users to more easily navigate your website—whether they rely on a pointer, the keyboard only, or some combination of the two. As a best practice for digital accessibility, designing clear focus results in a more inclusive, intuitive, and user-friendly website.
Remember, accessibility isn’t just about compliance—it’s about creating a digital experience that works for everyone. By implementing 2.4.13 Focus Appearance, you take a significant step toward achieving that goal.
