Sticky bar hides the keyboard focus

Why does it matter?

Sticky headers, cookie banners and chat bars stay on screen while the page scrolls. When a keyboard user tabs to a link, the browser scrolls it just into view — and it can land right underneath the sticky bar, so they cannot see where they are. WCAG 2.2 asks that the focused item is never completely hidden.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Found by the keyboard walk (review mode's Keyboard tab, "Check keyboard access"). Each stop is focused and scrolled to the bottom and top edges of the window, where Tab and Shift+Tab bring it, and Lumtera checks what is on top of it at nine points. A fixed or sticky bar (a header, cookie notice or chat launcher) that covers every point is for review, with the bar's height, how many stops it covered, and a suggested scroll-padding value. A partly see-through bar gets its own message, for a person to judge.

Check ID page-focus-obscured, as shown in review mode and saved results.

How do I fix it in WordPress?

Add scroll-padding-top (or scroll-padding-bottom for bars at the bottom) to the html element in your theme's CSS (Appearance → Customize → Additional CSS, or the Site Editor's Styles), set to the bar's height plus a little, so the browser keeps focused items clear of the bar. For cookie notices and chat widgets, make sure they can be dismissed and do not cover content while open. To confirm, press Tab and Shift+Tab through the page in Firefox or Safari, which scroll focused items only just into view.

Example

.site-header { position: sticky; top: 0; height: 72px; }

html { scroll-padding-top: 80px; }
.site-header { position: sticky; top: 0; height: 72px; }

How do I check the fix?

1. Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.