Standarder · WCAG 2.2

SC 2.4.11 Niveau AA WCAG 2.2 Nyt i 2.2

Fokus ikke skjult (minimum)

Når et element modtager tastaturfokus, må det ikke være fuldstændigt skjult bag andet UI-indhold — sticky headers, cookie-bannere, chatwidgets, sticky footers. Ny i WCAG 2.2 og ændrer, hvordan teams bygger sticky chrome.

Hvad kriteriet kræver

Når en bruger taber til et kontrolelement, skal mindst en del af det kontrolelement forblive synlig. Det hyppigste fejlmønster: en bruger taber forbi en sticky header, siden auto-scroller, så det fokuserede link lander bag den sticky bjælke, og brugeren kan ikke længere se fokusringen. Kontrolelementet har stadig fokus og reagerer stadig på Enter, men brugeren er blind over for det.

Kriteriet sætter en minimumsgrænse: det fokuserede element kan være delvist dækket, blot ikke fuldstændigt. AAA-niveauets 2.4.12 hæver kravet til „slet ikke skjult“.

Dette er et af de fire nye operabilitetskriterier introduceret i WCAG 2.2 og har haft stor indvirkning, fordi sticky headers, sticky footers, cookie-bannere og chatwidget-bobler er allestedsnærværende.

Sådan opfylder du det

  • Tilføj CSS scroll-margin-top til fokuserbare elementer svarende til den sticky headers højde, så browsere automatisk scroller det fokuserede kontrolelement fri af headeren.
  • Til sticky footers og chatbobler: sørg for, at de ikke fuldstændigt dækker noget fokuserbart element. Enten skrump dem ved fokus, eller forankre dem på en måde, der efterlader buffer ved sidekanten.
  • Cookie-bannere og afvisbare overlays: gør dem aldrig sticky på en måde, der fanger efterfølgende tab-stop underneden. Enten gør dem modale (med fokus-trap) eller ikke-blokerende.
  • Til sider med både sticky header og sticky footer skal du teste tab-sekvensen nær midten af viewporten lodret — det er der, det fokuserede element klemmes.
  • Brug scroll-padding-top på scroll-containeren som fallback for ældre browsere.
html { scroll-padding-top: 80px; }       /* match sticky header-højde */
:target, :focus { scroll-margin-top: 80px; }

Typiske fejl

  • Sticky header uden scroll-padding-kompensation: hvert tab i den øverste halvdel af viewporten skjuler fokusringen.
  • Cookie-samtykkebanner fastgjort til bunden, der dækker den sidste række af formularfelter, når disse felter modtager fokus.
  • Live chat-widgetboble nederst til højre, der overlapper en „Send“-knap i hjørnet af en formular.
  • Reklamemæssige sticky bjælker (Black Friday-bannere) tilføjet af marketingteams uden at opdatere scroll-padding-tokens.
  • Sticky tabelheadere i dashboards, hvor Tab til den første datarække lander bag headerrækken.

Hvorfor det er vigtigt

Dette kriterium løser en klasse af fejl, der frustrerer tastaturbrugere dagligt, men sjældent dukker op i automatiske scanninger — ingen axe-regel kan forudsige, ved hvilken scroll-position et sticky element vil overlappe et fokuseret. Det rammer også uforholdsmæssigt meget skærmforstørrelses-brugere, hvis synlige viewport allerede er skrumpet til en fjerdedel af skærmen, så det sticky element fylder en endnu større andel.

Forvent at 2.4.11 vil være et af de mest citerede nye fund i auditrapporter i 2026. Rettelsen er lille (nogle CSS-tokens), men kræver, at hvert team, der ejer et sticky element — header, footer, banner, widget — koordinerer.