WCAG 2.2 Demo Suite

2.4.12 Level AAA Guideline 2.4 Navigable Added in WCAG 2.2 Not detectable automatically

Focus Not Obscured (Enhanced)

When a component receives keyboard focus, no part of it is hidden by author-created content.

Who this affects

Keyboard users, held to a stricter standard than 2.4.11 — partial obscuring also fails, so the whole focused control stays visible.

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.12

Open the failing example in a new tab

fail.html — the problem

<!-- The difference between the two criteria:
       2.4.11 (AA)  the focused element must not be ENTIRELY hidden.
                    Partly covered is acceptable.
       2.4.12 (AAA) NO PART of the focused element may be hidden.

     Here the sticky header clips the top few pixels of each focused link. The
     link is still partly visible, so AA is satisfied. AAA is not.

     Why the stricter rule matters: a focus ring that is half cut off is much
     harder to spot, especially for a low-vision user or anyone scanning
     quickly, and a clipped label can be unreadable. -->
<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" id="a">Music</p>

Meets 2.4.12

Open the passing example in a new tab

pass.html — the fix

<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" id="a">Music</p>

<!-- Practical guidance:
     - the cheapest way to pass both 2.4.11 and 2.4.12 is to have no sticky
       overlays at all. The second cheapest is to make them small.
     - if you keep them, set scroll-margin-top to the sticky element's height
       plus the focus indicator's outline width and offset.
     - re-test at 200% and 400% zoom. A bar that occupies 10% of the viewport
       at 100% zoom can occupy half of it at 400%, and a scroll-margin in rem
       will scale with the text while a bar sized in px will not.
     - dismissible banners are better than permanent ones: once dismissed they
       cannot obscure anything. -->

How to test it

As 2.4.11, but confirm no part of the focused element is covered at any point.

  • Automated

    Requires manual observation of 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