WCAG 1.4.12: Textavstånd

Vad den här regeln innebär

WCAG 1.4.12 Text Spacing hör till riktlinje 1.4 (Distinguishable) och riktar in sig på ett mycket specifikt problem: många personer med lässvårigheter, nedsatt syn eller kognitiva funktionsnedsättningar behöver åsidosätta en webbsidas standardinställningar för textavstånd för att göra innehållet läsbart för dem. Om en webbplats layout går sönder – text kapas, knappar överlappar, formuläretiketter försvinner eller innehåll blir oåtkomligt – när avstånden ökas, underkänns webbplatsen mot detta kriterium.

Kriteriet definierar fyra avståndsegenskaper som måste fortsätta fungera när de samtidigt ställs in på följande minimivärden:

• Radavstånd (line spacing): minst 1,5 gånger elementets teckenstorlek.
• Bokstavsavstånd (tracking): minst 0,12 gånger elementets teckenstorlek.
• Ordavstånd: minst 0,16 gånger elementets teckenstorlek.
• Avstånd efter stycken: minst 2 gånger elementets teckenstorlek.

En sida klarar detta kriterium om användare, efter att alla fyra dessa åsidosättningar har tillämpats, fortfarande kan läsa all text, använda alla interaktiva kontroller och komma åt allt sidinnehåll utan horisontell rullning vid en vyportsbredd på 320 CSS-pixlar, utan kapning eller trunkering och utan att innehåll överlappar i sådan grad att det blir oläsligt eller oanvändbart.

En sida underkänns om tillämpning av dessa åsidosättningar orsakar något av följande: text kapas av en behållare med fast höjd och overflow: hidden; interaktiva etiketter eller knapptext försvinner; rullgardinsmenyer eller verktygstips överlappar brödtext på ett oanvändbart sätt; eller något innehåll blir permanent oåtkomligt.

Viktigt är att kriteriet inte kräver att du själv ställer in dessa avståndsvärden. Det kräver bara att din layout inte går sönder när användaren (eller deras hjälpmedel, webbläsartillägg eller användar-stilmall) tillämpar dessa åsidosättningar. Avståndsvärdena är trösklar för testning, inte designkrav.

Det finns ett uttryckligt undantag: komponenter där en viss visuell presentation är väsentlig för den information som förmedlas – till exempel en logotyp, en notskrift återgiven i SVG eller en CAPTCHA-bild – är undantagna. Detta undantag är dock snävt och bör inte användas som en generell ursäkt för att undanta navigationsmenyer eller kortkomponenter.

Detta kriterium gäller allt textinnehåll som återges i webbläsaren med CSS, inklusive rubriker, stycken, etiketter, knapptext, platshållartext, listobjekt, tabellceller och navigationslänkar. Det gäller inte text som återges inuti bilder eller canvas-element, eftersom dessa inte påverkas av CSS-åsidosättningar av avstånd.

Varför det är viktigt

Textavstånd påverkar direkt personer med ett brett spektrum av funktionsnedsättningar och läsprofiler. Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor globalt någon form av synnedsättning eller blindhet, och många av dem använder webbläsarzoom eller egna stilmallar för att göra innehåll läsbart. Utöver synnedsättning har uppskattningsvis 15–20 % av världens befolkning dyslexi, ett tillstånd där ökat bokstavsavstånd, ordavstånd och radavstånd är bevisade åtgärder för att förbättra läsbarheten – vilket stöds av forskning, inklusive studier publicerade i tidskriften Annals of Dyslexia.

För användare med kognitiva funktionsnedsättningar som ADHD eller bearbetningssvårigheter ökar tätt textavstånd den kognitiva belastningen vid läsning genom att göra det svårare att följa rader och skilja enskilda ord. Dessa användare installerar ofta webbläsartillägg som Readability Bookmarklet, Stylus eller plattformsnivåns tillgänglighetsinställningar som tillämpar anpassade avstånd på alla webbplatser de besöker.

