By AltGrade Editorial · Reviewed by AltGrade · Last updated

Fix obscured focus

A sticky header can cover the link someone just tabbed to.

They cannot see the focus.

Steps

  1. Tab down a long page.
  2. Watch the sticky header.
  3. The focused item should not be fully covered.

Failing example

The skip target sits under the sticky header.

Better example

scroll-padding-top matches the header.

Shopify

Set scroll-padding-top in the Shopify theme CSS to the sticky header height.

WooCommerce

Do the same for a sticky WooCommerce add-to-cart bar.

WordPress

Offset anchors in the WordPress theme.

Wix

Do not let a Wix banner cover focused links.

WCAG

Shopify steps · Shopify · Missing alt text