This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
What does a focus frame look like that really stands out?
The focus frame shows keyboard users where they are. Level AA (2.4.7) requires only that it be visible; A thin, pale frame fulfills this. Level AAA criterion 2.4.13 specifies measures: The focal frame encloses the element with a line of at least 2 CSS pixels thickness, and the area that changes at focus has a contrast of at least 3:1 between focused and non-focused states.
What the Criterion Requires
Two measures, both measurable. First, the area: the focal frame is at least as large as a 2 pixel thick outline around the element; An underscore alone or a 1-pixel frame is not enough. Second, the contrast: the pixels that change at focus differ from the state without focus by at least 3:1. A dark blue frame on a dark blue button falls through, a white frame with dark hem on each background exists.
A framework that works on any background
Because buttons can be light and dark, a two-color focus is successful: an outline of 2 pixels in a bold color with 2 pixels distance to the element (outline-offset) and an additional shadow in the counter-color. Thus, the contrast is maintained on light and dark surfaces. The default focus of the browser is often too thin or is removed from the stylesheet with outline: none; This ban is the most common reason for invisible focus.
This is how we deal with it
The measurement focuses each control element, compares the pixels before and after the focus, and measures the thickness and contrast of the change. This makes the criterion fully automatically testable; the level AA test (focus visible) provides the same data. The criterion belongs to the category AAA in knowledge; in the report, the thickness and contrast per reference.
Examples
Thin pale focal frame
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}At least 2 pixels outline, and the changed pixels differ from the unfocused state by 3:1. The white shadow keeps the contrast on dark surfaces.
- Remove each outline: none from the stylesheet, which does not immediately define its own focus.
- Define a global focus with:focus-visible: outline of 3 pixels, outline-offset of 2 pixels, in a 3:1 color to the background.
- Add a shadow in the counter-color so that the frame remains visible on light and dark surfaces.
- Go through the page with the tab key and check each state: menu, buttons, fields, links in the text.
