New CSS Technique for Focus Not Obscured: z-index focus modifier

[dav-idc]

I'm proposing a potentially unpopular CSS technique to meet the AAA level criterion, '2.4.12 Focus not Obscured (Enhanced)'.

As of the creation of this GitHub issue, there are no techniques exclusive to the AAA level of 'Focus not obscured'. The one technique offered, technique C43, is also applied to the AA level.

The problem

The AAA level criterion for 'Focus not obscured' has a very high standard for success:

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

This creates a difficult scenario, which doesn't yet appear to have a sufficient technique to solve it.
There's a chance to fail 2.4.12 any time that all the following are true:

• there's at least one 'pop-over' element
• the pop-over element is situated over top of 'body content' areas (basically, situated where it may overlap any flow content and not situated over a blank area)
• the pop-over persists without focus

When these 3 things are true, there's a chance that focused 'body content' elements become obscured by the pop-over element.

The solution

Basically: on focus, set the z-index really high for 'body content' elements in the given area.

This is a potentially controversial solution, but I believe it's worth considering due to the current absence of any alternative AAA-level 'focus not obscured' techniques.

Example CSS

.thing:focus {
    position: relative;
    z-index: calc(infinity) !important;
}'

Pros and cons

This works because:

1. it can be applied to a specific section of content (such as a side-navigation)
2. it will guarantee that the focused element is right on top, unobscured
3. it uses simple CSS properties and selectors

This might be controversial because:

1. playing with z-index when it's not necessary can be risky (at least, I am sensing a vibe that it's taboo to use z-index frivolously)
2. there's risks of broken interface if it's applied to a whole page / site
3. it requires careful implementation, since elements need a declared position property

Additional details

This solution requires all focusable elements which might be obscured by the pop-over element to have:

• a CSS position property (like position: relative or position: absolute
• a solid background of some type behind the text (like background: white)

It also requires careful selection of a z-index value. I tried various index amounts, to try and find a universally high enough value to override pop-over elements like chatbots, cookie banners, menus, etc. The only one that is guaranteed to work is pretty much just infinity. It seems ridiculous, but calc(infinity) might be appropriate to guarantee focus is never obscured.

Why is this only for the 'enhanced' level?

I believe this technique should be exclusive to the 'enhanced' level, because it specifically solves the problem of making sure no part of a focused element is obscured. This technique isn't really needed to meet the 'minimum' criterion, and would be a bit overkill for that level. There are other techniques, including the existing scroll-margin technique, that already work well for the AA 'minimum' criterion for 'focus not obscured'.

[dav-idc]

Use cases for this CSS technique

These are some of the main scenarios where I've bumped into this as a potential last-ditch plan to meet the AAA level of 'Focus not obscured'.

As with the 'problem' section above, the use cases occur when the following is true:

• a 'pop-over' element
• it pops over 'body content' areas
• the pop-over persists while other elements receive focus

Case 1: quick escape features

A 'quick escape' or 'exit this page' safety feature floats over top of sidebar navigation content on a mobile desktop.

The example image for 'case 1' is taken from a modified version of this GOV.UK Frontend review app page for the 'exit this page' component:

Image description: Screenshot of a GOV.UK Frontend sample 'review' page with a red rectangular 'exit this page' component on the right-hand side of the page. The 'exit this page' element floats above some sidebar content, including a paragraph with a link. It partially obscures the link which says 'Lorem dolor ipsum'. No element in the image is currently receiving keyboard focus.

Case 2: chatbot buttons and windows

A persistent chatbot window covers up a large amount of body content, including several focusable elements.

The example image for 'case 2' is taken from an unmodified version of this Cardiff Council chatbot informational page.

Image description: Screenshot of a Cardiff Council page with the 'BOBi' chatbot pop-over window expanded. The pop-over partially and fully obscures clickable social media icons, footer links, and an in-paragraph privacy link. The privacy link is currently focused, but only the top half of its red focus outline is currently visible.

Case 3: cookie consent banners

A persistent cookie consent banner pops over a large percentage of main page content, partially or fully obscuring several links.

The example image for 'case 3' is taken from an unmodified version of this McDonald's UK homepage.

Image description: Screenshot of the McDonald's UK homepage, before the cookie consent banner is dealt with. The consent pop-over fully obscures the width of the 1st leftmost column of page content, including images, paragraphs and a series of links. One link, "medium salad", is currently focused with a blue focus outline, but the bottom half of the link and focus outline are obscured.