Digitale toegankelijkheid: Leesbaarheid

Het doel van dit blog is om je inzicht te geven op welke manier je een website toegankelijker kan maken. Als je eenmaal door hebt waar je op moet letten is het goed om jezelf aan te leren om dit consequent te doen.

Ik vind mezelf geen expert op dit gebied. Ik ben wel webdesigner en vormgever en ken de tools die je moet gebruiken. Daarom kaart ik kort aan waar je op moet letten. Wil je hier serieus mee bezig dan kan ik je deze twee websites aanraden:

1. De internet academie – een website vol met tips en trainingen over internetonderwerpen
2. Accessibility – website van stichting Accessibility, onderdeel van Bartimeus.

Begrijpelijke teksten

Er zijn heel veel mensen in Nederland die moeite hebben met lezen. Vermijd vaktermen of leg ze uit. Gebruik korte zinnen en simpele woorden. Elke lezer is hier bij gebaat.

Bedenk van te voren wat het doel van je pagina is. Dit kan je doen door denkbeeldige vragen van je lezers te beantwoorden. Blijf bij het onderwerp en haal overbodige informatie eruit. Heb je veel te vertellen? Bedenk of je daar een ander blog mee kan vullen.

Structureer je tekst

Zorg je dat het belangrijkste wat je wilt vertellen, bovenin staat. Heb je een call-to-action, zet deze onder de leadtekst, deze legt de titel van je artikel uit.

Daarna diep je jouw onderwerp uit in korte alinea’s die je voorziet van kopteksten. In een paragraaf maak je gebruik van korte alinea’s met genoeg witruimte er tussen. Witruimte zorgt ook weer voor meer rust.

Wees spaarzaam in het vetgedrukt en schuingedrukt maken van woorden. Er zijn lezers voor wie dit juist heel onrustig is.

HTML elementen voor kopteksten

Om een kopje te maken kies je in je Gutenberg editor* voor koptekst. De editor in je WordPress website bied de mogelijkheid om een kopje te maken. Je kan kiezen voor een h1, h2, h3 etc. De h1 is voorbehouden aan de titel van je bericht of pagina. Alle kopjes daaronder maak je aan in een logische hiërarchie. Ga niet je teksten vetgedrukt maken en een paar punten groter om een kopje aan te geven.

Hieronder zie je een voorbeeld van de code die een schermlezer toont. Hij leest dan bijvoorbeeld op kop h2, in 3 stappen je blogfunctie aanpassen.

Je kiest voor een kopje boven de alinea een h2 en als je dat gedeelte van de tekst nog verder wil indelen een h3 als subkop.

Opsommingen en lijstjes

Het gebruik van geordende of genummerde lijstjes zijn aan te raden omdat deze overzichtelijk zijn en makkelijk te lezen. Beperk je in het aantal woorden en items in een lijstje.

Gebruik het opsommings element uit je editor en ga niet zelf een lijstje maken. Deze heet in Gutenberg “Lijst”

Geef in de linktekst aan waar je naartoe navigeert

Je kan op meerdere manieren een link in je website zetten. Op een stuk tekst, op een button, op een titel of een afbeelding.

Er wordt bij een audit gekeken naar linkdoel (wordt er duidelijk omschreven waar je heen gaat) en linktekst (onderstreepte tekst waar de link op staat). Het linkdoel kan ook omschreven worden boven de link tekst. Een linktekst zoals lees verder kan je gebruiken. Mits de omliggende context ook duidelijk maakt waar je naar toe gaat, als je er op klikt.

De link moet er anders uit zien dan de tekst er om heen. Om deze reden zijn linkjes vaak onderstreept. In veel gevallen zie je nog dat ze een andere kleur hebben en vetgedrukt zijn. Dit is niet heel onderscheidend als je dit ook met andere teksten doet waar geen link op zit.

Gebruik een omschrijvende tekst en onderstreep je linkjes. Vaak zie je er alleen een kleur wordt toegepast, waardoor ze te weinig opvallen als link.

In de CSS code van je thema kan je dit aanpassen als dit nog niet het geval is.

Link of button gebruiken?

In principe is een button een knop waarmee je een actie uitvoert. Bijvoorbeeld ‘verzend het formulier’ , download het stappenplan’ of ‘login’. Een button kun je bij sommige WordPress thema’s ook een tekst-alternatief of aria-label meegeven. Mensen die een schermlezer gebruiken krijg dan meer uitleg.

Wil je iemand naar een ander deel van je website sturen? Dan gebruik je een tekstlink.

Google ranking is er ook bij gebaat. Hoe? De crawlers kijken ook naar de context waarbinnen een link staat.

Blogoverzicht met foto en de titel als link

In onderstaand voorbeeld hebben we er voor gekozen om de afbeeldingen die decoratief zijn geen ALT tekst mee te geven. De titel is ook de link naar het hele blog. Hiermee vermijd je dat je de standaard ‘lees verder’ link die WordPress plaats in het blogoverzicht. Uiteraard moet de titel wel een duidelijk linkdoel hebben. Hier ontbreekt een alinea onder de titel, waarin je uitlegt wat hier te zien is.

*De Gutenberg editor zit standaard in WordPress sinds versie 5.0 / eind 2018. Ik raad je aan om te werken met deze editor en niet meer met de klassieke. Deze is gedateerd en bied niet de nieuwe mogelijkheden voor een mooiere opmaak van je berichten en pagina’s