WCAG 1.4.12: Tekstafstand

Wat Deze Regel Betekent

WCAG 1.4.12 Tekstafstand behoort tot Richtlijn 1.4 (Onderscheidbaar) en richt zich op een zeer specifiek probleem: veel mensen met leesbeperkingen, slechtziendheid of cognitieve beperkingen moeten de standaard tekstafstand van een webpagina overschrijven om de inhoud leesbaar te maken. Als de lay-out van een site breekt — tekst wordt afgekapt, knoppen overlappen, formulierlabels verdwijnen of inhoud wordt onbereikbaar — wanneer de afstand wordt vergroot, voldoet de site niet aan dit criterium.

Het criterium definieert vier afstandseigenschappen die functioneel moeten blijven wanneer ze gelijktijdig op de volgende minimumwaarden worden ingesteld:

• Regelhoogte (regelafstand): minstens 1,5 keer de lettergrootte van het element.
• Letterafstand (tracking): minstens 0,12 keer de lettergrootte van het element.
• Woordafstand: minstens 0,16 keer de lettergrootte van het element.
• Afstand na alinea’s: minstens 2 keer de lettergrootte van het element.

Een pagina voldoet aan dit criterium als, nadat al deze vier overschrijvingen zijn toegepast, gebruikers nog steeds alle tekst kunnen lezen, alle interactieve bedieningselementen kunnen bedienen en toegang hebben tot alle pagina-inhoud zonder horizontaal te hoeven scrollen bij een viewport van 320 CSS pixels breed, zonder afkapping of inkorting, en zonder dat inhoud zodanig overlapt dat deze onleesbaar of onbruikbaar wordt.

Een pagina voldoet niet als het toepassen van deze overschrijvingen een van de volgende situaties veroorzaakt: tekst wordt afgekapt door een container met een vaste hoogte en overflow: hidden; interactieve labels of knoptekst verdwijnen; dropdownmenu’s of tooltips overlappen de hoofdinhoud op een onbruikbare manier; of enige inhoud wordt permanent ontoegankelijk.

Belangrijk is dat het criterium niet vereist dat je deze afstandswaarden zelf instelt. Het vereist alleen dat je lay-out niet breekt wanneer de gebruiker (of diens ondersteunende technologie, browserextensie of gebruikersstylesheet) deze overschrijvingen toepast. De afstandswaarden zijn drempels voor testen, geen ontwerpvereisten.

Er is één expliciete uitzondering: componenten waarbij een bepaalde visuele presentatie essentieel is voor de over te brengen informatie — bijvoorbeeld een logo, een in SVG weergegeven muziekpartituur of een CAPTCHA-afbeelding — zijn uitgezonderd. Deze uitzondering is echter beperkt en mag niet worden gebruikt als algemene reden om navigatiemenu’s of kaartcomponenten uit te sluiten.

Dit criterium is van toepassing op alle tekstinhoud die in de browser met CSS wordt weergegeven, inclusief koppen, alinea’s, labels, knoptekst, placeholdertekst, lijstitems, tabelcellen en navigatielinks. Het is niet van toepassing op tekst die in afbeeldingen of canvas-elementen wordt weergegeven, omdat deze niet worden beïnvloed door CSS-overschrijvingen van afstanden.

Waarom Het Belangrijk Is

Tekstafstand heeft direct invloed op mensen met een breed scala aan beperkingen en leesprofielen. Volgens de Wereldgezondheidsorganisatie hebben wereldwijd ongeveer 2,2 miljard mensen een vorm van visuele beperking of blindheid, en velen van hen gebruiken browserzoom of aangepaste stylesheets om inhoud leesbaar te maken. Naast visuele beperkingen heeft naar schatting 15–20% van de wereldbevolking dyslexie, een aandoening waarvoor grotere letterafstand, woordafstand en regelhoogte bewezen leesbaarheidsinterventies zijn — ondersteund door onderzoek, waaronder studies gepubliceerd in het tijdschrift Annals of Dyslexia.

Voor gebruikers met cognitieve beperkingen zoals ADHD of verwerkingsproblemen verhoogt krappe tekstafstand de cognitieve belasting van het lezen doordat het moeilijker wordt om regels te volgen en afzonderlijke woorden te onderscheiden. Deze gebruikers installeren vaak browserextensies zoals de Readability Bookmarklet, Stylus of platforminstellingen voor toegankelijkheid die aangepaste afstanden toepassen op alle websites die ze bezoeken.

