Toegankelijke tekst: 3 tips voor webredacteuren

Blog
Publicatiedatum:

Over eenvoudig taalgebruik, een goede koppenstructuur en beschrijvende linkteksten.

Een toegankelijke website is bruikbaar door iedereen, los van plaats, device of beperking. Sinds juli 2018 zijn (semi)overheden wettelijk verplicht om hieraan te voldoen. Nu kun je je website toegankelijk bouwen, hij moet ook toegankelijk blijven! Webredacteuren spelen hier een belangrijke rol in, want zij houden de website up to date met het toevoegen van content. In dit artikel geef ik drie tips die helpen bij het schrijven van toegankelijke teksten op het web.

Tip 1: schrijf eenvoudige teksten

Om er voor te zorgen dat zoveel mogelijk bezoekers je teksten begrijpen, is het belangrijk dat teksten in eenvoudig Nederlands zijn geschreven. De overheid gebruikt leesniveau B1 als richtlijn.

Taalniveaus

Er zijn zes verschillende taalniveaus vastgesteld: A1, A2, B1, B2, C1 en C2. Mensen met een A niveau zijn basisgebruikers, mensen met een B niveau zijn onafhankelijke gebruikers en mensen met een C niveau zijn vaardige gebruikers, zoals de Universiteit van Amsterdam de taalniveaus omschrijft. Binnen de niveaus zijn ook weer niveaus te onderscheiden.

Hoewel overheidsinstanties wettelijk verplicht zijn om zich aan de webrichtlijnen te houden om een toegankelijke website te creëren, valt het taalniveau buiten deze verplichting. Een belangrijke reden om B1 wel als richtlijn aan te houden is dat er in Nederland 2.5. miljoen mensen moeite hebben met lezen en schrijven. Bovendien is taalniveau B1 niet alleen geschikt voor mensen met een lager opleidingsniveau. Hoger opgeleiden en vaardige gebruikers lezen ook liever teksten op B1 niveau.

Kenmerken van taalniveau B1

De volgende punten zijn kenmerkend voor teksten in taalniveau B1:

  • De opbouw van de tekst is duidelijk. De belangrijkste boodschap staat bovenaan.
  • Er is een actieve en persoonlijke schrijfstijl met eenvoudige woorden. Deze woorden komen veel voor en hebben een letterlijke betekenis.
  • Een alinea bestaat uit maximaal 10 tot 15 zinnen, of ongeveer 100 woorden. Ook zijn ze voorzien van duidelijke koppen.

Testen van het taalniveau

Stichting Accessibility heeft een testtool gemaakt om het leesniveau van je tekst te bepalen. In de leesniveau tool kun je je tekst invoeren die vervolgens door de controle gaat. Na de controle geeft de tool een indicatie aan van het niveau.

Tip 2: structureer tekst met koppen

Koppen structureren je content en delen je content op in secties. Ze zijn vaak te herkennen aan hun vormgeving: de letters zijn groter, zijn dikgedrukt en/of hebben een andere kleur dan de lopende tekst. Net als hoofdstuktitels in een boek zouden ze moeten beschrijven waar de opvolgende paragrafen inhoudelijk over gaan. Op die manier kunnen gebruikers eenvoudig achterhalen wat voor informatie je ze wil vertellen.

HTML element voor koppen

Voor het maken van koppen op je website zijn er heading tags beschikbaar. Dit zijn HTML elementen die de kop niet alleen qua vormgeving als kop eruit laten zien, maar ook onder water door screenreaders als kop herkend worden. Dit maakt het voor screenreader gebruikers makkelijker om van kop naar kop te navigeren en de structuur van de pagina te scannen.

Koppen niveaus

Er zijn zes niveaus in HTML beschikbaar om koppen te maken: <h1>, <h2>, <h3>, <h4>, <h5> en <h6>. Het eerste kopniveau, de <h1>, is toegekend aan de paginatitel en komt bij voorkeur maar één keer op de pagina voor. De andere niveaus van de heading tags kun je vrij gebruiken om je tekst te structureren. Het is hierbij wel van belang dat de koppen juist genest zijn.

Voorbeeld 2.1.:

<h1>Fietsen</h1>
<h3>Fietsenmaker</h3>
<h2>Lekke band</h2>

In voorbeeld 2.1. is een incorrecte koppenstructuur gemaakt. Er is namelijk een kopniveau overgeslagen: de <h1> is opgevolgd door een <h3>. Door een niveau over te slaan is het lastiger om goed te kunnen navigeren op een pagina en de structuur van de content te scannen. De hiërarchie klopt niet meer. Tekst die gestructureerd is onder een <h3> bevat (idealiter) informatie ter ondersteuning van de tekst die onder de tweede kop is beschreven. Je kunt het vergelijken met de structuur van een boek. De <h1> is de boektitel. De <h2> elementen zijn alle hoofdstuktitels van het boek en de <h3> elementen zijn de subtitels die onder de hoofdstuktitels vallen. Ook in een boek zou je niet verwachten dat een subtitel direct onder de boektitel valt. In voorbeeld 2.2. is de koppenstructuur van voorbeeld 2.1. gecorrigeerd.

Voorbeeld 2.2.:

<h1>Fietsen</h1>
<h2>Fietsenmaker</h2>
<h3>Lekke band</h3>

Koppen in de teksteditor van Drupal

