De beste tips om je website toegankelijk te maken voor iedereen

De toegankelijkheid van je website draagt bij aan digitale inclusie

Een tijdje terug ben ik op Instagram het profiel van Tjarda Struik gaan volgen. Tjarda heeft een visuele beperking en ziet slechts 5%. Dit heeft haar nooit tegengehouden om haar dromen en ambities waar te maken. Ze is moeder, psycholoog, spreker, vlogger, ondernemer en ze is actief in de politiek. Daarnaast maakt zij zich hard voor diversiteit en inclusie.

Ze neemt ze je op Instagram mee in haar wereld en laat zien hoe zij omgaat met situaties waar zij in het dagelijks leven tegenaan loopt, maar ook welke stappen jij kunt nemen om inclusie dichterbij te brengen. Zij greep mijn aandacht toen zij op Instagram iets deelde over hoe je als Instagrammer het beste gebruik kunt maken van de alt-beschrijvingen om jouw posts beter toegankelijk te maken voor mensen met een visuele beperking. Dit geldt natuurlijk ook voor de afbeeldingen bij je blogposts en dit inspireerde mij om hier een speciale blogpost aan te wijden.

Want wat is nu een website met blogtips zonder post met uitleg over hoe je je website toegankelijk maakt voor iedereen?

Daarom heb ik Tjarda gevraagd welke aanpassingen wij als bloggers kunnen maken om onze blogs toegankelijk te maken voor iedereen. Haar antwoorden vind je terug in deze post met daarbij uitleg van mij hoe je dit het beste toe kunt passen.

Het toegankelijker maken van je website zou voor elke blogger prioriteit moeten zijn

Voor mij is het verbeteren van de toegankelijkheid van mijn website een belangrijk doel voor 2022. Er moet nog veel gebeuren, maar er wordt aan gewerkt! Door jouw website ook toegankelijk te maken voor slechtzienden help je trouwens niet alleen anderen, maar ook je website.

Je verbetert hiermee namelijk de gebruikerservaring en dat vinden de zoekmachines ook erg fijn! Het is echt een win-win situatie voor iedereen; jij zorgt voor inclusie en een fijnere digitale wereld voor mensen met een beperking en je krijgt er een geheel nieuwe doelgroep en extra SEO-punten bij! Daarom hoop ik dat ook jij het verbeteren van de toegankelijkheid van je website tot één van je doelen maakt voor dit nieuwe jaar!

Voor hoeveel mensen is het belangrijk dat je website toegankelijk is?

Als je de cijfers eenmaal kent, begrijp je ook meteen waarom het zo belangrijk is om je website toegankelijk te maken voor slechtzienden, maar ook hoe bizar het is dat zoveel websites hier nog geen werk van hebben gemaakt.

Dit zijn de cijfers:

Volgens de Oogvereniging zijn er in Nederland 76.000 blinde mensen en 222.000 slechtziende mensen. En dat terwijl volgens de website boia.org slechts 14% van de websites in mei 2021 toegankelijk was voor mensen met een visuele beperking. Geen goede score als je het mij vraagt en het geeft veel ruimte voor verbetering. Hoog tijd voor bloggend Nederland en België om hier verandering in te gaan brengen!

Zo maak je je website toegankelijk voor iedereen

Tjarda heeft mij een hele uitgebreide uitleg gestuurd met alle punten waar wij als bloggers op kunnen letten om onze websites toegankelijk te maken voor iedereen met een visuele beperking. Hier komen ze:

Installeer de plugin Userway Accessibility

Wanneer je deze plugin installeert, komt er een icoontje op je website te staan. Je kunt zelf een design en een geschikte plaats kiezen op je site waar deze vervolgens weergegeven wordt. Wanneer een gebruiker hierop klikt kan zij ervoor kiezen om:

• de fontgrootte te vergroten of te verkleinen;
• het contrast van de pagina te veranderen;
• de hoeveelheid ruimte tussen de teksten aan te passen;
• animaties te pauzeren;
• te kiezen voor grijstinten;
• hyperlinks te onderstrepen;
• de tekst dyslectievriendelijk te maken;
• de cursor groter te maken;
• de tekst anders uit te lijnen;
• de lijnhoogte aan te passen.

Dit ziet er dan zo uit:

Installeer de ReadSpeaker plugin

Een andere plugin die ontzettend helpend kan zijn voor mensen met een visuele beperking is de ReadSpeaker plugin. Deze plugin zet de tekst van een pagina om in natuurlijke spraak met één druk op de knop en je kunt er ook voor kiezen om de tekst te vergroten, een masker over de tekst te leggen of om een tekstversie van de pagina te openen. Met de knoppen bovenaan de pagina kun je uit de verschillende opties kiezen.

Wil jij de ReadSpeaker ook installeren voor jouw website? Kijk dan op de website van ReadSpeaker voor de mogelijkheden.

Wil je geen extra plugin op je website installeren? Let bij het maken van het design van je site dan op de volgende punten:

