WCAG 2.2 Demo Suite

2.4.11 Level AA Guideline 2.4 Navigable Added in WCAG 2.2 Not detectable automatically

Focus Not Obscured (Minimum)

When a component receives keyboard focus, it is not entirely hidden by author-created content such as a sticky header, footer, or cookie banner.

Who this affects

Keyboard users who Tab to a control that scrolls under a sticky header and disappears. Focus is technically there but invisible, which is equivalent to having no focus indicator.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.11

Open the failing example in a new tab

fail.html — the problem

<!-- FAILURE: a tall sticky header and a fixed cookie banner. Tabbing down the
     list scrolls the focused link to the top of the viewport, where the header
     covers it completely. Focus is there; the user simply cannot see it.

     This is why 2.4.11 was added in WCAG 2.2. A perfectly good focus indicator
     satisfies 2.4.7, and the user still cannot tell where they are. -->
<div class="sticky-bar">Riverline Books — free delivery over £25</div>

<h1>Browse by subject</h1>
<p class="long"><a href="#a">Archaeology</a></p>
<p class="long"><a href="#a">Biography</a></p>
<p class="long"><a href="#a">Cookery</a></p>
<p class="long"><a href="#a">Drama</a></p>
<p class="long"><a href="#a">Economics</a></p>
<p class="long"><a href="#a">Fiction</a></p>
<p class="long"><a href="#a">Geography</a></p>
<p class="long"><a href="#a">History</a></p>
<p class="long"><a href="#a">Illustration</a></p>
<p class="long"><a href="#a">Journalism</a></p>
<p class="long"><a href="#a">Linguistics</a></p>
<p class="long"><a href="#a">Music</a></p>
<p class="long" id="a">Natural history</p>

<div class="cookie">We use cookies. <a href="#a" style="color:#9ec9f5">Manage preferences</a></div>

Meets 2.4.11

Open the passing example in a new tab

pass.html — the fix

<!-- FIX 1: scroll-margin keeps focused elements clear of the sticky header.
     FIX 2: the cookie banner is in the normal flow rather than fixed to the
     bottom, so it cannot cover anything. If a banner must be fixed, dismiss it
     on first interaction, or make it short enough that it cannot fully cover a
     focused control.

     Note the AA threshold: the focused element must not be ENTIRELY hidden.
     Partially covered still passes at AA - it takes 2.4.12 at AAA to require
     that no part of it is obscured. -->
<div class="sticky-bar">Riverline Books — free delivery over £25</div>

<h1>Browse by subject</h1>
<p class="long"><a href="#a">Archaeology</a></p>
<p class="long"><a href="#a">Biography</a></p>
<p class="long"><a href="#a">Cookery</a></p>
<p class="long"><a href="#a">Drama</a></p>
<p class="long"><a href="#a">Economics</a></p>
<p class="long"><a href="#a">Fiction</a></p>
<p class="long"><a href="#a">Geography</a></p>
<p class="long"><a href="#a">History</a></p>
<p class="long"><a href="#a">Illustration</a></p>
<p class="long"><a href="#a">Journalism</a></p>
<p class="long"><a href="#a">Linguistics</a></p>
<p class="long"><a href="#a">Music</a></p>
<p class="long" id="a">Natural history</p>

<div class="cookie">We use cookies. <a href="#a" style="color:#9ec9f5">Manage preferences</a></div>

<!-- Test this at several zoom levels. A sticky bar that covers 15% of the
     viewport at 100% zoom can cover 60% of it at 400%, so a layout that passes
     at your desk can fail badly for the user who needs magnification. -->

How to test it

Tab through the page slowly with sticky elements present. Confirm the focused control is never completely covered. Test at several zoom levels, since sticky bars take proportionally more space when zoomed.

  • Automated

    Requires tabbing through with sticky content rendered and checking overlap geometry.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification