Operable · 2.4 Navigable

Focus Not Obscured (Enhanced) WCAG 2.4.12 · Level AAA

When a component receives keyboard focus, no part of it may be hidden by author-created content. Unlike 2.4.11, even partial overlap by a sticky header, footer or other overlay fails.

Level
AAA
Since
WCAG 2.2
Principle
Operable
Guideline
2.4 Navigable
Try the live demo All criteria Checklist

Live demo

Tab down the address form

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Tab to move down the form. Watch the fields that reach the order total bar at the bottom, and check how much of each one you can see.

Live example

Passes

Delivery address

Order total: £86.40

What happened

    Why it passes

    Bottom scroll padding taller than the bar makes each focused field stop fully above it, so you can always see the whole field you are typing in.

    Why it fails

    The order total bar is shorter than a field, so a focused field is never completely hidden, but fields that land near the bottom lose their lower part behind it. That meets 2.4.11 and fails 2.4.12.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 5 lines

    Fails

    Short sticky bar that clips focused fields

    Live preview

    CSS
    .order-total {  position: sticky;  bottom: 0;  padding: 0.5rem 1rem;  background: #ffffff;  border-top: 1px solid #6b7280;}

    The bar is shorter than the form fields, so a focused field that ends up behind it is only partly covered. That passes 2.4.11 but fails 2.4.12, which allows no overlap at all.

    Passes

    Scroll padding taller than the bar

    Live preview

    CSS
    html {  scroll-padding-bottom: 3.5rem; /* the bar's full height plus a gap */}.order-total {  position: sticky;  bottom: 0;  padding: 0.5rem 1rem;}

    When the browser scrolls a focused field into view, it now stops the field above the bar, so no part of it is hidden (technique C43).

    02What changes 4 lines

    Fails

    Floating chat button over the corner

    Live preview

    CSS
    .chat-button {  position: fixed;  right: 1rem;  bottom: 1rem;  width: 3.5rem;  height: 3.5rem;  border-radius: 50%;}

    The round button covers the corner of whatever scrolls under it, such as the end of a focused text field. Most of a wide field stays visible, so 2.4.11 is met, but any overlap fails 2.4.12.

    Passes

    Room kept clear for the chat button

    Live preview

    CSS
    html {  scroll-padding-bottom: 5.5rem;}.chat-button {  position: fixed;  right: 1rem;  bottom: 1rem;  width: 3.5rem;  height: 3.5rem;}

    Bottom scroll padding larger than the button and its gap keeps any control the browser scrolls into view clear of the button.

    Why it matters

    Who it helps

    Seeing the whole focused component, not just a sliver of it, makes it much easier for sighted keyboard users and people using magnification to recognize what has focus and what it does.

    W3C: Understanding 2.4.12

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      New in WCAG 2.2, published in October 2023.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Tab through the page, including while scrolled and at narrow widths, and check whether any overlay covers any part of the focused element.
    2. Confirm every focused component is fully visible, with no edge clipped by fixed or floating author content.

    Common failures

    Where it breaks

    • A sticky header overlaps the top half of a focused link after the page scrolls.
    • A floating chat button covers the corner of focused form fields or buttons.

    Related