E-commerce-nieuws: actualiteit en tips voor shops
Nieuws en informatie over online handel. Lees hier het nieuws over actuele trends, tips & tricks, SEO, SEA, marketing etc.
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!
📷 titelafbeelding: Shutterstock/Daniel2528
Sinds 2018 bestaat de WCAG 2.1 AA-richtlijnen wat de internationale standaard is voor online-toegankelijkheid.
Hoe gebruiken blinden en slechtzienden het internet?
Om te begrijpen hoe we de toegankelijkheid kunnen verbeteren, moeten we eerst kijken naar hoe deze doelgroep gebruikmaakt van het internet.
Het antwoord is hierin echter niet simpel: het ligt aan hoe iemand blind of slechtziend is. Het is namelijk een spectrum. Sommige mensen hebben nog een klein streepje zicht in hun ogen, waardoor ze wel met hun ogen zouden kunnen lezen. Deze mensen worden al geholpen door software te gebruiken die hun scherm sterk vergroten of inzoomen.
Een andere, veel gebruikte, manier is een voorleesprogramma. Er is software die de letters op het scherm kunnen voorlezen, maar ook bijvoorbeeld de alt-tekst in de HTML-code van je afbeelding.
Verder bestaat ook de brailleleesregel. Dit is een soort toetsenbord die uit braillecellen bestaat en er komen dan pinnetjes omhoog om de tekst in braille weer te geven. Deze werkt samen met de schermleessoftware.
1. Tekst
Tekst is al heel toegankelijk voor blinden en slechtzienden, maar kan geoptimaliseerd worden.
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 header aangegeven wordt, dus via H1, H2, H3 etc. Als je de keuze voor header 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.
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:
Soms ga je in je tekst over op een andere taal, vooral in e‑commerce en marketing. 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:
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.
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 (instructies) 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 de invoer niet juist 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. Dit geldt ook voor anchor links (ankers)! Daarnaast helpt dit wederom bij zoekmachines, dus SEO!
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!
Zoekfunctie
Optimaliseer ook de zoekfunctie van je site. Heb je filters bij je zoekbalk? Zorg dat deze filters ook in de HTML-code achter de zoekresultaten komen te staan, zodat de software eerst de belangrijke tekst leest en niet eerst door alle filters gaat voor de resultaten voorgelezen worden.
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.
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.
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.
Voeg audio toe
Sommige websites hebben een optie met "Lees pagina voor" waarbij de pagina van te voren is opgenomen, zodat de software niet door de pagina hoeft te gaan. Een nadeel is wel dat het updaten van je site lastiger is en als je veel productpagina's hebt, kan het lang duren.
Extra tips
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.
Overweeg een keurmerk
Er zijn keurmerken voor digitale toegankelijkheid, zoals de Nederlandse Drempelvrij.nl. De aangesloten sites staan op een specifieke pagina, zodat mensen met een visuele beperking de site makkelijk kunnen vinden. Dit helpt je een nieuwe doelgroep aan te boren dus!
Kortom
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.
Originele publicatie: 4 februari 2020
Datum update: 6 december 2023
