Tekst benadrukken
Soms wil je iets extra laten opvallen in je tekst. Bijvoorbeeld een kernwoord, een belangrijke waarschuwing of een tussenkopje in lopende tekst. Dat kan, zolang je het op een toegankelijke manier doet.
Niet alle manieren om nadruk te geven werken voor iedereen. Hoofdletters, onderstreping of kleur kunnen verwarrend zijn of juist het tegenovergestelde bereiken van wat je bedoelt. Door te kiezen voor herkenbare en toegankelijke opmaak, zorg je dat je boodschap bij iedereen overkomt — ook bij mensen die gebruikmaken van een screenreader of een aangepaste weergave.
Op deze pagina lees je hoe je tekst op een toegankelijke manier benadrukt, en wat je beter kunt vermijden.
Dikgedrukt en schuingedrukt
Je kunt woorden of zinsdelen benadrukken door ze vet of schuingedrukt te maken.
Bij goed gebruik van een CMS wordt de vette of schuingedrukte tekst in strong en em elementen geplaatst. Met deze elementen in de code is de nadruk ook duidelijk voor gebruikers van hulptechnologie.
Als contentspecialist werk je meestal in een contentmanagementsysteem (CMS). Veel CMS'en bieden de mogelijkheid om met knoppen vette of schuingedrukte tekst toe te voegen. Vaak hebben de knoppen voor vette tekst of schuingedrukte tekst de letter B (bold) of I (italic).
Door deze knoppen in een CMS te gebruiken, verander je de visuele opmaak én de onderliggende code.
Doen
vette tekst gebruiken om een deel van de zin extra belangrijk te maken.
Je kunt op eigen gelegenheid oversteken. Pas op! Dit is erg gevaarlijk
<p>Je kunt op eigen gelegenheid oversteken. <strong>Pas op!</strong> Dit is <strong>erg gevaarlijk</strong></p>
Doen
schuingedrukte tekst gebruiken om de betekenis van de zin aan te passen.
Moet ik dit nu doen? of Moet ik dit nu doen?
<p><em class="utrecht-emphasis utrecht-emphasis--stressed">Moet</em> ik dit nu doen? of Moet <em class="utrecht-emphasis utrecht-emphasis--stressed">ik</em> dit nu doen?</p>
Niet doen
Hele alinea vet maken omdat je dat mooier vindt.
Dit is een neptekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. De neptekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een neptekst gaat, lezen ze toch door.
<p><strong>Dit is een neptekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. De neptekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een neptekst gaat, lezen ze toch door.</strong></p>
ALL CAPS-tekst
Probeer het gebruik van ‘ALL CAPS’, wat hetzelfde betekent als alléén hoofdletters, tot een minimum te beperken. We herkennen letters aan hun vorm en dan met name de bovenkant van een letter. Eigenlijk maakt je oog steeds sprongetjes aan de bovenkant van een woord. Bij all caps is het onderscheid in lettervorm minder duidelijk, dit vertraagt het lezen.
Doen
Beperkt gebruik maken van all caps
Als je in de HTML all caps gebruikt lezen screenreaders dit vaak voor als losse letters. Geen probleem bij bijvoorbeeld FBI of NBA maar bij VOORNAAM of NIEUWS wordt dat wel heel vreemd.
Daarnaast geeft het ook een gevoel van ‘schreeuwen’. Over het algemeen niet het gevoel dat je wilt overbrengen op de lezer toch… TOCH?!
<p>Als je in de HTML all caps gebruikt lezen screenreaders dit vaak voor als losse letters. Geen probleem bij bijvoorbeeld FBI of NBA maar bij VOORNAAM of NIEUWS wordt dat wel heel vreemd.</p><p>Daarnaast geeft het ook een gevoel van ‘schreeuwen’. Over het algemeen niet het gevoel dat je wilt overbrengen op de lezer toch… TOCH?!</p>
Onderstrepen
Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zin links zijn waar ze op kunnen klikken.
Niet doen
Tekst onderstrepen
Gebruik geen underline. Bezoekers verwachten dat onderstreepte tekst een link is.
<p>Gebruik geen <u>underline</u>. Bezoekers verwachten dat onderstreepte tekst een <a href="" class="utrecht-link utrecht-link--html-a">link</a> is.</p>
Hoe te testen
Lees de pagina goed door en kijk naar alle teksten die opvallen door hun uiterlijk. Bepaal of de nadruk daar écht nodig is en of de teksten met nadruk op de goede manier opgemaakt zijn. Gebruik de onderstaande stappen als checklist:
- Controleer of nadruk is aangebracht via de opmaakknoppen in het CMS (zoals “vet” of “cursief”), en niet door zelf iets op te maken met bijvoorbeeld hoofdletters of kleur. Alleen dan wordt de nadruk correct doorgegeven aan hulptechnologie zoals screenreaders.
- Loop alle teksten in hoofdletters na. Vraag jezelf bij elk geval af: is dit echt nodig? Gebruik hoofdletters alleen als ze functioneel zijn (bijvoorbeeld bij afkortingen).
- Bekijk of er ergens onderstreepte tekst staat die geen link is. Onderstreping suggereert een hyperlink. Als de tekst geen link is, haal de onderstreping weg.
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.