Neem een concreet scenario: een universiteitsstudente met dyslexie bezoekt een Turks e-commerceplatform om vóór een tentamen het retourbeleid van een product te controleren. Ze gebruikt een browserextensie die de regelhoogte wereldwijd op 1,7 en de letterafstand op 0,14em instelt. Op de productdetailpagina staat de tekst van het retourbeleid in een <div> met vaste hoogte, gestyled met height: 120px; overflow: hidden;. Met haar aangepaste afstanden actief zijn alleen de eerste twee regels zichtbaar en is er geen mechanisme om de rest te tonen. Ze kan haar taak niet voltooien en verliest het vertrouwen in het platform. Dit is precies het falen dat WCAG 1.4.12 wil voorkomen.

Naast toegankelijkheid voor mensen met een beperking zijn er secundaire voordelen. Flexibele, afstandsbestendige lay-outs zijn doorgaans robuuster op internationale markten — Turkse tekst bevat bijvoorbeeld vaak langere woordvormen door agglutinatieve morfologie, en lay-outs die geen afstandsvariatie kunnen opvangen, hebben ook de neiging te breken bij langere tekenreeksen. Toegankelijke lay-outs verbeteren indirect ook SEO: inhoud die leesbaar en toegankelijk is, heeft doorgaans lagere bouncepercentages en betere betrokkenheidssignalen, die zoekmachines meewegen in hun rankings.

Gerelateerde Axe-core Regels

WCAG 1.4.12 vereist handmatig testen en kan niet volledig door alleen geautomatiseerde tools worden geverifieerd. Dit komt doordat geautomatiseerde engines niet kunnen voorspellen hoe een lay-out zich zal gedragen onder door de gebruiker toegepaste stijloverschrijvingen zonder die overschrijvingen daadwerkelijk toe te passen en het gerenderde resultaat te meten — een proces dat visuele inspectie of een headless rendering-vergelijking vereist. De axe-core engine bevat om deze reden geen speciale geautomatiseerde regel voor 1.4.12.

• Handmatig testen met de Text Spacing Bookmarklet: De aanbevolen testaanpak is de Text Spacing Bookmarklet, gemaakt door Steve Faulkner (nu onderhouden door de toegankelijkheidsgemeenschap). Deze bookmarklet injecteert een stylesheet in de huidige pagina die alle vier de afstandseigenschappen gelijktijdig op hun minimale drempelwaarden instelt. De tester controleert vervolgens visueel (of met een schermlezer) of inhoud wordt afgekapt, overlapt of ontoegankelijk is. De bookmarklet-aanpak is de standaard waarnaar wordt verwezen in het W3C Understanding-document voor 1.4.12.
• Waarom automatisering tekortschiet: Geautomatiseerde scanners zoals axe-core analyseren de DOM en de berekende stijlen zoals die op het scantijdstip bestaan. Ze simuleren geen gebruikersstylesheets of renderen de pagina niet opnieuw om lay-out-overflow of afkapping te detecteren die door die overschrijvingen wordt veroorzaakt. Een container met overflow: hidden en een vaste hoogte zal een geautomatiseerde scan doorstaan omdat dit op zichzelf geen toegankelijkheidsfout is — het wordt er pas een wanneer de afstand wordt vergroot. Alleen door de overschrijving toe te passen en het resultaat te observeren kan een tester een falen bevestigen.
• Aanvullende geautomatiseerde controles: Hoewel geen enkele axe-regel direct overeenkomt met 1.4.12, moeten reviewers er ook op letten dat de axe-regel scrollable-region-focusable en kleurcontrastregels gerelateerde problemen kunnen blootleggen die bijdragen aan een slechte ervaring met tekstafstand. Daarnaast kan de toegankelijkheidsaudit van Lighthouse containers met vaste afmetingen in bepaalde contexten markeren, zij het niet specifiek voor naleving van afstandsvereisten.

Hoe te Testen

