Teksten skal forblive læsbar med øget tekstafstand

Mange ordblinde og svagsynede bruger en browserudvidelse, der giver mere luft mellem linjer, ord og bogstaver. Når knapper, mærkater og menuer har fast højde, bliver deres tekster skåret af, så kunderne ikke længere kan læse priser, størrelser eller teksten på knappen til kassen.

Regel-id
vs-text-spacing
Kilde
Validiscan-kontrol
Alvorlighed
Moderat
Rettelsesniveau
ASSISTED
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Anvender WCAG’s tilsidesættelser for tekstafstand (linjehøjde 1,5, afsnitsafstand 2, bogstavafstand 0,12 og ordafstand 0,16 gange skriftstørrelsen) og finder tekst, der bliver skåret af, overlapper eller forsvinder (1.4.12).

Kontrollen fastfryser CSS-transitioner, måler siden, indsætter stilene for tekstafstand og måler igen. Afsnitsafstanden lægges på p-elementer som margin-bottom: 2em. Den måler hver tekstlinje, ikke elementets boks, for op til 1.500 elementer med egen tekst.

Tekst rapporteres, når dens linjer nu rækker mere end 4 px ud over en boks, hvis overflow er hidden eller clip, eller nu overlapper et andet elements tekst, et billede eller et input med mere end 4 px i begge retninger. Overløb ind i en boks, der kan scrolles, tæller ikke med, og det samme gælder tekst, der allerede er afkortet eller visuelt skjult. Faste eller sticky lag sammenlignes aldrig med indhold, der scroller under dem.

En tredje måling uden stilene må ikke længere vise problemet, så en karrusel, der flyttede sig af sig selv, falder fra. Kontrollen kører i hver scannet viewport, som standard 1440 px og 390 px i bredden, og rapporterer højst 15 elementer pr. side og viewport. Tekst i SVG, canvas, textarea og select måles ikke.

Sådan retter du det

Undgå faste højder og overflow: hidden på elementer, der indeholder tekst; brug i stedet min-height og padding, så knapper, mærkater og menupunkter vokser med indholdet.

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.12 9.1.4.12 9.1.4.12

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