WebsightWhat it asks for, in plain English
When a keyboard user tabs to something, they need to be able to see it. Sticky headers, fixed footers, cookie banners, chat bubbles and toast messages all sit on top of the page, and when the browser scrolls a focused link into view it can land exactly underneath one of them.
At this level the rule is that the focused element must not be entirely hidden by content you put on the page. Partly covered is allowed here (fully uncovered is the AAA version). Content the person opened themselves and can close, such as a menu they dropped down, does not count against you while it is open.
This is new in WCAG 2.2. The fix is usually scroll padding equal to the height of the sticky bar.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.11 page has the full intent, techniques and definitions.
Who it affects
A sighted keyboard user tabs to a link that scrolls into view behind the sticky footer and sees nothing, so presses Enter on a mystery.
Someone with low vision using zoom has a sticky header that takes half the screen and hides most of what they tab to.
A person with a cognitive impairment loses track of where they are every time focus vanishes behind the cookie banner.
Example
The fourth link scrolls into view directly under the cookie bar. It has focus, and you cannot see it.
The scrolling area stops above the bar, so the browser scrolls the fourth link into view where you can see it. On a normal page, scroll-padding-bottom on the html element does the same job.
Show the markup behind both examples
<style>body{margin:0;padding:14px;font-family:system-ui;font-size:15px}p{margin:0 0 8px}a{display:block;color:#1d4ed8;margin:0 0 10px}a:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}.bar{position:fixed;left:0;right:0;bottom:0;height:52px;background:#111827;color:#fff;padding:14px;box-sizing:border-box}</style>
<p>Click here, then press Tab four times:</p>
<a href="#">Breads</a><a href="#">Cakes</a><a href="#">Orders</a><a href="#">Contact us</a>
<div class="bar">We use cookies. Fine?</div><style>body{margin:0;font-family:system-ui;font-size:15px}main{height:calc(100vh - 52px);overflow:auto;padding:14px;box-sizing:border-box}p{margin:0 0 8px}a{display:block;color:#1d4ed8;margin:0 0 10px;width:max-content}a:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}.bar{position:fixed;left:0;right:0;bottom:0;height:52px;background:#111827;color:#fff;padding:14px;box-sizing:border-box}</style>
<main><p>Click here, then press Tab four times:</p>
<a href="#">Breads</a><a href="#">Cakes</a><a href="#">Orders</a><a href="#">Contact us</a></main>
<div class="bar">We use cookies. Fine?</div>How to check it
- Tab through the page with any sticky header, footer, cookie banner or chat widget showing.
- At each stop, check you can see at least part of the focused element. Watch especially for the first link after the header and the last few before the footer.
- Open a toast or notification and tab around while it is on screen.
- Repeat at 200 percent zoom, where sticky bars take up far more of the screen.
What Websight checks for 2.4.11
Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.
Only a person can check this. A scanner does not scroll or focus, so it cannot see what sits on top of what. Websight lists it in its manual checklist.
Practical tips
- Set scroll-padding-top and scroll-padding-bottom on the html element to the height of your sticky bars.
- Keep sticky bars short, and let the person dismiss cookie banners and chat bubbles.
- Put toast messages where they do not cover the content, such as a corner, and let them close on Escape.
Other criteria in guideline 2.4, Navigable
- 2.4.1 Bypass Blocks (level A)
- 2.4.2 Page Titled (level A)
- 2.4.3 Focus Order (level A)
- 2.4.4 Link Purpose (In Context) (level A)
- 2.4.5 Multiple Ways (level AA)
- 2.4.6 Headings and Labels (level AA)
- 2.4.7 Focus Visible (level AA)