Sticky bar can hide the keyboard focus

Why it matters

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 Lumtera flags

Checked in review mode's Whole page tab. It finds fixed and sticky bars at the top or bottom of the screen, then works out, for a sample of up to 80 links and controls, where the browser would scroll each one when it receives keyboard focus. A bar is reported when a sampled item could end up completely behind it. Nothing on the page is actually focused or scrolled, so confirm the result by tabbing through the page.

How to 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 to check your fix

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered 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.