Överväg ett konkret scenario: en universitetsstudent med dyslexi besöker en turkisk e-handelsplattform för att kontrollera en returpolicy för en produkt före en tenta. Hon använder ett webbläsartillägg som globalt ställer in radavstånd till 1,7 och bokstavsavstånd till 0,14em. På produktsidan ligger returpolicyns text i en behållare med fast höjd, ett <div> med stilen height: 120px; overflow: hidden;. Med hennes anpassade avstånd aktiverat är bara de två första raderna synliga och det finns ingen mekanism för att visa resten. Hon kan inte slutföra sin uppgift och tappar förtroendet för plattformen. Detta är precis den typ av fel som WCAG 1.4.12 är utformat för att förhindra.

Utöver tillgång för personer med funktionsnedsättning finns sekundära fördelar. Flexibla, avstånds-tåliga layouter tenderar att vara mer robusta på internationella marknader – turkisk text innehåller till exempel ofta längre ordformer på grund av agglutinerande morfologi, och layouter som inte kan hantera variation i avstånd tenderar också att gå sönder med längre strängar. Tillgängliga layouter förbättrar också SEO indirekt: innehåll som är läsbart och tillgängligt tenderar att ha lägre avvisningsfrekvens och bättre engagemangssignaler, vilket sökmotorer tar hänsyn till i sina rankningar.

Relaterade Axe-core-regler

WCAG 1.4.12 kräver manuell testning och kan inte verifieras fullt ut enbart med automatiserade verktyg. Detta beror på att automatiserade motorer inte kan förutsäga hur en layout kommer att bete sig under användar-tillämpade stil-åsidosättningar utan att faktiskt tillämpa dessa åsidosättningar och mäta det återgivna resultatet – en process som kräver visuell inspektion eller en jämförelse med headless-rendering. Axe-core-motorn innehåller inte någon dedikerad automatiserad regel för 1.4.12 av denna anledning.

• Manuell testning med Text Spacing Bookmarklet: Den rekommenderade testmetoden är Text Spacing Bookmarklet skapat av Steve Faulkner (nu underhållet av tillgänglighetscommunityt). Detta bookmarklet injicerar en stilmall i den aktuella sidan som ställer in alla fyra avståndsegenskaperna till deras minimitröskelvärden samtidigt. Testaren kontrollerar sedan visuellt (eller med skärmläsare) om något innehåll kapas, överlappar eller är oåtkomligt. Bookmarklet-metoden är standarden som refereras i W3C:s egen Understanding-dokumentation för 1.4.12.
• Varför automatisering inte räcker: Automatiska skannrar som axe-core analyserar DOM och beräknade stilar så som de ser ut vid skanningstillfället. De simulerar inte användar-stilmalls-åsidosättningar eller renderar om sidan för att upptäcka layoutspill eller kapning som orsakas av dessa åsidosättningar. En behållare med overflow: hidden och fast höjd kommer att passera en automatiserad skanning eftersom den isolerat inte är ett tillgänglighetsfel – det blir det först när avstånden ökas. Endast genom att tillämpa åsidosättningen och observera resultatet kan en testare bekräfta ett fel.
• Kompletterande automatiska kontroller: Även om ingen axe-regel mappar direkt till 1.4.12 bör granskare också notera att axes regel scrollable-region-focusable och färgkontrastregler kan lyfta fram relaterade problem som bidrar till en dålig upplevelse av textavstånd. Dessutom kan Lighthouse tillgänglighetsgranskning flagga behållare med fast storlek i vissa sammanhang, om än inte specifikt för efterlevnad av avståndskraven.

Hur man testar

