2.4.12 Focus Not Obscured (Enhanced)

1. What is the goal of this criterion?

Ever tried navigating a website with the keyboard, only to realize you no longer know where you are? It happens more often than you’d think – especially on modern sites with cookie banners, sticky headers and floating chat windows.

People who rely on the keyboard – because of motor disabilities, low vision or simply for practical reasons – need to see at all times which element has focus. When focus is covered by other content, they are literally left in the dark.

The goal of Success Criterion 2.4.12 is clear: when an element receives keyboard focus, no part of it may be covered by other content – the whole element must stay visible.

2. What exactly does it require?

It comes down to one simple rule: as soon as a user interface component receives keyboard focus, no content you created as the author may hide any part of it.

That means:

• Sticky headers and footers must not overlap focused elements, not even partly.
• Cookie banners must not cover any focused element – not even a corner of it.
• Floating chat windows or notifications must not cut into focused elements.
• Modal dialogs are fine: focus is inside the dialog, and the focused element is fully visible.

Difference from Focus Not Obscured (Minimum): the AA version allows a focused element to be partly covered – the stricter AAA version 2.4.12 requires it to be fully visible. Unlike 2.4.11, the normative text of 2.4.12 has no additional notes about user-movable or user-opened content.

Practical tip: content that users open themselves, like a drop-down menu, should still always close with Esc without moving focus.

3. Why does it matter for accessibility?

Imagine tabbing through an online shop to press the “Buy” button – but a cookie banner covers its lower half. With luck you can still see an edge of the focus outline, but not what the button says.

Fully visible focus improves accessibility because it:

• helps people with motor disabilities who can only use a keyboard or switches
• gives people with low vision orientation, especially when using magnification software
• helps people with attention or memory difficulties keep their place on the page
• supports voice control users who work with keyboard commands

And finally: fully visible focus improves usability for everyone – including people who only rely on the keyboard temporarily.

4. How to meet the criterion

The good news: small CSS changes often do the trick. Here are some proven tips:

Use CSS scroll-padding: this keeps browsers from scrolling focused elements behind fixed areas. Leave room for the focus outline itself, too:

html {
  scroll-padding-top: 6rem; /* header height plus room for the focus outline */
}

Cookie banners and notifications:

• Make them modal, so they have to be closed before moving on.
• Or place them so they don’t overlay any content, for example in the normal page flow at the top.

Avoid floating elements:

• Use position: sticky or position: fixed sparingly and only where it truly helps.
• Reserve space for important elements instead of overlaying them.
• Check whether fixed elements still make sense at high zoom – it’s often better to return them to the page flow on small viewports.

Chat windows and help widgets:

• Start them closed, as a small button that doesn’t cover anything.
• Let people close them with Esc.
• When open, they should take focus and hand it back when closed.

Testing:

• Tab through every focusable element – forwards and backwards.
• Look for any part of the element or its focus outline being cut off.
• Test at different zoom levels (at least 200%) and on small screens where space is tight.

5. Why this criterion matters for businesses

2.4.12 is a Level AAA criterion from WCAG 2.2 and not legally required under the European Accessibility Act or its German implementation, the BFSG – the underlying standard EN 301 549 requires WCAG 2.1 Level AA. If you meet it, though, you automatically meet the AA version 2.4.11 as well.

1. Reach more people

A website that works smoothly with the keyboard reaches more people: people with disabilities, older people, experienced keyboard users and people in special situations – like dealing with a broken mouse.

2. Cleaner interfaces

If you avoid overlaying elements, you almost automatically end up with a tidier layout. Everyone benefits, especially on small screens.

3. A better experience for everyone

Clear, fully visible focus makes your website easier to follow and more reliable. That means fewer drop-offs in important flows.

This section is general information, not legal advice.

6. The success criterion in the W3C’s words

Success Criterion 2.4.12 Focus Not Obscured (Enhanced) (Level AAA)

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

In short: when a component receives keyboard focus, no part of it may be hidden by the site’s own content.