Ben jij een starter en wil je zelf aan de slag? Lees dan hier verder>>

Website toegankelijkheid en usability

roadblok Hoe toegankelijk is jouw website?
Aangepast op: 1 dec, 2022

Met een toegankelijke website neem je de verantwoordelijkheid om je website toegankelijk te maken voor iedereen. Ongeacht of men nu een beperking heeft of niet. Maar denk ook aan mensen die kleurenblind zijn, dyslexie of gezichtsproblemen hebben. Of wat als je niet zo’n vaste hand hebt en je moet op een klein knopje klikken. Voorbeelden te over.

Eenvoudige aanpassingen

In 2018 ben in naar een WordPress Meetup in Zwolle geweest en hier was Rian Rietveld van Level Level onze gastspreker. Ze is Accessibility consultant en gaf ons heel veel voorbeelden.  Je denkt er misschien niet direct bij na, maar jouw website is wellicht helemaal niet zo toegankelijk als je zelf denkt. Ze is daarnaast ook lid van het Make WordPress Accessible team en heeft me een aantal mooie inzichten meegegeven die ik met je wil delen.

Let op, dit blog is meer bedoeld om je meer bewust te maken. Ik vertel globaal waar je op moet letten. Ik heb zoveel mogelijk de linkjes erbij gezet naar de website met specifieke informatie.

Toegankelijkheid gaat boven ontwerp

Een website gaat over informatie verstrekking en vormgeving daaraan ondergeschikt. Dat hoeft je niet te weerhouden een visueel aantrekkelijke website neer te zetten.Het kan in sommige gevallen we beteken dat je net een andere kleur moet kiezen, of dat knoppen iets groter in beeld moeten komen. Of dat je niet een heel fancy formulier kan tonen met inline teksten.

Helderheid en contrast

voorbeeld contrast op grijsvlakken
voorbeeld contrast op kleurvlakken

Heb je bewust nagedacht over de kleuren en de kleurvlakken die je gebruikt? Voor kleurenblinden is het van belang dat er genoeg helderheid en contrast is tussen de tekst en de ondergrond.

Lichtgrijs op grijs is bijvoorbeeld niet aan te raden. Een simpele test is je pagina eens om te zetten naar grijswaarden. En check je website op verschillende schermen, is de tekst dan op alle schermen goed te lezen?  Hier lees je meer over kleuren in webpagina’s >>

Een goed geoptimaliseerde website scoort beter

Goed gebruik van html zorgt ervoor dat de website een betere notering in Google krijgt. Zorg dus dat je kopjes een h1, h2, h3 tag krijgen. De meeste editors voorzien daar al in als je de tekst selecteert en bijvoorbeeld voor een “kopje h2” kiest. Afbeeldingen geef je een goede ALT-tekst mee. Een goed gebouwde website heeft deze opties standaard.

Zorg voor structuur in je website.

Een goede structuur van je tekst maakt deze goed leesbaar. Maak een logische opbouw en gebruik voor de paginatitel een h1 (een per pagina). Gebruik daarna voor de koppen een h2 en als je dat gedeelte van de tekst nog verder wil indelen een h3 als subkop. Het structureren van je website zie je ook terug in een goede menu opbouw en een logische plek voor knoppen en contactinformatie en de call-to-action. De layout van je pagina is daarom ook belangrijk, zorg dan mensen snel kunnen vinden wat ze zoeken. Dat is ook belangrijk voor jouw conversie.

Twijfel je over de positie van bijvoorbeeld een call-to-action? Doe dan een A/B test en meet welke oplossing beter werkt.

Gebruik ALT-teksten bij je afbeeldingen

Geef je afbeeldingen een omschrijving mee, zodat mensen die een screenreader gebruiken kunnen horen wat er op het plaatje staat. Teksten op een afbeelding en quotes op foto’s kan men niet zien.

Leesbare teksten

Zorg dat het contrast tussen de tekst en de achtergrond groot genoeg is. En dat het lettertype zelf ook groot genoeg is. Voor de meest gangbare lettertypen is dit tussen de 14- en 18-punts.

Formulieren

Soms zie je van die supermooie formulieren met voorbeeldteksten in de velden. Zodra je gaat typen verdwijnt deze tekst, en vaak ook nog in heel lichtgrijs op wit, niet heel handig. Ik begrijp dat dit vaak een discussiepunt is.. Deze manier van vormgeven is mooier en het formulier heeft minder ruimte nodig waardoor je ook nog meer info er onder kan laten zien. Ik maak me er zelf ook schuldig aan. Maar als je het helemaal volgens de richtlijnen wil doen moet de labeltekst gekoppeld zijn aan het veld zodat deze opgelezen kan worden met een screenreader. Ook moet de instructies en foutmeldingen duidelijk in beeld komen. Hoe vaak heb je zelf al gehad dat je een heel formulier hebt ingevuld en deze niet verzonden wordt? Vaak staat dat ergens op een onlogische plek dat bijv. De notering van het btw nummer niet klopt.

Meer informatie over toegankelijke formulieren >>

Bezoekers die niet met de muis kunnen navigeren, bedienen het web meestal door te navigeren met het toetsenbord. Zij doen dit met de tab toets. Door tab en shift + tab te gebruiken kan men naar de volgende of vorige link of knop op de pagina gaan. Je wilt snel kunnen skippen naar een volgend blok ipv eerst door een hele rij menu items te moeten tabben.

Meer lezen over skip-links in WordPress

Geef in de linktekst aan waar je naartoe navigeert

Vermijd teksten als “lees meer”, “klik hier” of complete URL’s. Je lezer moet weten waar hij naartoe gelinked wordt zodra hij op de link klikt. Gebruik een omschrijvende tekst en onderstreep je linkjes. Vaak zie je er alleen een kleur wordt toegepast, waardoor ze te weinig opvallen als link.

Ondertitel video en audio

Video en podcasts worden steeds populairder. Deze zijn helaas voor blinden, slechtzienden en dove mensen niet toegankelijk. Probeer daarom de uitgeschreven tekst mee te leveren. Gebruik je YouTube-filmpjes op je website? Je kunt gemakkelijk een ondertiteling toevoegen via ‘captions’. Ik zou de automatische vertaling niet gebruiken, die is wel hilarisch maar brengt je boodschap niet zo goed over. Meer lezen over  eisen voor video en audio

Lees ook deze blogs over Toegankelijkheid

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor
Ik heb momenteel een flexplek bij verschillende verzamelgebouwen.

Btw-ID NL001413297B10
KVK 53368959

Let op: alle genoemde prijzen op deze website zijn excl. 21% btw

Contactgegevens

Fotografie

De meeste foto's zijn gemaakt door Marieke Vogelzang van Time to shine. Beelden zijn eigendom van Marieke en mogen niet gebruikt worden zonder toestemming.

Overige foto's komen van Unsplash of zijn in eigen beheer gemaakt met toestemming van mijn klanten.