Main website
Government Drupal Developers NetworkCommunity

AccessibilityAccessibility

WCAG 2.2 'Focus Not Obscured': our sticky headers are failing audits

Started by Sophie Nguyen on · 421 views · 4 replies · 12 likes

SN

Sophie NguyenGroup leadStarted the thread

Accessibility Specialist, Digital Transformation Agency ·

Our latest audit failed 2.4.11 Focus Not Obscured (Minimum): when tabbing down the page, focused links slide underneath the sticky header.

What's worked for you? I've seen scroll-padding-top suggested, but our header height changes at breakpoints.

5 Latest reply

4 replies

  1. HP

    Hannah Price

    Frontend Developer, NHS England ·

    #1

    scroll-padding-top with a CSS custom property set per breakpoint works well for us:

    :root { --header-h: 56px; }
@media (min-width: 64em) { :root { --header-h: 88px; } }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
    3
  2. PS

    Priya ShahModerator

    Lead Drupal Developer, Government Digital Service ·

    #2

    Also check cookie banners and 'back to top' buttons. They obscure focus more often than headers in our audits.

    2
  3. AO

    Aisha Okafor

    Product Manager, Croydon Council ·

    #3

    Is anyone writing these up as a shared 'WCAG 2.2 for Drupal themes' guide? Happy to help with the content.

    1
  4. CB

    Ciara Byrne

    Junior Developer, Office of Public Works ·

    #4

    Tried Hannah's snippet on our Olivero sub-theme and it fixed it. Thank you!

    1

Join the conversation

GDDN is for people working on Drupal in government. Log in or apply to reply.

Log inApply to join