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

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
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 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