Textavstånd

Silktide hittar element vars inline-format låser textavståndet – letter-spacing, word-spacing eller line-height – med !important vid ett värde under WCAG:s miniminivå, så att användarna inte kan justera det.

Varför detta är viktigt

Personer med dyslexi eller nedsatt syn behöver ofta sprida ut texten för att kunna läsa den: högre rader och större avstånd mellan bokstäver och ord. De gör detta med webbläsartillägg och anpassade stilmallar som skriver över en sidas avstånd.

Dessa verktyg lägger till vanlig CSS på författarnivå. En !important-deklaration inuti ett elements style-attribut går före alla regler på författarnivå, oavsett hur specifika de är – det är det enda konstruktion på en sida som dessa verktyg inte kan skriva över. När den låser avståndet under miniminivåerna stängs användaren helt enkelt ute.

framgångskriterium 1.4.12 (nivå AA) kräver att innehåll klarar att användarna ökar textavståndet till minst:

Radhöjd – 1,5 gånger teckenstorleken
Teckenavstånd – 0,12 gånger teckenstorleken
Ordmellanrum – 0,16 gånger teckenstorleken

Så åtgärdar du det

För varje flaggat element gör du något av följande:

Ta bort flaggan !important från inline-deklarationen. Användarnas verktyg kan då skriva över den, och din design förblir oförändrad för alla andra.
Flytta deklarationen till en stilmall. Även med !important kan regler i stilmallar skrivas över av användarverktyg.
Höj värdet till WCAG:s miniminivå om avståndet verkligen måste låsas.

<!-- Underkänns: låst under miniminivån; användarverktyg kan inte skriva över detta -->
<p style="line-height: 1.2 !important">…</p>

<!-- Åtgärdat: kan skrivas över -->
<p style="line-height: 1.2">…</p>

<!-- Också godkänt: låst, men vid ett värde som redan uppfyller miniminivån -->
<p style="line-height: 1.5 !important">…</p>

Så testar Silktide detta

Hitta element vars style-attribut deklarerar letter-spacing, word-spacing eller line-height med !important och som direkt innehåller synlig text.
Beräkna det deklarerade värdet utifrån elementets teckenstorlek.
Rapportera elementet när det låsta värdet ligger under WCAG:s miniminivå för den egenskapen.

Detta motsvarar W3C:s ACT-regler för 1.4.12 (teckenavstånd, ordmellanrum, radhöjd).

Silktide flaggar inte !important för avstånd i stilmallar – användarverktyg kan fortfarande skriva över dessa – och simulerar inte att avståndsöverskrivningar tillämpas för att upptäcka trasiga layouter, vilket inget automatiserat verktyg för närvarande gör. Att klara denna kontroll innebär att inget på sidan hindrar användarna från att justera avståndet. Att testa att layouten förblir läsbar med justerat avstånd är ett snabbt manuellt test med en bokmärkesfunktion för textavstånd.

Felsökning

Inline-formatet kommer från ett ramverk eller en tredjepartskomponent

Komponentbibliotek och inbäddningsskript skriver ibland inline-format med !important. De räknas ändå på din sida; kontrollera leverantörens inställningar eller ta upp frågan med dem.

Avståndet är låst vid ett värde som uppfyller kraven

Värden som ligger på eller över WCAG:s miniminivåer godkänns även när de är låsta – att låsa line-height: 1.6 !important skadar ingen, eftersom det redan överstiger det värde som användarna skulle höja det till.