Hoe maak je je website toegankelijk?

Een website moet er niet alleen mooi uitzien. Het moet ook gebruiksvriendelijk en toegankelijk zijn voor een grote groep bezoekers. En dan met name voor mensen met een beperking, zoals bijvoorbeeld een visuele handicap. Het verbeteren van je accessibility is dus erg belangrijk om het gebruik van je website zo makkelijk mogelijk te maken. En zo heel moeilijk hoeft het niet te zijn.

Het belang van een goede website toegankelijkheid

Iedereen moet van een goede gebruikerservaring kunnen genieten. Maar soms wordt dat voor kleurenblinden, slechtzienden, en mensen met gehoorverlies of cognitieve beperkingen erg moeilijk gemaakt. Om te helpen bij het navigeren op het internet zijn er een heleboel technische hulpmiddelen beschikbaar, zoals schermlezers en ondertiteling apps. Maar om deze systemen optimaal te gebruiken, is er een goede, toegankelijke website nodig.

Daarnaast is een toegankelijke website ook goed voor SEO en UX. Google wordt er blijer van, en het maakt je website een stuk duidelijker. Als elke bezoeker kan vinden wat hij nodig heeft, wordt zowel de bezoeker als de eigenaar van de website blij. 😉

Hoe verbeter je de toegankelijkheid van je site?

Er zijn een aantal manieren om je site toegankelijk te maken voor je bezoekers. Hieronder staan een aantal aandachtspunten waarmee je aan de slag kunt.

1) Alternatieve tekst invullen

Bij afbeeldingen, pdf-bestanden en knoppen is er ruimte om de alt-tekst in te vullen. Die alt-tag is je bij SEO wellicht al bekend. Omdat je hiermee Google kunt laten weten waar de afbeelding over gaat. Hier plaats je vaak het hoofdzoekwoord of -onderwerp in. Maar ook voor voorleessoftware is die ingevulde alt-atribuut onmisbaar. Probeer dus altijd verschillende elementen op je website van een tekstueel alternatief te voorzien.

Controleer met name of er een een alternatieve tekst is voor:

• Informatieve afbeeldingen
• Hamburgermenu-afbeeldingen
• Het logo
• Labels van formulieren
• PDF-bestanden
• CTA-knoppen

2) Beschrijvende CTA-knop tekst

CTA-knoppen staan op elke website. Maar niet elke site is duidelijk over de inhoud van die knop. Je wilt voor een goede bezoekerservaring graag duidelijk maken wat er gebeurt als men op een bepaalde knop klikt. Een ‘klik hier’ is daarmee een hele slechte beschrijving op een knop. Het is hiermee niet duidelijk welk doel de knop heeft. Waar brengt het je heen? Wat gebeurt er na mijn initiële klik?

Om het je bezoeker duidelijker te maken, voeg je een actie-gerelateerde tekst toe aan je CTA-knop: bijvoorbeeld ‘Download boek X’ of ‘Ga naar Winkelwagen’. Alles is beter dan een ‘klik hier’ in ieder geval. 😉

3) Staan je headings goed?

Headings structureren de content op een pagina. Hierdoor kunnen alle bezoekers en zoekmachines gemakkelijk door je content navigeren. Echter komt het vaak voor dat de headings niet de juiste opmaak (H1,H2, H3,…) krijgen, of lukt het niet om met alleen de headings de inhoud van de pagina te begrijpen.

• De H1 moet beschrijven waar de hele pagina over gaat;
• De overige headings moeten beschrijven waar een specifieke alinea over gaat;
• En alle headings moeten in de juiste volgorde gebruikt worden.

4) Onderschrift bij complexe afbeeldingen

Een onderschrift is een stuk tekst wat in een kleiner formaat onder de afbeelding verschijnt. Zo’n onderschrift is handig voor afbeelding die wat meer uitleg nodig hebben. Daar gebruik je het alt-attribuut immers niet voor. Dat is altijd kort en bondig. In het onderschrift kun je enkele zinnen kwijt. Wat erg handig is als je een tabel of grafiek moet uitleggen.

5) Voldoende contrast

Bij het gebruik van kleur op je website moet je rekening houden met het contrast. Dit is vooral belangrijk voor mensen met een visuele beperking, zoals kleurenblinden. Maar ook gebruikers zonder beperking kunnen hinder ervaren door bepaalde lichtinval of een lage schermhelderheid.

Check met name of de tekst op je site goed leesbaar is.  Is de achtergrondkleur niet hinderlijk om de tekstkleur te lezen. Op een witte achtergrond is is lichtgrijs veel moeilijker te lezen dan zwart bijvoorbeeld.

Controleer ook of foutmeldingen op je website voor iedereen duidelijk te zien is. Je kunt naast het optimaal gebruik maken van kleur, ook gebruik maken van een extra symbool. Denk bijvoorbeeld aan een uitroepteken voor de foutmelding.

6) Gebruik ondertiteling en/of een uitgeschreven tekst

Het geluid bij een video is niet altijd nuttig. Soms zit je in een drukke trein, en kun je het geluid van een filmpje hierdoor niet aanzetten. Een andere keer wil je een video snel doornemen, of lees je liever de inhoud. Doven en slechthorenden ervaren elke dag hinder bij het afspelen van een video zonder transcript of ondertitels. Probeer dus altijd de tekst uit te schrijven of voor een geschikte ondertiteling te zorgen. Zo’n uitgeschreven tekst bevat alle informatie (niet meer/niet minder) van de video, in de juiste volgorde.

7) Goede lijstopmaak

Als je lijsten gebruikt op je website is het handig om te controleren of de opmaak wel correct is. Zo’n lijst bestaat vaak uit een van de volgende vormen: met bulletpoints of met een nummering.

Een <ul> opmaak gebruik je voor ongeordende lijsten. Een <ol> gebruik je voor een lijst die wel geordend moet zijn.