Grote kans dat je bij het maken van een website niet nagedacht hebt hoe de ervaring is voor mensen met een visuele beperking. In Nederland zijn meer dan 350.000 personen slechtziend of blind. Door de Accessibility, vaak afgekort als “a11y“, mee te nemen in het ontwerp van jouw website kun je ervoor zorgen dat jouw website ook deze groep bereikt. Lees hier hoe je met een paar simpele tips en plugins jouw WordPress site toeganklijker kan maken.
Wat houdt Accessibility in?
Allereest is het handig om te weten welke soorten visuele beperkingen er zijn. Dit zijn:
- Kleurenblind – Het probleem van het onderscheiden van kleuren. In veel gevallen gaat om blauw en geel, of rood en groen.
- Slechtziend – Je ziet alles onscherp, tunnelvisie of je bent blind aan één oog.
- Blind – Je ziet (bijna) niks met beide ogen.
- Doofblind – Je bent dan zowel niet zien als horen.
Als je zo’n beperking hebt is het lastig om informatie van een website af te halen. Visuele beperkten hebben daarom vaak extra hulpmiddelen nodig om een website te lezen. Voorbeelden zijn:
- Het aanpassen van de lettertypes of kleuren van de website.
- Een screenreader. Dit is een programma of tool die de websitetekst voorleest op het scherm.
Als je zorgt dat jouw website aansluit op de manier waarop deze hulpmiddelen de informatie van jouw website halen, dan wordt jouw website toegankelijk (accessible) voor deze groep mensen.
Waar moet je op letten?
Vaak maak je jouw website ontoegankelijker door kleine onbewuste foutjes. Voorbeelden hiervan zijn:
- Geen of een lege ALT attribuut bij afbeeldingen
- Tekst of plaatjes die niet kunnen worden vergroot
- Geen duidelijke paginastructuur. Het is niet duidelijk wat de header, footer, navigatie en content blokken op de pagina zijn.
- Verkeerde volgorde van header elementen (fouten in de header-hierarchië).
- Gebruik van kleuren op de website met weinig contrast ten opzichte van elkaar.
- Onderdelen van een website zijn alleen toegankelijk door een muis te gebruiken.
Deze fouten zijn makkelijk te achterhalen, te testen en op te lossen. Hieronder een aantal tips.
Contrast fouten verbeteren
Om tekstkleuren goed te laten contrasteren kun je jouw website laten checken door de online tool “Color Blind Filter” van Toptal. Je ziet dan de jouw website zoals iemand die kleurenblind is ziet. Door de tekst- of achtergrondkleuren aan te passen los je dit probleem eenvoudig op.
Opbouw van pagina inhoud
Als je je al bezig houd met Zoekmachine optimalisatie, dan moet je al letten op de opbouw van jouw website. De spiders van zoekmachines zijn tenslotte ook blind en moeten ook makkelijk door de site kunnen navigeren. Zorgen voor een goede header-hierarchië op de pagina en het zorgen voor een logische pagina opbouw (header, sidebar, navigatie, content en footer) is dan ook goed voor je positie binnen de zoekmachines.
Veel visuele hulpmiddelen maken ook gebruik van de heading-tags. Door een goede opbouw hoeft de gebruiker niet de hele tekst op de pagina te beluisteren, maar kan bijvoorbeeld met de tabtoets naar de volgende paragraaf springen.
Qua inhoud is het belangrijk teksten concreet te houden, het moet niet zo zijn dat belangrijke teksten onderin het tekstblok pas verteld worden. Daarnaast is het niet handig om zinnen volledig met hoofdletters uit te typen, screenreaders hebben de neiging de woorden letter voor letter uit te spellen.
TIP: plugins als SEO-Yoast en online tools zoals lipperhey.com geven aan wat er mis is met de SEO van de pagina. Volg je deze regels op, dan maak je tevens je pagina’s ook een stuk toegankelijker!
Media bestanden
Een afbeelding is natuurlijk lastig voor te lezen. Daarom bestaat er een attribuut voor afbeeldingen: “alt”. Het alt attribuut wordt gebruikt door screenreaders om een tekst voor te lezen die bij de afbeelding past. Zo is het handig om informatieve afbeeldingen een tekstuele uitleg te geven. Indien het gaat om decoratieve afbeeldingen is het handiger de alt teksten niet te gebruiken zodat deze genegeerd worden. Voor video’s wordt aangeraden materiaal te gebruiken dat gesproken is en weinig tekst op beeld bevat.
Wil je checken of je overal een ALT-attribuut gebruikt, kun je gebruiken maken van de WAVE tool van WebAIM. Deze tool geeft keurig aan welke afbeeldingen nog geen ALT-attribuut bezitten.
Koppelingen
Bij koppelingen moet het duidelijk zijn waar naartoe wordt verwezen. Het is natuurlijk niet te doen om links te hebben die refereren naar “Klik hier” o.i.d. Gebruik voor links het liefst ook buttons aangezien de interactie met het toetsenbord anders reageert op links en buttons, een gebruiker kan dit verschil natuurlijk niet zien. Bij het gebruik van afbeeldingen als koppeling is het natuurlijk ook van groot belang een correcte en concrete alternatieve tekst bij te voegen. Ook is het af te raden om lege links op uw pagina te zetten want zo wek je de indruk dat er een vervolg pagina is terwijl deze niet aanwezig is.
Conclusie
Accessibility is niet erg moeilijk maar gewoon een kwestie van gewoon doen. Samengevat kunnen jouw visueel beperkte gebruikers jouw website een stuk makkelijker kunnen lezen als je aan de volgende 3 regels denkt.
- Zorg voor goede contrasten in je website design.
- Zorg voor een goede en duidelijke paginaopbouw
- Vergeet niet jouw afbeeldingen en video’s te beschrijven in het ALT-attribuut