Tekstafstand

Silktide vindt elementen waarvan de tekstafstand door inline stijlen wordt vastgezet — letter-spacing, word-spacing of line-height — met !important op een waarde onder het minimum van WCAG, waardoor gebruikers deze niet kunnen aanpassen.

Waarom dit belangrijk is

Mensen met dyslexie of een beperkt zicht hebben vaak meer ruimte tussen tekst nodig om die te kunnen lezen: hogere regels, bredere afstanden tussen letters en woorden. Ze doen dit met browserextensies en aangepaste stylesheets die de afstand op een pagina overschrijven.

Deze hulpmiddelen voegen gewone CSS op auteursniveau toe. Een !important-declaratie binnen het style-attribuut van een element heeft voorrang op elke regel op auteursniveau, ongeacht hoe specifiek die is — het is het enige construct op een pagina dat deze hulpmiddelen niet kunnen overschrijven. Wanneer de tekstafstand hiermee onder de minimumwaarden wordt vastgezet, worden gebruikers eenvoudigweg buitengesloten.

-succescriterium 1.4.12 (niveau AA) vereist dat inhoud leesbaar blijft wanneer gebruikers de tekstafstand verhogen tot ten minste:

Regelhoogte — 1,5 keer de tekengrootte
Letterafstand — 0,12 keer de tekengrootte
Woordafstand — 0,16 keer de tekengrootte

Hoe je dit oplost

Doe voor elk gemarkeerd element een van de volgende dingen:

Verwijder de vlag !important uit de inline-declaratie. Hulpmiddelen van gebruikers kunnen deze dan overschrijven, terwijl je ontwerp voor alle anderen ongewijzigd blijft.
Verplaats de declaratie naar een stylesheet. Ook met !important kunnen regels in stylesheets door hulpmiddelen van gebruikers worden overschreven.
Verhoog de waarde tot het WCAG-minimum als de tekstafstand echt moet worden vastgezet.

<!-- Fout: vastgezet onder het minimum; hulpmiddelen van gebruikers kunnen dit niet overschrijven -->
<p style="line-height: 1.2 !important">…</p>

<!-- Opgelost: kan worden overschreven -->
<p style="line-height: 1.2">…</p>

<!-- Ook goed: vastgezet, maar op een waarde die al aan het minimum voldoet -->
<p style="line-height: 1.5 !important">…</p>

Hoe Silktide dit controleert

Vind elementen waarvan het style-attribuut letter-spacing, word-spacing of line-height met !important declareert en die rechtstreeks zichtbare tekst bevatten.
Bepaal de gedeclareerde waarde ten opzichte van de tekengrootte van het element.
Rapporteer het element wanneer de vastgezette waarde onder het WCAG-minimum voor die eigenschap ligt.

Dit weerspiegelt de W3C ACT-regels voor 1.4.12 (letterafstand, wordafstand, regelhoogte).

Silktide markeert !important voor tekstafstand in stylesheets niet — hulpmiddelen van gebruikers kunnen deze nog steeds overschrijven — en simuleert niet het toepassen van de overschrijvingen voor tekstafstand om gebroken lay-outs te detecteren, wat momenteel door geen enkele geautomatiseerde tool wordt gedaan. Voor deze controle slagen betekent alleen dat niets op de pagina gebruikers belemmert om de tekstafstand aan te passen; testen of je lay-out leesbaar blijft met aangepaste tekstafstand is een snelle handmatige test met een bookmarklet voor tekstafstand.

Problemen oplossen

Componentbibliotheken en inscripts voor insluitingen schrijven soms inline stijlen met !important. Ze tellen hoe dan ook mee voor je pagina; controleer de instellingen van de leverancier of neem dit met hen op.

De tekstafstand is vastgezet op een conforme waarde

Waarden op of boven de WCAG-minimumwaarden slagen, zelfs wanneer ze zijn vastgezet — line-height: 1.6 !important schaadt niemand, omdat deze waarde al hoger is dan wat gebruikers zouden instellen.