Se till att det går att öka avstånd mellan tecken, rader, stycken och ord

Om riktlinjen

Innehåller lagkrav
EN 9.1.4.12
WCAG 1.4.12 (AA)

Område

För att göra det lättare att läsa på webbplatsen ska det vara möjligt att ändra avstånd mellan tecken, ord, rader och stycken utan att någon text skyms eller överlappas av annat innehåll.

Därför ska det gå att öka avstånd i text

Många personer, till exempel personer med dyslexi eller med nedsatt syn, behöver kunna ändra avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa.

Det måste därför vara möjligt att påverka textavståndet utan att innehåll överlappar eller skymmer annat innehåll och att inget innehåll försvinner (trunkeras).

Vad kräver lagen?

Det ska vara möjligt att öka avstånd i texter åtminstone upp till följande relativa gränsvärden, utan att innehåll eller funktionalitet går förlorad:

Radavstånd ska kunna ökas minst 1,5 gånger teckensnittets storlek.
Teckenavstånd ska kunna ökas minst 0,12 gånger teckensnittets storlek.
Avståndet mellan ord ska kunna ökas minst 0,16 gånger teckensnittets storlek.
Avståndet mellan stycken ska kunna ökas minst 2 gånger teckensnittets storlek.

Använd tillräckligt stora textbehållare

Placera text i ett utrymme (container) som har tillräcklig marginal för att textavstånden ska kunna förändras så mycket som riktlinjen kräver, eller i ett utrymme vars storlek anpassas i förhållande till textstorleken exempelvis med hjälp av den relativa enheten em.

Exempel: innehåll döljs

Innehåll kan döljas om texten är placerad i en omgivning som inte tar hänsyn till att texten kan behöva mer utrymme. Det kan gälla både i höjd- och sidled.

Exempel: innehåll krockar

Detta är i princip samma fenomen som ovan, med den enda skillnaden att texten krockar med, eller överlappas av, innehåll som är delvis transparent, vilket gör att den inte döljs helt.

Exempel: avstånden går inte att påverka

Att avstånd i text inte kan anpassas kan ibland inträffa om textegenskaperna kontrolleras med absoluta mått, i värsta fall med css-regler märkta !important.

Undantag från lagkraven

Öppna undertexter i video omfattas inte av detta kriterium, inte heller bilder av text.

Innehåll på språk eller skriftsystem där något av textavstånden inte är tillämpligt. Att ändra ordmellanrum förväntas exempelvis inte ha någon effekt på japansk text, som inte har ”ord” på samma sätt som till exempel svenska.

Så testar du textavstånd

Du kan testa att förändra avstånd i text på olika sätt, till exempel med hjälp av en bookmarklet som ökar avstånden eller genom att ställa in webbläsaren att tillämpa användarens egen css-kod.

När du har utökat textavstånden, använd inspektören för att markera ett stycke (<p>) och kontrollera de beräknade värdena för CSS-egenskaper enligt följande:

För att kontrollera styckemellanrum, markera ett stycke (<p>) och jämför egenskapen margin-bottom (eller margin-top) med font-size.
För att kontrollera radavstånd, jämför egenskapen line-height med font-size.
För att kontrollera ordmellanrum, jämför egenskapen word-spacing med font-size.
För att kontrollera teckenavstånd, jämför egenskapen letter-spacing med font-size.

Terminologi

Radavstånd

Kägel inom typografin. Detta är avståndet mellan textradens baslinje och nästa textrads baslinje. Radavståndet brukar mätas i punkter.

Teckenavstånd

Teckenavstånd är avståndet mellan olika tecken i en rad med text. Inom typografi pratar man om kerning när man minskar, eller ibland ökar avståndet mellan bokstavspar för att behålla en god ordbild Länk till annan webbplats.