Maak je website toegankelijk voor blinden en slechtzienden (7 tips!)

04.02.2020, 6m

Websites die toegankelijk zijn voor blinden en slechtzienden; als je zelf goed zicht hebt, denk je er niet bij na, maar voor mensen met een visuele beperking is het lastig om zich op het internet te navigeren. Ook helpt een toegankelijke website jouw SEO-score. Wij geven je 7 tips waardoor je in een handomdraai de toegankelijkheid van je website verbetert!

bril in bosGebruik deze tips om te zorgen dat je klanten jouw webshop goed kunnen zien!
Foto: Bud Helisson via Unsplash 

Sinds 2018 bestaat de WCAG 2.1 AA richtlijnen wat de internationale standaard is voor online-toegankelijkheid. 

Index

1. Tekst
2. Beeldmateriaal
3. Formulieren
4. Navigatie
5. Tabellen
6. Vormgeving
7. Toegankelijke alternatieve versie
Tip: check je website
Conclusie

Tip: wil je jouw SEO-ranking verbeteren? Download hieronder de gratis checklist!

SEO checklist gratis download

1. Tekst

Tekst is al heel toegankelijk voor blinden en slechtzienden. Digitale tekst kan door technologie voorgelezen worden, zodat de gebruiker weet wat er staat. 

Structuur

Voor zienden is een tekststructuur al erg handig, omdat ze kunnen zien waar een nieuw onderdeel begint. Maak de kopjes echter niet zomaar groter, maar zorg ervoor dat het in de HTML-code als een heading aangegeven wordt. Als je de keuze voor heading maakt in de dropdown in je editor, dan wordt dit automatisch zo opgenomen in je HTML. Dit helpt de software om de tekst voor te lezen.

Tip: Wil je weten hoe je de perfecte productbeschrijving schrijft? Download de onderstaande whitepaper met 9 tips:

Gratis whitepaper download productbeschrijving

Taal aangeven

Je kunt voor je pagina in de HTML-code aangeven in welke taal de tekst is geschreven. Dit helpt de voorleessoftware om de juiste taal te gebruiken. 

Als het om een taal gaat die in meerdere landen gesproken wordt, is het verstandig om dan ook het land aan te geven. Dit is bijvoorbeeld bij het Engels, Spaans en Portugees belangrijk, omdat daarbij andere uitspraakregels gelden. Bij Brits-Engels kun je dus en-GB aangeven. 

De HTML-code voor Nederlands:

<html lang=”nl”>Alle andere HTML-code</html>

Soms ga je in je tekst over op een andere taal, vooral in de e-commerce. Dit kun je in de ook in de HTML aangeven. Doe dit via de span-code. Dus in de zin “Vooral in de e-commerce gebruik je dit.” schrijf je als volgende:

<p>Vooral in de <span lang=”en-GB”>e-commerce</span> gebruik je dit.</p>

2. Beeldmateriaal

Tekst is nog voor te lezen, maar beeldmateriaal is natuurlijk een stuk lastiger. Hoe kun je zorgen dat je afbeelding toch door voorleessoftware te zien is?

Je kunt afbeeldingen toegankelijk maken door een tekstueel alternatief toe te voegen. Dit is de alt-tekst. Ook zoekmachines gebruiken deze, waardoor jouw SEO-ranking omhoog gaat.

Beschrijf wat je ziet.

Verder is het handig om een onderschrift te gebruiken. Dit onderschrift is voor de text-to-speech-software te lezen, waardoor het toch duidelijk is wat er te zien is. Beschrijf dus goed wat je ziet.

Bij je productafbeeldingen is het dus ook handig om in de omschrijving van het product uit te leggen wat de afmetingen zijn, de kleuren, enzovoort. Hoe zou je het product over de telefoon aan iemand uitleggen? Gebruik deze tekst.

Tip: Wil je de perfecte productafbeelding maken, maar je weet niet hoe? Download de gratis checklist hieronder!

perfect productafbeelding checklist download

3. Formulieren

Het kan zijn dat formulieren belangrijk zijn voor jouw bedrijf. Bijvoorbeeld als je veel gebruikmaakt van e-mailmarketing, moet de klant zich wel kunnen inschrijven. Lees hier ook meer over double opt-in.

Net als met de tekst, is structuur erg belangrijk voor je formulier. De labels (instucties) en invoervelden moeten aan elkaar gekoppeld zijn, zodat de voorleessoftware dit begrijpt. Als je verwacht dat iemand iets invult, maak dat duidelijk in het invoerveld. 

Leg uit waarom het niet goed is.

Als de bezoeker van je website iets verkeerd invult, is het handig om niet alleen een rode lijn om het veld te zetten, maar ook uit te leggen waarom het niet goed is. Dit geldt niet alleen voor blinden en slechtzienden! 

