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
- 1.4.12 Text Spacing, niveau AA
Afsnit i EN 301 549
| 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 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