The release of WCAG 2.2 introduced two new level A success criteria and four new level AA success criteria.  In this post, I provide a summary of Success Criterion 2.4.11, Focus Not Obscured.

Success Criterion 2.4.11, Focus Not Obscured

The primary goal of this success criteria is to ensure that when an element has keyboard focus, it is at least partially visible. Clearly, if users can’t see the focused item, navigating forward is going to be difficult. This is particularly critical for those reliant on a keyboard, or any device operating via a keyboard interface – like a switch or voice input. It is also critical for users with cognitive or memory impairment.

Given the prevalence of complex responsive website designs today, this criterion acknowledges that there may well be times when a focused component is not fully visible; so, rather than saying that it must be fully visible, it stipulates that it must be at least partially visible. The ideal situation would, of course, be for all focus components to be entirely visible – and indeed this is required for WCAG 2.2 AAA compliance.

Sticky headers, footers and non-modal dialogs

Common culprits include sticky footers, headers, and non-modal dialogs (non-modal dialogs allow users to interact with other objects outside the dialog without closing it.). As visitors tab through the page, these layers can obstruct the item in focus, along with its focus indicator.

For example, a cookie banner would fail this Success Criterion if it completely obscures the focused component. Remedies could include requiring that the user dismiss the cookie banner before continuing to navigate the page. Or the issue can be remedied by incorporating scroll padding to prevent overlap with other content.

What is scroll padding?

By setting scroll padding, developers can ensure that when the browser scrolls to a specific section of the page, there is some additional space added around it. The additional space creates a buffer zone, preventing the content from being hidden behind fixed elements like headers. It ensures that the content is visible and not obscured by other elements on the page. You will find an example of how it works on the ‘CSS scroll-padding Property’ page of the W3 Schools website.

When the focus item is obscured by semi-transparent content

If the item obscuring the item in focus is semi-transparent, i.e. the user can still see the item in focus that that is not considered a checkpoint fail – unless the contrast between the item in focus on the visible background is below the minimum contrast ratio.

Exceptions to criteria: 2.4.11, Focus Not Obscured

There are some exceptions to this criteria. If the ‘in focus item’ is obscured because the user moved a content region over it – then that is not considered a fail.

Secondly, if the focus element is obscured by something the user opened themselves – and they can dismiss that item again – that is not a fail. For example, a drop-down menu on the navigation bar is opened by the visitor and is then dismissed when choosing an item from the menu closing the menu.


Further information can be found at W3C Focus Not Obscured (Minimum) (Level AA).

Accessibility auditing and consultancy

I provide comprehensive digital content accessibility consultancy services, including an accessibility auditing of your websites and documents – measured against the WCAG 2.2 standard. Get in touch to ensure your content is accessible to your widest possible audience and meets equality legislation requirements.

Related Content

  • Website Accessibility Auditing Service – for WCAG 2.1, WCAG 2.2 Compliance
    Richard Morton is a member of our website accessibility audit team "A large proportion of my work over the last six years has been web accessibility auditing, using the Web Content Accessibility Guidelines (WCAG 2.1 & WCAG 2.2).I do manual testing, using the standard browsers, and light tools like the AIS ...
  • About Web Designer and Accessible Website Design Specialist Jim Byrne
    A passion for equality and accessibility Decades before he became an accessible website design specialist, Jim started his working life as a computer programmer in 1979 using 'miniframe' computers that had LP (a long player record) sized 'not very floppy disks'. The disks needed to be screwed into a large cabinet ...
  • Website accessibility Services
    Amflify Change We contacted Jim and his team to audit our old website in preparation for a brand refresh and website redesign, and to do an accessibility audit after the redesign process. From the beginning of our collaboration, Jim was thorough and clear with his findings and provided additional support and ...

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course. Video image from Web Accessibility Online Training Course - WCAG 2.1 Compliance

Working with non-profits, charities, voluntary and public sector organisations and social enterprises for over 20 years. Jim set up one of the worlds first website accessibility web agencies in the mid 1990s.