Toegankelijkheid en hoofdletters: waarom tekst in HOOFDLETTERS slecht leest
Tekst in hoofdletters is prima voor een label van twee woorden en een slechte keuze voor alles wat langer is. Lange reeksen hoofdletters lezen langzamer, ze gooien informatie weg die gewone spelling met hoofd- en kleine letters wel meegeeft (is ‘US’ het land of het Engelse ‘us’, oftewel ‘ons’?), en schermlezers negeren hoofdletters grotendeels. De nadruk die je bedoelde verdwijnt dus, terwijl hier en daar een kort woord letter voor letter wordt uitgesproken. Toegankelijk werkt het zo: schrijf tekst gewoon met hoofd- en kleine letters en laat CSS de hoofdletters zetten waar een ontwerp ze echt wil, al is zelfs dat niet waterdicht.
Waarom hoofdletters in lange stukken moeilijker te lezen zijn
Onderzoekers vergelijken al bijna een eeuw het lezen van hoofdletters en kleine letters. Kevin Larsons artikel voor Microsoft, ‘The Science of Word Recognition’, vat onderzoeken samen die teruggaan tot Woodworth in 1938: lezers werkten passages in kleine letters 5 tot 10 procent sneller door dan dezelfde passages in hoofdletters.
De populaire verklaring is de ‘woordvorm’ (word shape): woorden in kleine letters hebben dankzij boven- en onderlengtes een herkenbare omtrek, terwijl hoofdletters van elk woord een rechthoek maken. Larson betoogt dat het bewijs dat niet ondersteunt. We herkennen woorden aan hun letters, en kleine letters winnen vooral omdat we daar het meest op oefenen. Wie veel hoofdletters leest, wordt er sneller in.
Dat is een nuttige correctie, maar het redt de alinea in hoofdletters op je site niet. Je lezers hebben die oefening niet gehad, en het hardst komt dat aan bij mensen voor wie lezen al moeite kost. De MDN-pagina over text-transform waarschuwt dat grote stukken tekst in hoofdletters ‘may be difficult for people with cognitive concerns such as Dyslexia to read’ (moeilijk te lezen kunnen zijn voor mensen met cognitieve problemen, zoals dyslexie). De stijlgids van GOV.UK laat het zelf zien: ‘DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.’ (Gebruik geen hoofdletters voor grote hoeveelheden tekst, want dat leest nogal moeilijk.)
Hoofdletters gooien informatie weg
Hoofd- en kleine letters door elkaar zijn geen versiering. Een hoofdletter vertelt je dat een woord een naam, een afkorting of het begin van een zin is. Lees dit Engelse voorbeeld en merk hoeveel je moet raden:
PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.De Verenigde Staten, of ‘us’ (ons)? Klanten in Polen, of meubelwas (‘polish’)? De maand maart, of een protestmars (‘march’)? Zodra tekst in hoofdletters is getypt, kan software het antwoord ook niet meer terughalen. Haal die regel door de optie Zinsvorm (Sentence Case) in onze hoofdletter-converter en je krijgt ‘Please contact us about polish orders in march. Nasa says hi.’ Alles wordt in kleine letters gezet en het begin van elke zin krijgt een hoofdletter; meer kan de tool niet weten. De namen moet je met de hand terugzetten.
Wat schermlezers met tekst in hoofdletters doen
Meestal: niets. Schermlezers spreken de woorden uit en zeggen niets over de hoofdletters. In 2022 testte toegankelijkheidsconsultant Adrian Roselli juridische tekst in hoofdletters met JAWS, NVDA, Narrator, Orca, VoiceOver en TalkBack op de standaardinstellingen, en geen van allen liet de luisteraar weten dat de tekst in hoofdletters stond. Opties zoals de toonhoogteverandering van NVDA of ‘say cap’ zijn bedoeld om teken voor teken door een tekst te lopen, niet voor zinnen die hardop worden voorgelezen.
Dat heeft twee gevolgen:
- Hoofdletters die iets betekenen, gaan verloren. Als hoofdletters jouw manier zijn om ‘dit is belangrijk’ te zeggen (een waarschuwing, een contractclausule, een geroepen woord), hoort een luisteraar gewone tekst. Voor braillelezers geldt dat niet, want braille kent een hoofdletterteken.
- Sommige korte woorden worden gespeld. Spraaksynthesizers gokken of een reeks hoofdletters een afkorting is. Roselli noemt ‘AM’, ‘ADD’ en ‘IT’ als woorden die schermlezers in hoofdletters vaak spellen, en uit de praktijk is gemeld dat ‘CONTACT US’ werd uitgesproken als ‘contact U.S.’
Welke woorden worden gespeld, hangt af van de schermlezer, de stem, de instellingen van de gebruiker en soms de browser, en het verschuift per versie. Je kunt het niet betrouwbaar voorspellen, en dat is het beste argument om belangrijke woorden om te beginnen niet in hoofdletters te zetten.
Maak letterspatiëring nooit na met spaties
Ruim gespatieerde hoofdletters zijn een populaire ontwerptouch, en ze typen als S A L E is de slechtste manier om die look te krijgen. Schermlezers lezen elke letter afzonderlijk, en WCAG noemt ‘using white space characters to control spacing within a word’ (spatietekens gebruiken om de ruimte binnen een woord te regelen) als fout (techniek F32). Gebruik in plaats daarvan CSS letter-spacing, zoals in het voorbeeld hieronder.
Zet hoofdletters met CSS text-transform: uppercase in plaats van ze te typen
Moet een knop, tab of kleine kop eruitzien als hoofdletters, schrijf de tekst dan met gewone hoofd- en kleine letters en laat CSS het uiterlijk aanpassen:
<button class="caps">Add to basket</button>
.caps {
text-transform: uppercase;
letter-spacing: 0.06em; /* capitals need a little extra room */
}De tekst in je HTML blijft ‘Add to basket’, en dat levert je een paar dingen op:
- Redesigns kosten weinig. De hoofdletters later weghalen is één regel CSS, geen zoektocht door elk label en elk vertaalbestand.
- De tekst reist goed mee. Feeds, exports en alle andere plekken die je stylesheet niet bereikt, krijgen woorden met gewone hoofd- en kleine letters.
- Talen worden voor je geregeld. Browsers passen taalregels toe op basis van het
lang-attribuut. De MDN-referentie voor text-transform somt ze op: Griekse klinkers verliezen bijvoorbeeld hun accenten in hoofdletters, en het Turks koppeltiaanİ. Met CSS behoudt het opgeslagen Grieks zijn accenten; getypte hoofdletters zouden die voorgoed kwijtraken.
Overdrijf het echter niet. Browsers kunnen de omgezette tekst doorgeven aan hulptechnologie. Een in 2016 gemelde WebKit-bug, nog altijd open, beschrijft hoe VoiceOver een met CSS in hoofdletters gezette knop ‘Add to Cart’ voorleest als ‘A D D to cart’, en ontwikkelaars hebben hetzelfde gemeld met VoiceOver in Chrome. Bovendien blijven CSS-hoofdletters voor ziende lezers gewoon hoofdletters, dus aan de kosten van lange reeksen verandert niets. Zie text-transform als de juiste manier om hoofdletters op een paar woorden toe te passen, niet als vrijbrief om alinea's in hoofdletters te zetten.
Wanneer hoofdletters prima zijn, en wat je anders gebruikt
Hoofdletters zijn niet verboden. WCAG heeft geen succescriterium ertegen, en korte reeksen geven weinig problemen. Wij zouden ze bewaren voor:
- Echte afkortingen, zoals NASA, HTML en BBC.
- Korte labels, tabs en het kleine ‘eyebrow’-regeltje boven een kop. Onze vuistregel is drie woorden of minder, toegepast met CSS.
- Eén enkel badgewoord zoals ‘New’, zolang er niets van afhangt dat je het als bijzonder hoort.
Gebruik voor al het andere iets wat een nieuwe opmaak of voorlezen overleeft:
- Nadruk: gebruik
<strong>en geef het vorm met gewicht of grootte. De meeste schermlezers kondigen vet standaard ook niet aan, dus leg het belangrijke in de woorden zelf: ‘Je kunt dit niet ongedaan maken’ zegt meer dan welke opmaak ook. - Waarschuwingen: een korte, gewone kop (‘Als je je account verwijdert, worden al je bestanden verwijderd’) doet wat een blok hoofdletters probeerde te doen, en hij wordt voorgelezen.
- Juridische tekst: Amerikaanse contracten zetten garantiebeperkingen vaak in hoofdletters, omdat de Uniform Commercial Code eist dat ze ‘conspicuous’ (opvallend) zijn. De definitie eist geen hoofdletters in de lopende tekst van een document: grotere letters, een contrasterend lettertype of een contrasterende kleur, of tekens die de tekst laten opvallen, tellen ook mee. Overleg met wie je voorwaarden opstelt voordat je ze verandert, maar hoofdletters zijn niet de enige weg.
Unicode-‘kleinkapitalen’ zijn helemaal geen hoofdletters
Onze Sierlijke Unicode-tekstgenerator heeft een stijl ‘Kleinkapitalen’, en het is goed om eerlijk te zijn over wat die oplevert. Typ ‘Sale on now’ en je krijgt ‘sᴀʟᴇ ᴏɴ ɴᴏᴡ’. Dat zijn geen kleiner getekende letters; het zijn andere tekens, grotendeels geleend uit fonetische alfabetten. Sommige letters hebben geen kleinkapitaalversie, daarom blijft de ‘s’ een gewone kleine s en wordt ‘q’ ‘ǫ’, een o met een ogonek.
Voor software zijn dit losstaande symbolen, dus spellingcontroles markeren ze vaak en zoekopdrachten naar het gewone woord kunnen ze missen. Schermlezers gaan zeer wisselend om met tekens die op letters lijken; toen vergelijkbare ‘nep-vette’ letters werden getest, sloegen sommige schermlezers de woorden helemaal over. In onze gids over schrijven voor schermlezers lopen we die test door. Gebruik deze stijlen als decoratie naast gewone tekst, nooit voor woorden die iemand moet horen.
Een korte checklist voor hoofdletters
- Typ tekst met gewone hoofd- en kleine letters en zet hoofdletters met
text-transform. - Houd hoofdletters bij een paar woorden. Nooit bij een alinea.
- Geef hoofdletters wat
letter-spacing, en gebruik daar nooit spaties voor. - Leg betekenis in woorden, niet in opmaak.
- Luister vóór de lancering naar je belangrijkste knoppen en labels met VoiceOver en NVDA.
- Houd Unicode-letters die op andere letters lijken weg uit alles wat ertoe doet.
Voor de plekken waar hoofdletters in geschreven tekst echt thuishoren, van afkortingen tot juridische koppen, lees je onze gids over wanneer je hoofdletters gebruikt.
