Iedereen begrijpt dat een makkelijk toegankelijke site niet alleen de bezoekerservaring beter maakt, maar ook zorgt voor meer bezoekers en uiteindelijk tevreden klanten. In een eerdere blog hebben we al uitgelegd waarom een toegankelijke website belangrijk is. Als je hier meer over wilt weten, lees dan onze blogpost over De voordelen van een toegankelijke website of bekijk onze digitale toegankelijkheids pagina.
Veel bedrijven vragen zich af waar ze moeten beginnen met het verbeteren van de toegankelijkheid van hun site of dienst. Wil je een paar handige tips? Lees dan verder over onze 5 quick wins.
De 5 quick wins
In deze blogpost richten we ons op de praktische stappen die je kunt ondernemen om jouw website snel en effectief toegankelijker te maken.
Wij hebben 5 quick wins voor je op een rij gezet, die je website naar een hoger niveau tillen.
1. Verbeter de leesbaarheid door meer contrast
Geef tekst een goed contrast ten opzichte van de achtergrond.
Minimale contrast tussen voor- en achtergrond moet volgens de WCAG AA richtlijnen 4.5:1 zijn voor normale tekst.
De eerste knop in het voorbeeld heeft met een score van 1.66:1 niet voldoende contrast. De tweede knop met het contrast van 6.72:1 voldoet wel aan de richtlijnen.
Ben je benieuwd of het contrast goed genoeg is op jouw website? Op deze website kun je de kleurencontrasten van je website controleren: https://webaim.org/resources/contrastchecker/
2. Verbeter de scanbaarheid door structuur
Structureer de content door gebruik te maken van koppen (headings). Kopteksten helpen om de inhoud van de pagina op te delen in gerelateerde “brokken” informatie. Ze zijn ongelooflijk belangrijk om mensen die hulptechnologie gebruiken te helpen de betekenis van een pagina of weergave te begrijpen. Ook scannen zoekmachines de structuur van je website. Een goede structuur zorgt voor een betere vindbaarheid.
Zorg ervoor dat de koppen in de juiste volgorde staan op je website. Gebruik op een webpagina één h1 gevolgd door kopteksten in h2, h3, h4 enz. Op een pagina een kop overslaan kan zorgen voor verwarring. Zorg er bijvoorbeeld voor dat een <h2> niet direct wordt gevolgd door een <h4>.
3. Maak afbeeldingen ‘zichtbaar’ met tekst
Voeg alternatieve tekst (alt-tekst) toe aan afbeeldingen.
Mensen met beperkt zicht kunnen met behulp van een screenreader toch gebruik maken van jouw website, als deze alt-teksten bevat. De screenreader leest dan de inhoud van het plaatje voor.
Daarnaast is een alt-tekst niet alleen fijn voor bezoekers die door je website navigeren met hulp van een screenreader, maar ook de bots van zoekmachines gebruiken de alternatieve tekst (alt-tekst). Hierdoor heb je meer kans om hoger in zoekmachines (zoals Google) te verschijnen.
4. Zorg dat een formulier makkelijk in te vullen is
Geef een invoerveld duidelijke labels mee met instructies voor het invullen van het veld. Koppel labels in de code aan de bijbehorende invoervelden. Gebruik hiervoor het <label>-element, waarbij de verbinding met het element tot stand komt via een for/id-koppeling. Voeg aan het <label>-element een for-attribuut toe en geef het overeenkomstige element een id-attribuut met dezelfde waarde.
Dit is een voorbeeld hoe een label in de code wordt gebruikt.
<label for=”veld2″>E-mailadres</label>
<input type=”text” id=”veld2″ aria invalid=”true” aria-describedby=”fout”>
<span id=”fout”>het veld ‘E-mailadres’ mag niet leeg zijn.</span>
Zorg ervoor dat formulieren zijn uitgerust met ingebouwde foutcontrole. Deze controleert automatisch of verplichte velden zijn leeggelaten of dat invoervelden onjuist zijn ingevuld. Wanneer een fout wordt gedetecteerd, moet de foutmelding duidelijk de naam van het veld aangeven dat verkeerd is ingevuld, samen met een precieze beschrijving van de fout. Vermijd algemene meldingen zoals “Dit veld is verplicht” en geef in plaats daarvan specifieke informatie, bijvoorbeeld: “Het veld ‘E-mailadres’ mag niet leeg zijn.” Verbeter de gebruikerservaring door de foutmelding aan te vullen met visuele aanwijzingen, zoals het wijzigen van de kleur van het veld of het toevoegen van een relevant icoon.
Dit is een voorbeeld van een formulier met een duidelijke foutmelding.
5. Geef links een duidelijke en unieke naam op de pagina
Geef links een naam die duidelijk aangeeft waarvoor ze dienen. Gebruik unieke namen op een pagina.
De eerste link ‘Lees meer’ in het voorbeeld is te onduidelijk. Het is beter om aan te geven waarover je dan meer gaat lezen, zoals de tweede link in het voorbeeld ‘Digitale toegankelijkheid’.
Wat wij voor je kunnen doen
Wil je snel inzicht krijgen in de digitale toegankelijkheid van jouw website? Onze WCAG Quick scan biedt een snelle analyse volgens de WCAG 2.1 AA richtlijnen. We scannen 5 pagina’s en 2 pdf’s (indien aanwezig) en verstrekken een gedetailleerde rapportage met bevindingen. Neem gerust contact met ons op voor meer informatie of om een scan aan te vragen. Samen werken we aan een toegankelijke en inclusieve online-ervaring voor al jouw bezoekers.
