5 simpele tips voor een toegankelijke website

Toegankelijkheid. Een onderwerp waar velen van ons niet bij stilstaan. We vinden het vanzelfsprekend om netjes geholpen te worden door de klantenservice, om makkelijk op de stoep te lopen en om online te shoppen. Toch lopen mensen met uiteenlopende beperkingen hierbij helaas nog steeds tegen belemmeringen aan. Op het gebied van digitale toegankelijkheid helpen wij je graag op weg naar een toegankelijke(re) website!

Tips van Florian

Als gebruiker van een screenreader weet onze collega Florian als geen ander hoe digitale toegankelijkheid werkt. Wanneer er weinig tot geen aandacht wordt besteed aan digitale toegankelijkheid, wordt het voor hem - en voor mensen met dezelfde visuele of een andere beperking - heel lastig om gebruik te maken van een computer, smartphone en internet. Vanuit zijn eigen ervaring deelt Florian 5 tips die jou op weg helpen naar een toegankelijke(re) website.

Florian en Quay bij de bank

Tip 1: Semantische HTML

Gebruik waar mogelijk standaard, zogenoemde semantische HTML. Deze semantische HTML geeft de juiste structuur van een document of pagina aan. Dit kan door gebruik te maken van HTML-elementen als secties, navigatiemenu’s en paragrafen. Daarnaast zijn er ook elementen die je kunt gebruiken om betekenis te geven aan stukjes tekst. Bijvoorbeeld om een woord of zinsdeel te benadrukken.

Voorbeeld

Als je een button wilt plaatsen, gebruik dan een button element in plaats van een div of span met een grote hoeveelheid JavaScript en CSS om een button na te bootsen. Zorg ook dat de gebruikte HTML valide is. Dit kan gecheckt worden door middel van de W3C HTML validator.

Tip 2: Alt-teksten

Gebruik bij afbeeldingen een tekstalternatief. Deze tekst wordt getoond als de afbeelding niet kan worden weergegeven. Slechtziende of blinde mensen kunnen met een screenreader lezen wat er staat en op deze manier een beter beeld krijgen bij de pagina. 

Een alt-tekst kan in HTML met het alt-attribuut ingevoegd worden en op bijvoorbeeld Twitter door een image description toe te voegen wanneer een foto wordt getweet. 

Voorbeeld alt-tekst

Tip 3: Axe extensie

Toegankelijkheid kan tot op zekere hoogte getest worden in de browser zelf. Dit is goed als eerste test, maar geen alternatief voor het testen met de daadwerkelijke doelgroep. Testen in de browser is hoogstens een aanvulling of iets wat hieraan vooraf gaat, maar niet geheel onbelangrijk.

Een veelgebruikte extensie om te testen in de browser heet Axe en kan voor Chrome en voor Firefox worden gedownload.

Wat is Axe?

Axe is één van de betere tools om toegankelijkheid te testen. De extensie is in verschillende browsers te gebruiken en werkt heel duidelijk. Dit komt omdat de tool alleen fouten weergeeft die met grote zekerheid automatisch vast te stellen zijn. Ook geeft Axe fouten aan die je zelf niet zo snel handmatig vindt, maar ook goede doorverwijzingen naar documentatie.

Tip 4: Schermlezer a.k.a. screenreader

Test je website met een schermlezer en zonder muis. Hoe?

  • Op een Windows computer kan door middel van de sneltoets Ctrl + Windows + Enter de ingebouwde Narrator schermlezer worden gestart.
  • Op een Mac computer heet deze functie VoiceOver en wordt hij aan en uitgeschakeld met command + F5.
Screenreader

Tip 5: Focus op de doelgroep

Voer tests uit met je doelgroep. Hoewel een schermlezer de meeste foutjes wel zal oppikken, weet de gebruiker uiteindelijk het beste hoe hij/zij deze technologie gebruikt. Dit kan weer tot nieuwe inzichten leiden. Vertrouw dus in eerste instantie op de persoon, niet op het hulpstuk.

Samen naar toegankelijkheid als de norm en ontoegankelijkheid als de uitzondering

Website testen

Aan de slag!

Wil jij zelf aan de slag met toegankelijkheid? Hopelijk hebben bovenstaande tips je al wat verder geholpen. Heb je aanvullende vragen? Neem dan contact met ons op en wij beantwoorden deze graag voor je. 

Telefoon: 026 383 07 34
E-mail: info@perplex.nl