1. Installera Text Spacing Bookmarklet. Gå till sidan för Steve Faulkner Text Spacing Bookmarklet (tillgänglig via W3C:s Understanding-dokument eller en webbsökning på "text spacing bookmarklet WCAG"). Dra bookmarkletet till webbläsarens bokmärkesfält. Alternativt kan du skapa ett bokmärke manuellt och klistra in bookmarkletets JavaScript som URL.
2. Öppna sidan som ska testas i din webbläsare på standardzoomnivå (100 %). Navigera till sidan eller komponenten du vill utvärdera – till exempel en produktsida, ett kassaflödesformulär eller en navigationsmeny.
3. Aktivera bookmarkletet. Klicka på bookmarkletet. Detta injicerar CSS som ställer in line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important och p margin-bottom till 2em !important över hela sidan.
4. Inspektera hela sidan visuellt. Skrolla genom alla innehållsområden. Leta efter: text som kapas längst ned i en behållare; knappetiketter eller länktext som har försvunnit eller är delvis dold; navigationsmenyer eller rullgardinsmenyer där objekt överlappar; formulärfält där platshållar- eller etiketttext kapas; samt modala dialoger eller verktygstips där innehåll flödar utanför behållarens gräns.
5. Interagera med interaktiva element. Tabba genom alla fokuserbara element, aktivera rullgardinsmenyer, öppna modaler och skicka formulär. Bekräfta att alla interaktiva kontroller förblir användbara och att deras synliga etiketter är fullt läsbara med de tillämpade avstånden.
6. Testa med skärmläsare för funktionsförlust. Med bookmarkletet fortfarande aktivt, använd NVDA med Firefox eller JAWS med Chrome för att navigera på sidan via rubriker, landmärken och interaktiva element. Bekräfta att läsordningen och det som läses upp stämmer överens med vad en seende användare ser. Använd VoiceOver i Safari på macOS eller iOS för täckning av Apple-plattformar.
7. Testa vid 320px vyportsbredd. Ändra storlek på webbläsarfönstret till 320 CSS-pixlar i bredd (eller använd webbläsarens DevTools responsiva läge). Aktivera bookmarkletet igen. Bekräfta att innehållet fortfarande är tillgängligt utan horisontell rullning och att text inte kapas vid små vyportsbredder i kombination med ökade avstånd.
8. Dokumentera fel. För varje fel, notera: elementtypen, dess CSS-klass eller ID, den specifika avståndsegenskap som orsakar felet samt en skärmdump före och efter aktivering av bookmarkletet.

Hur man åtgärdar

Behållare med fast höjd som kapar text – Felaktigt

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Behållare med fast höjd som kapar text – Korrekt

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Knappetikett kapas av fast knapphöjd – Felaktigt

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Knappetikett kapas av fast knapphöjd – Korrekt

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Verktygstips eller rullgardinsmeny som flödar över utan scroll – Felaktigt

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Verktygstips eller rullgardinsmeny som flödar över utan scroll – Korrekt

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Styckeavstånd som förstör kortlayout – Felaktigt

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Styckeavstånd som förstör kortlayout – Korrekt

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Vanliga misstag

• Att använda height i stället för min-height på textbehållare. En fast height på ett element som innehåller text kommer att orsaka kapning så snart användaren ökar radavstånd eller bokstavsavstånd. Ersätt alla fasta höjder på behållare som innehåller text med min-height så att behållaren kan växa.
• Att sätta overflow: hidden på behållare som innehåller brödtext. Detta är den enskilt vanligaste orsaken till fel mot 1.4.12. Dold overflow kapar text som expanderar vertikalt när avstånden ökas. Använd overflow: visible eller overflow: auto beroende på designkontext.
• Att använda white-space: nowrap på knapp- eller länk-etiketter utan tillräcklig flexibilitet i behållaren. När bokstavsavståndet ökar kan text utan radbrytning flöda utanför sin förälder eller kapas, särskilt i navigationsobjekt med fast bredd.
• Att absolutpositionera sidfot eller åtgärdselement inuti ett kort med fast höjd. När kortinnehållet växer på grund av åsidosättningar av avstånd kommer absolutpositionerade element längst ned i kortet att överlappa texten. Använd i stället flexbox i kolumnlayout.
• Att tillämpa max-height med overflow: hidden på kollapsbara sektioner som är i expanderat läge. Animerade dragspel (accordions) som expanderar till ett beräknat max-height-värde baserat på pixelmått kommer att kapa text vid den pixelgränsen när avstånden åsidosätts, även när de är helt öppna.
• Att använda CSS line-clamp (webkit-line-clamp) utan en synlig mekanism för att expandera hela innehållet. Att begränsa text till ett fast antal rader är acceptabelt endast om det finns en tydligt märkt, tangentbordsåtkomlig kontroll för att visa hela innehållet. Begränsning utan någon expansionsmekanism underkänns mot 1.4.12.
• Att förlita sig på JavaScript för att dynamiskt sätta elementhöjder i pixlar. Skript som mäter elementhöjder och sedan hårdkodar dessa pixelvärden som inline-stilar låser behållaren till en storlek som ignorerar användarens åsidosättningar av avstånd. Använd inneboende storlekshantering och låt CSS sköta layouten.
• Att anta att automatiska tillgänglighetsskanningar fångar alla fel mot 1.4.12. Team som enbart förlitar sig på axe eller Lighthouse utan att köra Text Spacing Bookmarklet kommer att missa alla layoutbaserade avståndsfel. Manuell testning med bookmarkletet är obligatorisk för detta kriterium.
• Att inte testa navigationsmenyer och mega-menyer med bookmarkletet. Navigationskomponenter byggs ofta med fasta pixelhöjder och dold overflow för att skapa ett polerat visuellt resultat. De är också bland de komponenter som oftast underkänns mot 1.4.12 eftersom ökade avstånd gör att menyobjekt radbryts och kapas.
• Att behandla avståndsvärdena som designkrav i stället för testtrösklar. Vissa team svarar på 1.4.12 genom att uppdatera sina standardstilar så att de matchar tröskelvärdena, vilket är onödigt och kan stå i konflikt med designerns avsikt. Kriteriet kräver bara att layouten inte går sönder när dessa värden tillämpas – inte att de ska vara standard.

