Indholdet skal kunne ombrydes ved 320 CSS-pixels uden vandret scrolling
Svagsynede zoomer ind til 400 %, hvilket gør siden lige så smal som en lille mobil. Når tabeller, produktgallerier eller sektioner med fast bredde ikke passer, må de scrolle sidelæns på hver linje, og det gør det udmattende at læse produktdetaljer og sammenligne priser.
- Regel-id
- vs-reflow
- Kilde
- Validiscan-kontrol
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- ASSISTED
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Viser sider i en bredde på 320 CSS-pixels (svarende til 400 % zoom) og markerer indhold, der kræver vandret scrolling eller bliver skåret af (1.4.10).
I hver scannet viewport, som standard 1440 eller 390 px i bredden, ændrer kontrollen sidens størrelse til 320 × 480 CSS-pixels, venter to animationsframes plus 250 ms, måler og stiller viewporten tilbage. I mobilkonteksten får en side i stedet ét fund på html, når et manglende viewport-metatag eller et metatag med fast bredde holder layoutet bredere.
Ellers rapporterer den højst 10 pr. side, bredeste først: bokse, der slutter mere end 2 px forbi viewportens slutkant i inline-retningen, mens deres overordnede elementer passer, og elementer, der selv passer, men hvis egen tekst ikke ombrydes og løber forbi den kant. Den ser bort fra tabeller, grids, landkort, role="application", aria-hidden-indhold og tomme bokse.
Når siden kan scrolles sidelæns, og intet andet rapporteres, får html fundet, medmindre en tabel, et grid, et landkort eller et område med role="application" flød over. Indhold, der er skåret af med overflow-x: hidden på siden, rapporteres stadig. Indhold, der er skjult ved 320 px eller ligger i sin egen scroll- eller clip-container, springes over.
Sådan retter du det
Erstat faste bredder med max-width: 100% og fleksible layouts, lad lange ord og URL’er ombrydes (overflow-wrap: anywhere), lad brede tabeller scrolle inde i deres egen container, og sørg for, at intet element har en minimumsbredde over 320 pixels.
WCAG-succeskriterier
- 1.4.10 Reflow, niveau AA
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.4.10 | 9.1.4.10 | 9.1.4.10 |
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