1. Installeer de Text Spacing Bookmarklet. Navigeer naar de Steve Faulkner Text Spacing Bookmarklet-pagina (toegankelijk via het W3C Understanding-document of een webzoekopdracht naar "text spacing bookmarklet WCAG"). Sleep de bookmarklet naar de bladwijzerbalk van je browser. Maak eventueel handmatig een bladwijzer aan en plak de JavaScript van de bookmarklet als URL.
2. Open de te testen pagina in je browser op het standaardzoomniveau (100%). Navigeer naar de pagina of component die je wilt evalueren — bijvoorbeeld een productoverzichtspagina, een afrekenformulier of een navigatiemenu.
3. Activeer de bookmarklet. Klik op de bookmarklet. Deze injecteert CSS die line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important en de marge-onderkant van p op 2em !important instelt op de hele pagina.
4. Inspecteer de hele pagina visueel. Scroll door alle inhoudsgebieden. Let op: tekst die onderaan een container wordt afgekapt; knoplabels of linktekst die verdwenen of gedeeltelijk verborgen zijn; navigatiemenu’s of dropdowns waarbij items overlappen; formuliervelden waarbij placeholder- of labeltekst wordt afgekapt; en modale dialogen of tooltips waarbij inhoud buiten de containergrens stroomt.
5. Interageer met interactieve elementen. Doorloop met Tab alle focusbare elementen, activeer dropdowns, open modals en verstuur formulieren. Controleer of alle interactieve bedieningselementen bedienbaar blijven en of hun zichtbare labels volledig leesbaar zijn met de toegepaste afstanden.
6. Test met een schermlezer op functieverlies. Gebruik, terwijl de bookmarklet nog actief is, NVDA met Firefox of JAWS met Chrome om de pagina te navigeren op koppen, landmarks en interactieve elementen. Controleer of de leesvolgorde en aangekondigde inhoud overeenkomen met wat een ziende gebruiker ziet. Gebruik VoiceOver in Safari op macOS of iOS voor dekking van Apple-platformen.
7. Test bij een viewportbreedte van 320px. Verklein het browservenster tot 320 CSS pixels breed (of gebruik de responsieve modus van de browser DevTools). Activeer de bookmarklet opnieuw. Controleer of de inhoud nog steeds toegankelijk is zonder horizontaal scrollen en of tekst niet wordt afgekapt bij kleine viewportbreedtes in combinatie met grotere afstanden.
8. Documenteer fouten. Noteer voor elke fout: het elementtype, de CSS-klasse of ID, de specifieke afstandseigenschap die de fout veroorzaakt en een screenshot vóór en na het activeren van de bookmarklet.

Hoe te Herstellen

Container met vaste hoogte die tekst afkapt — Onjuist

<!-- 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>

Container met vaste hoogte die tekst afkapt — Juist

<!-- 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 -->

Knoplabel afgekapt door vaste knophoogte — Onjuist

<!-- 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>

Knoplabel afgekapt door vaste knophoogte — Juist

<!-- 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>

Tooltip of dropdown die overloopt zonder scroll — Onjuist

<!-- 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>

Tooltip of dropdown die overloopt zonder scroll — Juist

<!-- 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>

Alinea-afstand die kaartlay-out breekt — Onjuist

<!-- 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>

Alinea-afstand die kaartlay-out breekt — Juist

<!-- 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>

Veelvoorkomende Fouten

• height gebruiken in plaats van min-height op tekstcontainers. Een vaste height op elk element dat tekst bevat, zal tekst afkappen zodra de gebruiker de regelhoogte of letterafstand vergroot. Vervang alle vaste hoogtes op tekstdragende containers door min-height, zodat de container kan meegroeien.
• overflow: hidden instellen op containers die alinea-tekst bevatten. Dit is de meest voorkomende oorzaak van 1.4.12-fouten. Verborgen overflow kapt tekst af die verticaal uitzet wanneer de afstand toeneemt. Gebruik overflow: visible of overflow: auto, afhankelijk van de ontwerpcontext.
• white-space: nowrap gebruiken op knop- of linklabels zonder voldoende containerflexibiliteit. Wanneer de letterafstand toeneemt, kan tekst zonder regeleinde buiten de oudercontainer lopen of worden afgekapt, vooral in navigatie-items met vaste breedte.
• Footer- of actieregels absoluut positioneren binnen een kaart met vaste hoogte. Wanneer de kaartinhoud groeit door overschrijvingen van afstanden, overlappen absoluut gepositioneerde elementen onderaan de kaart de tekst. Gebruik in plaats daarvan een flexbox-kolomlay-out.
• max-height toepassen met overflow: hidden op uitklapbare secties die in uitgeklapte staat zijn. Geanimeerde accordeons die uitklappen tot een berekende max-height-waarde op basis van pixelmetingen, zullen tekst afkappen op die pixelgrens wanneer afstanden worden overschreven, zelfs wanneer ze volledig geopend zijn.
• CSS line-clamp (webkit-line-clamp) gebruiken zonder een zichtbare mogelijkheid om de volledige inhoud uit te klappen. Tekst beperken tot een vast aantal regels is alleen acceptabel als er een duidelijk gelabelde, met het toetsenbord bedienbare bediening is om de volledige inhoud te tonen. Beperken zonder enige uitklapmogelijkheid voldoet niet aan 1.4.12.
• Vertrouwen op JavaScript om elementhoogtes dynamisch in pixels in te stellen. Scripts die elementhoogtes meten en deze pixelwaarden vervolgens als inline stijlen vastzetten, vergrendelen de container op een grootte die gebruikersoverschrijvingen van afstanden negeert. Gebruik intrinsieke afmetingen en laat CSS de lay-out afhandelen.
• Aannemen dat geautomatiseerde toegankelijkheidsscans alle 1.4.12-fouten zullen vinden. Teams die uitsluitend vertrouwen op axe of Lighthouse zonder de Text Spacing Bookmarklet uit te voeren, zullen alle op lay-out gebaseerde afstandsfouten missen. Handmatig testen met de bookmarklet is verplicht voor dit criterium.
• Navigatiemenu’s en mega-menu’s niet testen met de bookmarklet. Navigatiecomponenten worden vaak gebouwd met vaste pixelhoogtes en verborgen overflow om een gepolijst visueel resultaat te creëren. Het zijn ook de componenten die het vaakst falen voor 1.4.12, omdat grotere afstanden ervoor zorgen dat menu-items afbreken en worden afgekapt.
• De afstandswaarden behandelen als ontwerpvereisten in plaats van testdrempels. Sommige teams reageren op 1.4.12 door hun standaardstijlen bij te werken naar de drempelwaarden, wat onnodig is en mogelijk in strijd is met de intentie van de ontwerper. Het criterium vereist alleen dat de lay-out niet breekt wanneer die waarden worden toegepast — niet dat ze de standaard zijn.

