Digitale toegankelijkheid: waar moet je als website designer rekening mee houden?

Digitale toegankelijkheid is helaas iets waar bij de meeste projecten pas achteraf eens aan wordt gedacht. Vaak is dat te laat. Maar je bespaart als website designer echt veel tijd, geld en frustratie als je al vanaf het allereerste begin rekening houdt met de toegankelijkheid van websites.

Digitale toegankelijkheid is een taak van het het hele team

Websites worden een heel stuk beter als website designers, bouwers en projectleiders allemaal betrokken zijn bij de digitale toegankelijkheid van het project. Door al vroeg in het project na te denken over de toegankelijkheid, worden websites een stuk gebruiksvriendelijker voor iedereen. Het grote voordeel: de gebruikerservaring gaat omhoog, je hebt meer tevreden bezoekers en de conversie stijgt.

Projectleiders, product owners en accountmanagers

Al tijdens het eerste contact met de klant maak je digitale toegankelijkheid bespreekbaar. Wat zijn de wensen en verwachtingen van de opdrachtgever? Moet de website al meteen bij oplevering voldoen aan alle succescriteria van de WCAG? En welke rol speelt de opdrachtgever bij de toegankelijkheid van bijvoorbeeld de content? Een Awarenessbijeenkomst Digitale Toegankelijkheid helpt als de opdrachtgever nog helemaal nieuw is met het onderwerp.

Website designers en UX’ers

Als website designer of UX-designer wil je natuurlijk niet alleen een “mooi plaatje”. Je wilt ook een website die succesvol is en die je opdrachtgever helpt, bijvoorbeeld met het behalen van extra omzet of het bereiken van meer klanten.

Bij het maken van een uniek webdesign is digitale toegankelijkheid ook belangrijk. Toegankelijk ontwerpen is de basis. Dat begint met een toegankelijk kleurenpallet. Ook in de huisstijl moet er rekening gehouden zijn met digitale toegankelijkheid. Door goed na te denken hoe verschillende bezoekers de nieuwe website gebruiken, wordt je website voor alle gebruikers een stuk beter.

Tools zoals Figma of Invision kunnen je hierbij helpen. Vergeet niet om in je webdesign ook instructies, tips en opmerkingen te plaatsen. Zo weet de webbouwer waar digitale toegankelijkheid extra belangrijk is.

In onderstaande video zie je hoe je in Figma met de “Color Blind” plugin je ontwerp kan bekijken met verschillende varianten van kleurenblindheid. Zo weet je zeker dat er geen informatie verloren gaat voor bezoekers die kleurenblind zijn. In Nederland is ongeveer 1 op de 12 mannen kleurenblind. Stiekem best wel een grote groep gebruikers waar jij als website designer rekening mee kunt houden.

Webbouwers, frontend en backend developers

De programmeur vertaalt het toegankelijke webdesign vervolgens in nette en semantische code. Gebruik zoveel als mogelijk standaard HTML. Wees voorzichtig met het bedenken van “eigen” elementen. Als het echt moet kan je WAI-ARIA gebruiken om extra informatie te geven aan hulpsoftware. Vergeet niet om je code te checken op fouten. Dat kan bijvoorbeeld met de W3C Validator.

Digitaal toegankelijk webdesign

Voor UX-designers en website designers is digitale toegankelijkheid een belangrijk onderwerp. Bij een goed toegankelijk ontwerp kijk je niet alleen naar een “gemiddelde bezoeker” of een specifieke doelgroep. Het is belangrijk dat je webdesign door iedereen gebruikt kan worden.

Daarom is het belangrijk om al tijdens het ontwerp rekening te houden met specifieke behoeften en voorkeuren van bijvoorbeeld bezoekers met een functiebeperking en ouderen.

Een paar tips waar je als website designer al rekening mee kan houden bij het maken van toegankelijke webdesigns:

• Beschrijf digitale toegankelijkheid
  Plaats opmerkingen bij je ontwerp zodat iedereen van het project begrijpt wat jij bedoelt.

• Toegankelijk kleurenpallet
  Voordat je begint kijk je welke kleurcombinaties mogelijk zijn. Vooral het kleurcontrast is dan erg belangrijk, maar je kan ook rekening houden met bezoekers die kleurenblind zijn.

• Verschillende statussen voor knoppen en formulieren
  Knoppen, links en formuliervelden hebben verschillende statussen: standaard, hover, focus, active, disabled, etc. Leg in het toegankelijke webdesign al vast hoe alles er uit ziet. Vanaf WCAG 2.2 zijn er strengere eisen aan de focusweergave.

• Beschrijf de interactie van elementen
  Voor vooral ingewikkelde formulieren is het belangrijk dat je in het webdesign aangeeft wat de focusvolgorde is tussen verschillende elementen. Geef voor andere interactieve elementen in detail aan wat er moet gebeuren.

• Beschrijf alternatieven voor ingewikkelde acties
  Als een handeling lastig kan zijn voor bepaalde gebruikers beschrijf je ook een alternatieve actie. Denk bijvoorbeeld aan complexe swipe-bewegingen op mobiele apparaten of drag & drop acties.

• Voorkeuren van je gebruiker
  Gebruikers kunnen op de computer hun voorkeuren instellen. Bijvoorbeeld voor het kleurcontrast, donkere modus of het beperken van bewegingen. Dit kan je met CSS of JavaScript herkennen en gebruiken in je ontwerp.

• Praat met je team
  Bespreek potentiële toegankelijkheidsproblemen ook altijd met iedereen in je team. Zorg dat de verwachtingen goed zijn van je opdrachtgever en dat de developers weten wat ze moeten bouwen.

Voordelen van een toegankelijk website designer

Het heeft veel voordelen om al tijdens het ontwerp rekening te houden met een digitaal toegankelijk webdesign. Door te leren hoe bezoekers jouw websites gebruiken, worden je ontwerpen stuk voor stuk beter.

De belangrijkste voordelen van een toegankelijk webdesign zijn volgens ons toch wel:

• Betere websites, meer tevreden bezoekers
  Digitaal toegankelijke websites zijn voor alle bezoekers een stuk prettiger en beter vindbaar in Google.

• Betere relatie met de programmeurs
  Doordat je je ontwerpen beter beschrijft, weten je collega programmeurs beter waar ze rekening mee moeten houden. Hier worden ze echt blij van.

• Betere relatie met je opdrachtgever
  Door te praten over digitale toegankelijkheid denk je met je opdrachtgever mee om tot betere oplossingen te komen. Betrek je opdrachtgever hierin. Dit zorgt ook voor nieuwe commerciële kansen.

Weet je nu niet waar je moet beginnen? Onze training Digitale toegankelijkheid voor UX-designers helpt je goed op weg. Tijdens deze introductietraining ga je samen met een specialist kijken naar oplossingen waarmee UX’ers hun ontwerpen kunnen verbeteren. De training is ook interessant voor SEO- en CRO-specialisten die meer over digitale toegankelijkheid willen weten.