• Zorg voor een minimale fontgrootte van de bodycopy van 11 punten;
• Laat de tekst links uitlijnen. Oftewel: niet uitvullen. Dat leest rustiger;
• Maak de fontgrootte van de koppen zo groot mogelijk;
• Kies een schreefloos lettertype – letters zonder dwarsstreepjes of verdikkingen;
• Gebruik zoveel mogelijk heldere kleuren zoals blauw, groen en rood;
• Laat kleuren niet vervagen of in elkaar overlopen;
• Zorg voor genoeg contrast tussen de tekstkleur en de achtergrond;
• Zachtgeel of gebroken wit zijn goede kleuren als achtergrondkleur. Mensen die overgevoelig zijn voor licht hebben problemen met fel witte vlakken, vooral als zij op een beeldscherm kijken en vergrotingssoftware gebruiken;
• Laat hyperlinks voldoende opvallen;
• Geef knoppen op je website (zoals de menuknoppen) ook een titel mee waarin de naam van de knop vermeld staat.

Lees ook: hoe zorg je ervoor dat je blog voldoet aan de AVG-wetgeving

Let tijdens het schrijven van je tekst op deze punten:

Geef afbeeldingen een ALT-beschrijving mee

Geef afbeeldingen een ALT-tekst mee. Voor mensen met een visuele beperking is dit erg handig. Sterker nog, alt-teksten zijn bedoeld voor slechtzienden. Veel beginnende bloggers denken dat de alt-beschrijvingen bedoeld zijn om je afbeelding bij te laten dragen aan de SEO van je website, maar deze teksten zijn eigenlijk bedoeld voor de toegankelijkheid van je site. Een speciale screenreader leest namelijk voor wat er in de alt-beschrijving staat en daarom kun je hier het beste samenvatten wat er op de afbeelding te zien is. Voor zoekmachines is de ALT-tekst ook belangrijke extra informatie omdat deze een afbeelding niet kunnen lezen.

Let op: puur illustratieve afbeeldingen geef je geen ALT-tekst. Dit soort afbeeldingen zijn niet noodzakelijk om de boodschap te begrijpen en leveren juist eerder verwarring op.

In WordPress kun je op verschillende manieren een alt-beschrijvingen geven aan je afbeeldingen. Eén optie is via de sidebar tijdens het schrijven van je post bij de WordPress instellingen onder het kopje ‘Blok’ wanneer je op de betreffende afbeelding gaat staan. Je kunt je alt-beschrijvingen ook aanpassen via het WordPress dashboard en dan ga je naar Media en vervolgens naar Bibliotheek. Wanneer je hier een afbeelding aanklikt krijg je aan de rechterkant ook een optie te zien om de alt-beschrijving in te voeren.

Gebruik headers voor koppen tussenkoppen

Mensen die slechtziend zijn scannen met de vergroot- of voorleessoftware eerst de tussenkoppen zodat de structuur van je website duidelijk is voor hen. Daarom is het belangrijk om deze koppen een ‘header’ tag mee te geven. Deze tags zijn trouwens ook ontzettend belangrijk voor een goede zoekmachine optimalisatie (SEO) van je website. Wanneer je je posts een duidelijke layout meegeeft, scoor je hier ook punten mee bij Google. Dus dubbel zoveel reden om de header-tags correct te gebruiken.

Gebruik de header-tags als volgt:

• H1 – Eenmaal voor je titel
• H2 – Voor de koppen
• H3 – Voor de tussenkoppen

Je kunt ook nog kiezen voor H4, H5 en H6, maar ik raad af om deze te gebruiken. Je tekst wordt er niet overzichtelijker van en de koppen worden ook steeds kleiner. Dat draagt ook niet bij aan een betere toegankelijkheid van je website.

Lees ook: hoe schrijf je de perfecte blogpost?

Maak hyperlinks begrijpelijk

• In plaats van een link de anchor tekst ‘klik hier’ mee te geven, kun je er betere een heldere omschrijving aan geven, zoals ‘download onze productcatalogus’;
• Laat de link binnen de website bij voorkeur niet openen in een nieuw venster;
• Linken naar een andere website? Laat dit je sitebezoeker dan expliciet weten.

Overige tekstuele aandachtspunten

• Wees spaarzaam met hoofdletters, cursief of vet: dit is moeilijker leesbaar;
• Plaats geen cursieve teksten;
• Laat geen tekst door afbeeldingen lopen.

Test de toegankelijkheid van je website

Ben je niet zeker of je website voldoende toegankelijk is voor mensen met een visuele beperking? Via Accessibility kun je gratis testen waar je website al voldoende toegankelijk is en waar er nog verbeterpunten zijn.

Conclusie

Zoals je nu begrijpt, is het ontzettend belangrijk om je website toegankelijk te maken voor iedereen. Meer mensen dan van wie je in eerste instantie misschien had verwacht hebben te maken met een visuele beperking terwijl zij jouw blogs ook graag willen kunnen lezen. Door je website toegankelijker te maken draag je bij aan inclusie en je zorgt voor een betere gebruikerservaring. Een belangrijk punt voor SEO. Alleen maar goede redenen om dus ook snel aan de slag te gaan met de toegankelijkheid van je website.

Tjarda, ontzettend bedankt voor je input en dat je mij hebt laten inzien hoe belangrijk het is om hier als blogger ook bij stil te staan. Ik hoop met dit blog nog veel andere bloggers te kunnen bereiken.

Heb je hulp nodig of heb je een vraag naar aanleiding van dit artikel? Neem dan contact met me op via het contactformulier.

Angie