In de teksteditor van Drupal kun je koppen maken in je tekst, zowel visueel als onder water. Op die manier hoef je zelf geen HTML toe te voegen. Hoe werkt dit? Je selecteert de tekst en vervolgens kun je een stijl toekennen aan deze geselecteerde tekst. De verschillende stijlen vind je in de balk van de editor. In de balk is een uitklapper waarin je stijlen kan selecteren. Als je een kop wil toevoegen van het tweede niveau, klik je de “format” uitklapper open en klik je “heading 2” aan. De bijbehorende vormgeving wordt toegepast en onder water wordt de <h2> toegewezen aan de geselecteerde tekst.

Geselecteerde tekst in de editor waaraan de tweede kop wordt toegewezen door middel van de format uitklapper.

Hoe koppen in de editor niet te gebruiken

Omdat onder water de HTML kop-elementen worden toegevoegd aan de tekst, is het belangrijk dat het toekennen van de styling van koppen in de editor alleen voor koppen wordt gebruikt. Gebruik het dus niet omdat je tekst groter, dikgedrukt of in een andere kleur wil weergeven om het te laten opvallen. Hierdoor wordt de structuur incorrect. Wil je tekst op dezelfde manier als een kop weergeven dan kun je altijd de verantwoordelijke websitebouwer vragen een extra stijl toe te voegen aan de teksteditor die alleen de vormgeving toepast en niet de structuur beïnvloedt.

Hoe de bold functionaliteit in de editor niet te gebruiken

Een kop voeg je in de editor niet toe door geselecteerde tekst dikgedrukt te maken door middel van de “B” knop. De tekst ziet er dan wel uit als kop, maar het is geen echte kop, omdat er onder water geen HTML kop element wordt toegevoegd.

Testen van de koppenstructuur

HeadingsMap is een browser extensie die de koppenstructuur weergeeft. Hiermee kun je testen of de koppen duidelijk zijn en of je geen kopniveau hebt overgeslagen.

Tip 3: maak links duidelijk en uniek

Links zijn een ideale manier om bezoekers naar andere content op je website te verwijzen of om een externe bron toe te voegen met verdiepende informatie. Voor screenreader gebruikers zijn links, naast koppen, ook een manier om te navigeren op een pagina. Het is namelijk mogelijk om met een screenreader van link naar link te “springen”. Om goed te kunnen navigeren, is het belangrijk dat links tekst bevatten die duidelijk, beschrijvend en uniek is.

Duidelijke linktekst

Op het moment dat een screenreader gebruiker een link geselecteerd heeft, wordt de linktekst voorgelezen. Uit de linktekst zelf moet dus duidelijk worden waar de pagina over gaat en waar je naartoe wordt verwezen als je op de link klikt. Ook als je de omliggende tekst niet leest. Een voorbeeld:

Voorbeeld 3.1.: Maak kans op een gratis fiets!  Klik hier om je aan te melden.

“Klik hier” wordt voorgelezen in voorbeeld 3.1. Het is zonder de rest van de tekst niet duidelijk dat de link verwijst naar een pagina waar je je kan aanmelden voor een gratis fiets. Een beter voorbeeld is als volgt:

Voorbeeld 3.2.: Maak kans op een gratis fiets! Meld je aan voor de fiets winactie.

In dit geval leest de screenreader voor: “meld je aan voor de fietsactie”. Nu kun je een veel betere inschatting maken waar de link naar toe gaat, namelijk naar een pagina waar ik me kan aanmelden voor de fietsactie. De linktekst is duidelijk en beschrijvend.

Unieke linktekst

Als links met dezelfde linktekst meerdere malen op één pagina voorkomen, is het voor screenreader gebruikers lastig om te vinden wat ze zoeken. Een veel voorkomend voorbeeld hiervan is de “lees meer” link.

Voorbeeld 3.3.:

  • Verdwaald? Met deze fietsapps kom je zo weer thuis. Lees meer.
  • Elektrische fietsen worden steeds populairder. Lees meer.
  • Kies voor een kant-en-klare fietsvakantie. Lees meer.

Als een screenreader gebruiker door de links in bovenstaand voorbeeld zou navigeren, wordt drie keer “lees meer” voorgelezen. Maar, waar ga je dan meer over lezen? Dit is niet duidelijk aan de hand van de linktekst, want deze is steeds hetzelfde. Naast dat de linktekst beschrijvend en duidelijk moet zijn, is het daarom ook van belang dat de linktekst uniek is op de pagina. Het onderwerp waar je de bezoeker meer over wil laten lezen, is daarom juist een goede linktekst. In voorbeeld 3.4. is de linktekst uit voorbeeld 3.4. herschreven.

Voorbeeld 3.4.:

Search Engine Optimization (SEO)

Naast dat een beschrijvende linktekst je link toegankelijk(er) maakt, heeft het ook een positieve invloed op SEO. Zoekmachines zoals Google lezen de linktekst uit, net als screenreaders dat doen. Als Google goed kan analyseren of je link waardevolle informatie biedt, kun je hoger in de zoekresultaten komen.

Testen van de linktekst

Lees de link hardop voor aan je collega. Als je collega een juiste beschrijving geeft van de pagina waar de link naartoe verwijst, dan is de linktekst duidelijk.

Conclusie

Teksten kun je toegankelijk(er) maken door eenvoudige taal te gebruiken op leesniveau B1. Een voorwaarde voor dit leesniveau is dat paragrafen duidelijke koppen bevatten. Koppen kun je maken door het toevoegen van de juiste HTML heading tags. Daarmee kun je een structuur creëren die het voor je bezoekers makkelijker maakt om door je tekst te navigeren. Een andere manier om door tekst te navigeren is door het springen van link naar link. Linkteksten moeten daarom beschrijvend en uniek zijn, ook buiten de context.