Elementer med fokus må ikke skjules af faste headere eller overlejringer

Når en fast header, en cookiebjælke eller en chatboble dækker det element, en tastaturbruger lige er gået til, kan kunden ikke se, hvad der har fokus, og kommer måske til at aktivere noget forkert. På lange kategorisider kan det ske på næsten hver eneste række af produkter.

Regel-id
vs-focus-obscured
Kilde
Validiscan-kontrol
Alvorlighed
Alvorlig
Rettelsesniveau
ASSISTED
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Finder elementer, der er helt dækket af sticky eller fast placeret indhold som headere, cookiebjælker eller chatwidgets i det øjeblik, de får tastaturfokus (2.4.11).

Kontrollen tager op til 150 elementer, der kan nås med tastaturet, i dokumentrækkefølge, også iframe. Den udelader negative tabindex-værdier og elementer, der er skjulte, deaktiverede eller har størrelsen nul. Hvert element får et almindeligt focus()-kald, som scroller siden på samme måde som tastaturfokus og respekterer scroll-padding. Kontrollen kører i hver scannet viewport, som standard 1440 og 390 px i bredden.

Derefter tester den ni punkter: midten, hjørnerne og kanternes midtpunkter, op til 3 px inden for kanterne. Punkter uden for viewporten springes over. Et punkt er dækket, når det øverste element dér er eller ligger inde i en container med position: fixed eller position: sticky. Containeren må ikke indeholde elementet med fokus og skal have en effektiv opacitet på mindst 0,1.

Når alle testede punkter er dækket, bliver elementet til et fund, der nævner den container, som dækker flest punkter. Et delvis dækket element får resultatet »kræver gennemgang«, fordi kontrollen ikke kan afgøre, om den synlige del stadig viser, hvad der har fokus. Scanneren laver i dag ingen fund af resultater, der kræver gennemgang.

Sådan retter du det

Sæt scroll-padding-top (og scroll-padding-bottom) til højden af sticky headere og bjælker, så elementer med fokus scrolles ind i det synlige område, hold chatknapper og cookiebjælker fri af sidens indhold, og lad de besøgende lukke eller minimere overlejringer.

WCAG-succeskriterier

Afsnit i EN 301 549

Afsnittet i EN 301 549 for hvert kriterium, fordelt på versioner af standarden
WCAG-kriterium Version 3.2.1 Version 4.1.1
2.4.11 ikke et afsnit i denne version 9.2.4.11

Begynd med et gratis tjek af din webshop.

Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.

Bestil et gratis tjek

Eller skriv til info@validiscan.com.

Hvad det gratis tjek omfatter, og hvad det udelader
Du sender
din webshops adresse
Sider, der scannes
op til 15
Du får
hver fejl, scanningen kan påvise, med siden og koden
På din webshop
kun offentlige sider; intet login, intet købt, ingen formularer sendt
Hvad det ikke er
et fuldt audit

Skriv til Validiscan

Til et gratis tjek skal du skrive din webshops adresse og platform.

Validiscan bruger det, du sender, til at svare dig. Privatlivspolitik