Keep the focused element fully in view

How to do it

People who use a screen magnifier or a keyboard lose track of a control that is half under a sticky bar. Give scroll-padding the full height of every fixed bar, top and bottom, plus a margin. Never let a cookie banner or chat button float over content without reserving that space.

Examples

JavaScript example

const points = await page.evaluate(() => {
  const box = document.activeElement.getBoundingClientRect();
  const spots = [[box.left + 1, box.top + 1], [box.right - 1, box.top + 1], [box.left + 1, box.bottom - 1], [box.right - 1, box.bottom - 1], [box.x + box.width / 2, box.y + box.height / 2]];
  return spots.map(([x, y]) => document.activeElement.contains(document.elementFromPoint(x, y)));
});
expect(points.every(Boolean)).toBe(true);

Python example

points = page.evaluate("""() => {
  const box = document.activeElement.getBoundingClientRect();
  const spots = [[box.left + 1, box.top + 1], [box.right - 1, box.top + 1], [box.left + 1, box.bottom - 1], [box.right - 1, box.bottom - 1], [box.x + box.width / 2, box.y + box.height / 2]];
  return spots.map(([x, y]) => document.activeElement.contains(document.elementFromPoint(x, y)));
}""")
assert all(points)

How to check

A browser test tabs through each long page. document.elementFromPoint at the centre and at all four corners of every focused element returns the element or something inside it.

Sources

• WCAG 2.2 – 2.4.12 Focus Not Obscured (Enhanced)

Related rules

• AXS-14 Never hide the focused element in Accessibility