Retningslinje
1.4.12 Tekstavstand
Brukeren må kunne justere avstanden mellom linjer, avsnitt, bokstaver og ord.
[Det] oppstår ikke noe tap av innhold eller funksjonalitet ved å angi alle de følgende egenskapene og uten å endre andre stilegenskaper.
- Linjehøyde (linjeavstand) angis til minst 1,5 ganger skriftstørrelsen
- Avstand etter avsnitt angis til minst 2 ganger skriftstørrelsen.
- Avstanden mellom bokstaver i blokker av tekst (sperring) angis til minst 0,12 ganger skriftstørrelsen.
- Avstanden mellom ord angis til minst 0,16 ganger skriftstørrelsen.
Hvorfor er suksesskriteriet viktig?
Noen benytter verktøy som tilpasser tekst på nettsider slik at det er lettere for dem å lese. Blant annet kan slike verktøy justere avstanden mellom linjer, avsnitt, bokstaver og ord. Det er viktig at vi designer og koder nettsider på en måte som ikke hindrer slike justeringer.
Anbefalinger
- La tekst bryte over flere linjer heller enn å kutte den av ved en bestemt bredde.
- Unngå elementer med fast høyde.
- Test nøye dersom du spesifiserer størrelse med absolutte enheter som
pxeller brukerposition: absoluteellerfixed. - Unngå overspesifisering av CSS-selectors og bruk av
!important. - Hent undertekster til video fra en fil (for eksempel VTT), ikke brenn teksten inn i videoen.
Vanlige misforståelser
Det er en vanlig misforståelse at WCAG krever minimum linjehøyde. Grunnen til misforståelsen er AAA-nivå suksesskriteriet 1.4.8 Visuell presentasjon som krever minimum linjehøyde, og vi har skrudd på denne regelen som default i Siteimprove. Suksesskriteriet 1.4.8 er ikke lovpålagt. Suksesskriteriet som er lovpålagt er 1.4.12, og det krever bare at brukeren må kunne justere tekstavstanden.
Hvordan teste kravet?
Kjernespørsmålet
Hindrer vi brukeren fra å kunne justere avstanden mellom linjer, avsnitt, bokstaver og ord?
Innhold du må teste
- Alt tekstlig innhold på siden som ikke er et bilde av tekst
- Video med undertekster
Vær særlig nøye med å sjekke skjemaelementer og knapper, inndata i tekstfelt, tabeller, tekst brukt i forbindelse med bilder og egenutviklede grensesnittkomponenter som tooltips og tabs.
Testmetode
Du kan bruke Steve Faulkners bookmarklet. Last inn siden du vil teste på nytt. Klikk på bookmarklet’en og verifiser følgende for alt tekstlig innhold:
- Avstand mellom bokstavene, ordene og avsnittene har økt.
- For tekst som bryter over flere linjer, sjekk at avstanden mellom linjene har økt,
Verifiser så at alt innhold og funksjonalitet på siden fortsatt er i orden.
Det kan hende du må aktivere bookmarklet'en på nytt for å teste innhold som vises etter den første gangen du aktiverte bookmarklet'en, for eksempel ekspanderbare elementer som accordions, feilmeldinger og innhold som er lastet inn dynamisk.
Tips
Har du ikke brukt bookmarklets til testing før? How to use bookmarklets on any device gir deg detaljene om hvordan de fungerer.
Ofte-stilte spørsmål
Gjelder kravet for bilder av tekst?
Nei, men vi skal heller ikke bruke bilder av tekst hvis ikke vi absolutt må.
Hva med undertekster?
Undertekster brent inn som en del av bildet («open captions») trenger ikke møte kravet. «Closed captions», der undertekster legges til videoen ved hjelp av en tekstfil, må oppfylle kravet. En av grunnene til at vi anbefaler bruk av «closed captions» er nettopp fordi disse kan tilpasses brukerens visningspreferanser—blant annet tekstavstand.
Hva med tekst der stylingen er kontrollert av nettleseren?
Tekst som er en del av nettleserens grensesnitt er ikke omfattet av kravet. Eksempler på denne typen innhold er kontekstmenyer eller tooltips som kommer fra title-attributtet.
Medvirkende