This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Accessibility
Why should a focused element never be concealed?
Anyone who goes through a page with the keyboard must see where the focus is. Adhesive header bars, cookie banners and chat windows over the content; The focus lands underneath and is invisible. Level AA (2.4.11, new in WCAG 2.2) requires that the focused element remains at least partially visible. Level AAA criterion 2.4.12 requires: fully visible, no pixel obscured.
What the Criterion Requires
When an item receives keyboard focus, no part of it is behind any other content the author has generated: no sticky header or footer, no cookie banner, no chat button, no reference window. When changing focus, the browser scrolls only so far that the element enters the visible area; He knows nothing of those who are above it. The side must therefore itself ensure that the area under an adhesive strip is kept clear during scrolling.
Implementation
The CSS property scroll-padding on the scroll container reserves up and down as much space as the adhesive strips are high; the browser then scrolls out focused elements under the bar. Windows lying over the side capture the focus (focus remains in the window) or close when the focus enters the side. A chat button in the corner remains small or moves aside when focusing on an element below.
This is how we deal with it
The measurement passes through the page with the tab key, measures the visible portion for each focused element and compares with adhesive elements; Partially visible for level AA, fully visible for AAA. The same measurement provides both values. The criterion belongs to the category AAA in knowledge; the report contains the hidden share per reference point.
Examples
Focused field half under the chat button
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }At level AA, part of the focused element must be obscured, and no pixel on AAA.
- Set scroll-padding top and bottom to the height of your adhesive groin.
- Allow cookie banners and reference windows to capture focus until they are closed.
- Go through each template with the tab key and observe the focus frame; It must not disappear anywhere.
- Keep floating buttons (chat, up) small and at a distance from the edge.
