Focus Appearance (WCAG 2.2)

Focus Appearance is a success criterion introduced in WCAG 2.2 under guideline 2.4 (Navigable). It addresses a long-standing gap in web accessibility by defining minimum visibility requirements for keyboard focus indicators. Previous versions of WCAG required that a focus indicator be visible (2.4.7 Focus Visible) but did not specify how visible it needed to be, leading to inconsistent and often inadequate implementations. The criterion at Level AA (2.4.11) requires that when a user interface component receives keyboard focus, the focus indicator meets two conditions. First, the focus indicator area must be at least as large as a 2 CSS pixel thick perimeter of the unfocused component. Second, the focus indicator must have a contrast ratio of at least 3:1 between its focused and unfocused states. The Level AAA version (2.4.13 Focus Appearance Enhanced) raises the bar by requiring a thicker indicator area and higher contrast, but most organizations focus on meeting the AA requirement. These requirements apply to all interactive elements that can receive keyboard focus, including links, buttons, form inputs, custom widgets, and any element with `tabindex`. The goal is to ensure that keyboard users, including people with low vision and people with motor disabilities who rely on keyboard navigation, can always track their position on a page.

Keyboard navigation is essential for many users. People with motor disabilities who cannot use a mouse, blind users navigating with screen readers, power users who prefer keyboard shortcuts, and users of assistive technologies like switch devices all depend on the keyboard to interact with web content. Without a clearly visible focus indicator, these users are effectively lost on the page. They press Tab and have no idea which element is now active. This is equivalent to a mouse user moving their cursor but having it be invisible. The experience is frustrating at best and makes applications completely unusable at worst. The problem has been widespread. Many designers suppress default focus outlines for aesthetic reasons using `outline: none` without providing a replacement. Others rely on subtle color changes that are invisible to users with low vision. WCAG 2.2 addresses this by establishing concrete, measurable requirements rather than leaving visibility to interpretation. From a compliance perspective, as WCAG 2.2 becomes referenced in legal frameworks, organizations that remove or hide focus indicators face increasing legal risk. Focus-related issues are among the most commonly cited problems in accessibility audits.

Implementing compliant focus indicators requires attention to both design and development. Here are the practical steps: **Use visible outlines with sufficient thickness.** A solid outline of at least 2 CSS pixels around the focused element is the most straightforward approach. For example, `outline: 2px solid #0056b3` creates a clearly visible indicator. Ensure the outline is not obscured by adjacent elements or overflow hidden containers. **Ensure adequate contrast.** The focus indicator must have at least 3:1 contrast against the unfocused state. If you use an outline, measure the contrast between the outline color and the adjacent background colors. For elements on varied backgrounds, consider using a dual-color outline (e.g., a dark outline with a light inner border) to maintain visibility everywhere. **Never remove focus styles without replacement.** The CSS `outline: none` declaration is acceptable only if you replace the default outline with a custom focus style that meets the criterion. A common pattern is: ```css :focus { outline: 2px solid #005fcc; outline-offset: 2px; } ``` **Account for all focused states.** Test focus indicators on every interactive element: links, buttons, inputs, checkboxes, radio buttons, select menus, custom dropdowns, modal dialogs, and any element with `tabindex`. Each must display a compliant indicator. **Use `:focus-visible` thoughtfully.** The `:focus-visible` pseudo-class shows focus indicators only for keyboard interactions, not mouse clicks. This can satisfy the criterion while addressing designer concerns about focus rings on click. However, verify that the resulting indicator still meets size and contrast requirements. **Test across backgrounds.** A focus indicator that works on a white background may disappear on a dark section. Test indicators across all background colors and images present on your site. The dual-outline technique (a light and dark border) provides resilience across varied backgrounds. **Avoid relying solely on color changes.** Changing only the background color or text color of a focused element often fails to meet the minimum area requirement. A perimeter outline is the most reliable method.