• 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 

.room-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
}

Why it matters

Tabbing down the room comparison table, a row's Select button scrolls to sit right beneath the sticky header, which then covers it entirely.

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

scroll-margin-top on the focusable row keeps it clear of a sticky ancestor when it scrolls into view.

.room-table tbody tr {
  scroll-margin-top: 48px;
}

Outcome

A guest tabbing through the room table always sees the full row they're currently on.

Who is affected

Keyboard users comparing rooms lose visibility of the exact row they're focused on partway through the table.

Learn more

Related scenarios