Relation till Turkiets tillgänglighetsreglering

WCAG 1.4.12 Text Spacing är direkt relevant för Turkiets framväxande rättsliga ramverk för tillgänglighet. Den viktigaste senaste utvecklingen är Presidential Circular 2025/10, publicerad i Officiella tidningen nr 32933 den 21 juni 2025. Detta cirkulär fastställer bindande skyldigheter för ett brett spektrum av organisationer att säkerställa digital tillgänglighet i hela sin webb-närvaro och sina mobilapplikationer.

Cirkuläret omfattar en bred uppsättning av aktörstyper. Offentliga institutioner och myndigheter på alla nivåer är skyldiga att följa reglerna. Privata aktörer inom räckvidden inkluderar e-handelsplattformar, banker och finansiella institutioner, sjukhus och vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, resebyråer, privata transportföretag och privatskolor auktoriserade av Ministry of National Education (MoNE). Dessa organisationer måste uppnå överensstämmelse på nivå AA med WCAG, vilket inkluderar 1.4.12, som en del av sina skyldigheter enligt cirkuläret.

Efterlevnad på nivå AA är också ett krav för att få Accessibility Logo (Erişilebilirlik Logosu) utfärdad av Ministry of Family and Social Services (Aile ve Sosyal Hizmetler Bakanlığı). Denna logotyp signalerar till användare, särskilt personer med funktionsnedsättning, att en digital produkt har granskats och uppfyller den nödvändiga tillgänglighetsstandarden. För organisationer som betjänar den turkiska funktionshindercommunityn – uppskattningsvis flera miljoner människor, inklusive personer med syn-, kognitiva och lässvårigheter – har logotypen både anseendemässig och regulatorisk tyngd.

I praktiken innebär detta att en turkisk e-handelsplattform som använder produktbeskrivningsbehållare med fast höjd och overflow: hidden, eller en myndighetsportal vars navigationsmeny kapar innehåll när en användare tillämpar åsidosättningar av avstånd via ett webbläsartillägg eller en tillgänglighetsinställning i operativsystemet, inte bara sviker sina användare – den är potentiellt icke-förenlig med de skyldigheter som fastställs i cirkulär 2025/10. Fel relaterade till Text Spacing är särskilt relevanta för turkiska användare med dyslexi och nedsatt syn som är beroende av verktyg för anpassade avstånd, och för användare som får tillgång till offentliga eller kommersiella tjänster på mobila enheter där operativsystemets textstorleksinställningar också kan utlösa layoutinstabilitet liknande åsidosättningar av avstånd.

Organisationer som eftersträvar Erişilebilirlik Logosu bör inkludera en manuell granskning av textavstånd med hjälp av Text Spacing Bookmarklet som ett obligatoriskt steg i sin tillgänglighetsgranskningsprocess, vid sidan av automatiserad skanning och testning med skärmläsare. Att åtgärda fel mot 1.4.12 – främst genom att ersätta fasta höjder med min-height, ta bort onödig overflow: hidden från textbehållare och anta flexibla CSS-layouttekniker – är i allmänhet genomförbart utan betydande designändringar och utgör en förbättring med högt värde och låg kostnad för tillgängligheten i alla turkiska digitala tjänster.