Success Criterion 2.4.11
Conformance level AA

Sticky Table Header Covering the Row That Currently Has Focus

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

A hotel booking site's room-selection page

What’s wrong

Sticky table headers or toolbars fully covering focused rows/cells when scrolled into position.

Example

.sticky-header { position: sticky; top: 0; } /* covers focused fields below it */

Why it matters

Sighted keyboard users when sticky chrome would otherwise hide the focused control.

How to test

Tab to a control while scrolled past a sticky header/toolbar: if the sticky element fully covers the row/cell that currently has focus, it fails.

How to fix

The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays. .input-field { scroll-margin-top: 80px; } /* clears the sticky header on focus */ A focused element must not be entirely hidden behind sticky headers, footers, or other fixed content.

Outcome

On a hotel booking site's room-selection page, this barrier is gone for sighted keyboard users when sticky chrome would otherwise hide the focused control — they can complete the task without hitting this wall.

Who is affected