Webtoegankelijkheid voor UX

Webtoegankelijkheid voor UX

Danielle Enzler
Danielle Enzler - 21 juni 2018
Yomex Owo

Als user experience designer (UX'er) houd ik me vaak bezig met toegankelijkheid. Websites moeten voor iedereen toegankelijk zijn, ongeacht of je een functiebeperking hebt of niet. Maar, daarbij zeg ik heel eerlijk, als de experience voor mensen zonder beperking echt omlaag ging dan wilde ik bepaalde issues wel eens door de vingers zien...

Wij vinden het belangrijk dat iedereen onze websites kan bezoeken en iedereen een goede gebruikerservaring heeft, en daarom is het een must om die kennis te onderhouden op dit gebied. Ik wilde weten wat de belangrijkste aandachtspunten zijn en hoe je bepaalde issues op kan lossen. Daarom schreef ik me in voor de training ‘Webtoegankelijkheid voor UX’.

Inclusive design

Websites drempelvrij maken gebeurt niet alleen voor blinde en dove mensen, maar ook voor dyslectici, lichamelijk gehandicapten en kleurenblinden. Dat zijn doelgroepen die we ook niet mogen vergeten. Een makkelijke manier van content schrijven, het door de website kunnen navigeren met de ‘tab-toets’, en een hoog kleurcontast zijn onder andere heel belangrijk.

Ter illustratie een paar voorbeelden die ik van onze eigen site heb gehaald.
Als eerste de contactknop:

Contact-link in hoofdmenu website zicht.nl

Je zou denken dat de blauwe letters op de witte knop goed leesbaar zijn, maar toch is er niet genoeg contrast. Zowel voor niveau AAA als voor AA van de Web Content Accessibility Guidelines (WCAG) zou deze knop niet door de test komen, omdat sommige kleurenblinden of slechtzienden het woord ‘contact’ niet zouden kunnen lezen.
Ik moest toegeven dat ik niet wist dat de contrasteisen zó hoog lagen. Deze kleurkeuze zou al een stuk beter zijn:

Screenshot contrastrijke contact-knop website zicht.nl

Voor links in lopende tekst geldt hetzelfde:

Linkstyle in lopende tekst website zicht.nl

Hier is een tekstlink aangegeven in het blauw. Dat is echter niet voldoende: ook hier is er een kans dat mensen die kleurenblind zijn het verschil niet goed kunnen zien, en dus niet zullen weten dat het een link is. Tekstlinks moeten altijd gepaard gaan met een extra visuele uiting, zoals bijvoorbeeld een underline.

Linkstyle met underline in lopende tekst website zicht.nl 

Wat wel goed is aan de tekstlink, is dat er geen ‘klik hier’ staat. Tekstlinks moeten altijd beschrijvend zijn. Sommige gebruikers klikken alleen door de links heen en als je dan alleen ‘klik hier’ hebt staan weten die gebruikers niet welke content onder die link zit. Als je een beschrijvende link hebt zoals ‘onze CMS oplossing’ weten ze dat wel. 

Over beschrijvend gesproken, video’s moeten (uiteraard) ook ondertiteld kunnen worden. Zowel de gesproken tekst maar ook de omgevingsgeluiden (!) moeten ondertiteld worden. Naast ondertiteling moeten video’s ook vergezeld worden van een audiobeschrijving (bijv. een MP3-bestand), waarin de gesproken teksten worden opgelezen maar bijvoorbeeld ook de naam van een geïnterviewde die in de video in beeld komt te staan. 

Content verbergen

Een ander belangrijk punt is dat je websites moet kunnen vergroten tot 200% zonder verlies van content. Het trucje om bepaalde content op apparaten met een kleiner scherm (zoals een mobiele telefoon) te verbergen is daarom niet okee, want stel je voor: Je bent slechtziend en je bekijkt een website op je desktop. Je ziet iets wat je wilt lezen en je zoomt daarom de website in, maar wanneer je dat doet verdwijnt de informatie die je wilde lezen. Eerst denk je dat het aan jezelf ligt, dus je zoomt uit, zoekt de tekst weer op en zoomt weer in. Dan is de tekst weer verdwenen. Dat is natuurlijk best onhandig en frustrerend.

Afhankelijkheden

Wanneer je een website toegankelijk wilt opleveren dan ben je soms afhankelijk bent van andere websites. Denk bijvoorbeeld aan een betaalproces via iDeal. De iDeal-website moet ook geheel drempelvrij zijn vóórdat je het certificaat kunt krijgen.

Testen voor toegankelijkheid

Gelukkig bestaan er veel tools om je website te testen op toegankelijkheid; zo heb je screenreaders (zoals NonVisual Desktop Access), contrast analysers (zoals Colour Contrast Analyser) en validators (zoals de W3C Validator) waarmee je op zoek kan naar fouten in de code. Dat maakt het ons een stuk makkelijker om websites toegankelijk te maken voor iedereen.
Een goede tip is ook om één persona een beperking te geven, zodat je hier aldoor aan herinnerd wordt. Ook is het een goed idee om tijdens een gebruikerstest minimaal 1 persoon met een beperking uit te nodigen. Dat is de ultieme test, en als diegene er zonder kleerscheuren uitkomt is dat een goed teken.

De belangrijkste les die ik die dag geleerd heb is dat websites gebruikers niet moet tegenhouden en frustreren. Stel dat je niet meer zou kunnen zien, dan wil je nog wel gewoon kleding kunnen bestellen bij verschillende webshops, je reis kunnen bepalen bij de NS en je belastingaangifte kunnen doen. En als je dan denkt “Dat maakt mij toch niet uit”, bedenk dan dat de belangrijkste bezoeker van elke website blind, doof en motorisch beperkt is, namelijk een zoekmachine. Als je website geheel opgebouwd is volgens de webrichtlijnen, dan is je website ook gelijk goed vindbaar. Je website is dan namelijk beter doorzoekbaar en daardoor komt hij hoger in de ranking te staan. Dat klinkt als een win-win situatie toch?