Fokus inte dolt (minimum)

Vad kriteriet kräver

När en användare tabbar till en kontroll måste minst en del av den kontrollen förbli synlig. Det vanligaste felmönstret: en användare tabbar förbi ett klistrigt sidhuvud, sidan scrollar automatiskt så att den fokuserade länken hamnar bakom det klistriga fältet, och användaren kan inte längre se fokusringen. Kontrollen har fortfarande fokus och svarar på Enter, men användaren är blind för den.

Kriteriet sätter en miniminivå: det fokuserade elementet kan delvis täckas, bara inte helt. AAA-nivån 2.4.12 höjer ribban till “inte dolt alls.”

Detta är ett av de fyra nya opererbara kriterierna i WCAG 2.2 och har fått stor påverkan eftersom klistriga sidhuvuden, klistriga sidfötter, cookiebanners och chattwidgetar finns överallt.

Hur du uppfyller det

• Lägg till CSS scroll-margin-top på fokusbara element lika med det klistriga sidhuvudets höjd, så att webbläsare automatiskt scrollar den fokuserade kontrollen förbi sidhuvudet.
• För klistriga sidfötter och chattbubblor ser du till att de inte helt täcker något fokusbart element. Krymp dem vid fokus eller förankra dem så att det finns en buffert vid sidkanten.
• Cookiebanners och avfärdbara överlägg: gör dem aldrig klistriga på ett sätt som fångar senare tabbstopp underneath. Gör dem antingen modala (med fokusfälla) eller icke-blockerande.
• På sidor med både ett klistrigt sidhuvud och en klistrigt sidfot testar du tabbsekvensen runt visningsportens vertikala mitt — där kläms det fokuserade elementet ihop.
• Använd scroll-padding-top på scrollcontainern som reserv för äldre webbläsare.

html { scroll-padding-top: 80px; }       /* matcha klistrigt sidhuvuds höjd */
:target, :focus { scroll-margin-top: 80px; }

Vanliga fel

• Klistrigt sidhuvud utan kompensation för scroll-padding: varje tabb i den övre halvan av visningsporten döljer fokusringen.
• Cookie-samtyckesbanner fäst längst ned som täcker den sista raden formulärfält när dessa fält får fokus.
• Livechatwidgetbubbla nere till höger som överlappar en “Skicka”-knapp i ett formulärs hörn.
• Kampanjklistriga fält (Black Friday-banners) tillagda av marknadsföringsteam utan att uppdatera scroll-padding-tokens.
• Klistriga tabellhuvuden i instrumentpaneler där Tab på den första dataraden hamnar bakom rubrikraden.

Varför det spelar roll

Detta kriterium löser en klass av fel som frustrerar tangentbordsanvändare dagligen men sällan dyker upp i automatiserade skanningar — ingen axe-regel kan förutsäga vid vilken scrollposition ett klistrigt element kommer att överlappa ett fokuserat. Det drabbar också oproportionerligt skärmförstoraranvändare, vars synliga visningsport redan krympts till en fjärdedel av skärmen, så det klistriga elementet upptar en ännu större andel.

Förvänta dig att 2.4.11 är ett av de mest citerade nya fynden i 2026 års revisionsrapporter. Åtgärden är liten (ett par CSS-tokens) men kräver att varje team som äger ett klistrigt element — sidhuvud, sidfot, banner, widget — samordnar sig.