Accessibility finding
A sticky header, banner or chat button hides the focused element or catches clicks meant for a link
Accessibility Error Severity: Medium
Part of the audit Interactive states and flows. Finding id: accessibility.overlayCoversFocusOrClicks.
What it costs you
Content that floats over the page hides what visitors need to see or press.
What to do
Leave room for the sticky element (scroll-padding-top for a sticky header), move it out of the way of content, or make it smaller on small screens.
What it checks
- Keyboard position hidden by overlay
- Click blocked by overlay
How to fix it
Keep floating content off what visitors need
- For a sticky header, set scroll-padding-top on the html element to the header's height, so focused and linked elements scroll into view below it.
- For a chat button or a promotion bar, place it where it covers no links, or let the visitor close it.
- Tab through [page url] and tap the covered links on a phone to confirm.
How to check: Recrawl: the overlay no longer covers focused elements or links.