Relatie met de Turkse Toegankelijkheidsregelgeving

WCAG 1.4.12 Tekstafstand is direct relevant voor het opkomende juridische toegankelijkheidskader van Turkije. De belangrijkste recente ontwikkeling is de Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025. Deze circulaire stelt bindende verplichtingen vast voor een breed scala aan organisaties om digitale toegankelijkheid te waarborgen voor hun webaanwezigheid en mobiele applicaties.

De circulaire heeft betrekking op een brede reeks entiteitstypen. Overheidsinstellingen en -agentschappen op alle bestuursniveaus moeten voldoen. Partijen in de private sector binnen de reikwijdte zijn onder meer e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE). Deze organisaties moeten voldoen aan Level AA-conformiteit met WCAG, waaronder 1.4.12, als onderdeel van hun verplichtingen onder de circulaire.

Naleving op Level AA is ook een voorwaarde voor het verkrijgen van het Accessibility Logo (Erişilebilirlik Logosu) dat wordt uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı). Dit logo geeft aan gebruikers, in het bijzonder mensen met een beperking, aan dat een digitaal product is geaudit en voldoet aan de vereiste toegankelijkheidsstandaard. Voor organisaties die de Turkse gemeenschap van mensen met een beperking bedienen — geschat op enkele miljoenen mensen, waaronder mensen met visuele, cognitieve en leesbeperkingen — heeft het logo zowel reputatie- als regelgevingswaarde.

In praktische termen geldt dat een Turks e-commerceplatform dat productbeschrijvingscontainers met vaste hoogte en overflow: hidden gebruikt, of een overheidsportaal waarvan het navigatiemenu tekst afkapt wanneer een gebruiker afstandsoverschrijvingen toepast via een browserextensie of een toegankelijkheidsinstelling van het besturingssysteem, niet alleen zijn gebruikers in de steek laat — het is mogelijk ook niet in overeenstemming met de verplichtingen die zijn vastgelegd in de circulaire 2025/10. Tekstafstand-fouten zijn in het bijzonder relevant voor Turkse gebruikers met dyslexie en slechtziendheid die afhankelijk zijn van hulpmiddelen voor aangepaste afstanden, en voor gebruikers die overheids- of commerciële diensten benaderen op mobiele apparaten, waar instellingen voor tekstgrootte van het besturingssysteem ook lay-outinstabiliteit kunnen veroorzaken die vergelijkbaar is met afstandsoverschrijvingen.

Organisaties die de Erişilebilirlik Logosu willen verkrijgen, moeten een handmatige audit van tekstafstand met behulp van de Text Spacing Bookmarklet opnemen als verplichte stap in hun toegankelijkheidsauditproces, naast geautomatiseerde scans en schermlezertests. Het verhelpen van 1.4.12-fouten — voornamelijk door vaste hoogtes te vervangen door min-height, onnodige overflow: hidden uit tekstcontainers te verwijderen en flexibele CSS-lay-outtechnieken toe te passen — is over het algemeen haalbaar zonder significante ontwerpwijzigingen en vertegenwoordigt een verbetering met hoge waarde en lage kosten voor de toegankelijkheid van elke Turkse digitale dienst.