WCAG 1.4.12 Utökade textavstånd
Nivå AAMöjlig att uppfatta
Vad kravet betyder i en webbutik
En del läser lättare med större avstånd mellan rader, bokstäver och ord, till exempel personer med dyslexi eller nedsatt syn, och ändrar det med ett tillägg i webbläsaren. Inget innehåll eller funktion får då gå förlorad. Kravet anger vilka värden sidan ska klara: radavstånd 1,5 gånger textstorleken, avstånd efter stycken 2 gånger, mellan bokstäver 0,12 gånger och mellan ord 0,16 gånger. Butiken behöver inte använda de avstånden själv, bara tåla dem.
Vanliga fel
- Knappar med fast höjd, där texten Lägg i varukorgen klipps när radavståndet ökar.
- Produktnamn i produktkorten som är begränsade till två rader med overflow: hidden, så att slutet försvinner.
- Menyn har en fast bredd, och kategorinamnen överlappar varandra när bokstavsavståndet ökar.
- Etiketter och priser ligger ovanpå produktbilden med fast position och hamnar över varandra.
- Avstånd satta i style-attribut och markerade som important, så att kundens inställning inte får verkan.
Så rättar du det
Låt höjder följa innehållet med min-height i stället för height, och undvik att klippa text. Prova sidan med de här reglerna i webbläsarens utvecklarverktyg.
/* Provkör kravets värden på hela sidan */
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }
/* Knappen växer med texten */
.kop-knapp { min-height: 3rem; height: auto; }Vem kontrollerar det
Kontrollera själv
Månadsgranskningen kör axe-core, som larmar när avstånd är låsta i style-attribut och markerade som important. Om text klipps eller överlappar när avstånden ökas syns bara när man provar. Klistra in reglerna ovan i utvecklarverktygen och gå igenom startsidan, en kategori, en produktsida och kassan.
Läs mer
Kravet 1.4.12 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.