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
- 2.4.11 Focus Not Obscured (Minimum), niveau AA
Afsnit i EN 301 549
| 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 tjekEller 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