Niet iedereen gebruikt een muis bij het navigeren online. Zorg er dus voor dat je formulieren via de tabtoets te navigeren zijn, dat je keuzerondjes kunt selecteren via het toetsenbord, enzovoorts.

4. Navigatie

Duidelijke links

Je klikt pas op een link, als je weet waar deze naartoe leidt. Schrijf daarom duidelijk in je linkteksten waar je de bezoeker naartoe leidt, ook als diegene de andere tekst niet heeft gelezen. Sommige software leest de links los van de lopende tekst. Een tekst met alleen “Klik hier” is dan dus niet duidelijk. Ook dit helpt wederom bij zoekmachines, dus SEO!

Tip: Lees hier meer over hoe jij je website kunt beschermen tegen hackers. 

Meerdere ingangen

Niet elke gebruiker navigeert op dezelfde manier, dus is het aan te raden om te zorgen dat je pagina’s op meerdere manieren te vinden zijn. Sommige bezoekers vinden het fijn om een zoekbalk te gebruiken, terwijl andere liever het menu gebruiken.

Wees consequent hoe je navigatie eruit ziet op iedere pagina, zodat je bezoekers precies weten waar alles staat. Fijn voor iedereen!

Tip: Weet je ook even niet meer wat SEO en SEA is? Download de whitepaper hieronder:

Whitepaper introductie van SEO en SEA

5. Tabellen

Geef een bijschrift of samenvatting.

Tabellen zijn natuurlijk vrij lastig om te lezen voor de software, daarom is het belangrijk dat deze goed opgebouwd is.

Een tabel bestaat uit kolommen (verticaal) en rijen (horizontaal). De gegevens in een tabel hebben zowel verticaal als horizontaal met elkaar te maken. Om deze relaties duidelijk te maken, gebruik je wederom de juiste HTML-code. Je geeft daarbij aan welke cellen de koppen zijn en welke de gegevens weergeven. Door een duidelijke code kan de voorleessoftware de informatie duidelijk voorlezen.

Je kunt ook een bijschrift en/of samenvatting geven voor je tabel. Voor mensen die geen overzicht van tabellen hebben is dit handig, want dan kunnen ze snel bepalen of het de moeite waard is om het tabel te lezen. 

6. Vormgeving

Sommige klanten hebben een visuele beperking als slechtziend zijn, of misschien zijn ze kleurenblind. Voor deze groepen helpt het niet als je met kleuren iets duidelijk wilt maken. Denk er daarom goed over na om ook tekst te gebruiken. Dit is ook wederom handig voor mensen die text-to-speech-software gebruiken.

Wees consequent.

Contrast is daarbij ook belangrijk: zorg ervoor dat de voor- en achtergrond niet te veel op elkaar lijken qua kleur. Slechtziende of kleurenblinde mensen kunnen het anders niet (goed) lezen. Dit is trouwens ook handig voor mensen die veel licht op hun beeldscherm hebben (omdat ze bij het raam zitten bijvoorbeeld) of wie een afdruk maken in grijstinten.

Wees wederom consequent in je aanpak, ook in je navigatieblokken.

Tip: Wil je weten hoe je kunt voorkomen dat klanten hun winkelmandje verlaten zonder te kopen? Download de gratis whitepaper hieronder!

Whitepaper download | 7 tips om je conversieratio te verbeteren

7. Toegankelijke alternatieve versie

Wordt jouw website helemaal veranderd, of minder mooi, als je al deze tips toepast? Maar je wilt toch toegankelijk zijn voor de klanten met een visuele beperking? Dan kun je misschien beter een alternatieve versie van je website publiceren.

Houd hem up-to-date!

Zet hierin alle informatie die je op je gewone website ook hebt, maar dan de toegankelijke variant. Houd deze natuurlijk ook up-to-date!

Voor (semi-)overheden is het verplicht om een toegankelijke website aan te bieden, al is het in de vorm van een alternatieve versie.  

Tip: check je website

De Web Accessibility Initiative heeft een lijst opgesteld met (gratis) tools om je website te controleren. Hiermee kun je zelf dus kijken wat je nog kan verbeteren.

Zie hier de lijst met tools om je toegankelijkheid te testen.

Conclusie

Om de doelgroep blinden en slechtzienden te kunnen voorzien van jouw service, is het handig om een toegankelijke website te maken. Het is makkelijker gedaan dan het klinkt, als je de bovenstaande tips gebruikt. Kleine aanpassingen van jouw kant, kan het verschil maken voor een toekomstige klant. Als diegene weet dat jouw website goed te browsen is, zal diegene ook zeker terugkomen! Grote webshops krijgen nog steeds klachten hierover, dus wees ze voor en haal de visueel beperkte klanten naar jouw website.

 

Tip: Wil je meer lezen over de Algemene Verordening Gegevensbescherming? Download de gratis whitepaper hieronder!

De FAQ's over de AVG, download onze whitepaper