Accessibility en WCAG 2.1 voor een toegankelijke webshop, app en site

We horen weleens: ‘Mensen met een beperking, die zitten toch niet in onze doelgroep?’ Maar als je naar de cijfers kijkt dan kun je concluderen dat die aanname hoogstwaarschijnlijk niet klopt. Heb je je weleens gerealiseerd dat 2,5 miljoen volwassenen in Nederland moeite hebben met lezen, schrijven en/of rekenen? En dat zij daardoor ook moeite hebben met digitale vaardigheden? Het is dan ook behoorlijk waarschijnlijk dat in jouw doelgroep een deel van de mensen te maken heeft met een beperking, uiteenlopend van zicht- of auditieve beperkingen tot het niet volledig begrijpen van teksten of klikpaden. Daarbij kan ook de omgeving waarin iemand een website bezoekt beperkte toegankelijkheid in de hand werken. Zo zet niet iedereen een instructievideo luid aan in een openbare of gemeenschappelijke ruimte. Kortom, door toegankelijkheid niet op te nemen als succescriterium bij de (door)ontwikkeling van je site, app of webshop beperk je in bijna alle gevallen een behoorlijke groep bezoekers tot inhoud, producten en dus ook je omzet.

Digitale toegankelijkheid en UX

Toegankelijkheid en de gebruikerservaring van een webshop, app of site gaan hand in hand. Iets dat al is verweven in het uitdenken van de UX en wireframes. Die zijn namelijk vaak bepalend voor het eindresultaat, omdat je daarin al een groot deel van de gebruiksvriendelijkheid vastlegt. Een vuistregel is meestal: als iets niet werkt zoals een bezoeker verwacht, dan is het waarschijnlijk ook niet erg toegankelijk. Wijk je af van de standaard webconventies en bekende UX patterns? Dan loop je het risico dat bezoekers hun weg niet vinden of je uiteindelijk omzet misloopt, omdat ze het niet begrijpen. Enkele voorbeelden:

Een invoerveld dat geen focus krijgt als je op het label wat ervoor staat klikt;
Een menu dat alleen uitklapt door er dubbel op te klikken;
Of aangeven dat een veld verplicht is door deze oranje te kleuren, in plaats van rood.

Nu denk je misschien: soms zijn er wel redenen om tóch af te wijken van de standaarden, omdat de data bewijst dat dat beter is. Als je afwijkt, is het wel belangrijk om te bedenken dat het team extra tijd en aandacht moet besteden aan de toegankelijkheid van de unieke componenten of elementen die je introduceert. Iets dat helaas regelmatig wordt vergeten, waardoor de toegankelijkheid wordt beperkt en ook nog eens kan leiden tot tegenvallende resultaten.

Screenreaders en andere hulpsoftware

Naast de gebruikerservaring geldt toegankelijkheid ook voor de HTML. Niet dat het natuurlijk direct te verwachten is dat bezoekers via de inspector tools de broncode gaan lezen, maar hulpsoftware zoals een screenreader gebruiken de opbouw van de broncode wel om elementen te kunnen beschrijven voor de bezoeker. Een menu dat alleen uitklapt als er twee keer op wordt geklikt of een bepaald invoerveld dat in de check-out verplicht is. Dat zijn dingen die technisch moeten worden beschreven in de code, zodat eventuele hulpsoftware weet hoe die ermee om moet gaan. En daar is niet alleen hulpsoftware bij gebaat, maar de zoekmachines ook. Wat uiteindelijk ook weer bijdraagt aan je relevantie en vindbaarheid.

En dan nog een belangrijke: de groep bezoekers zonder muis. Die worden namelijk vaak vergeten. En muisloze gebruikers zijn ook de mensen die een website of -shop via een mobiel device bezoeken. Dingen die voor hun regelmatig misgaan, zijn bijvoorbeeld een onlogische tabvolgorde, verkeerde focus van content of een pop-up die alleen weggaat door op ‘escape’ te drukken.

Accessibility, ook het contentteam heeft er invloed op

Maar niet alleen de techniek van de website moet kloppen. Ook het contentteam kan veel bijdragen aan toegankelijkheid. Enkele voorbeelden:

Bij het bepalen van kleuren is het voor designers belangrijk om te kijken naar het contrast en de bijbehorende leesbaarheid. Is het voor iedereen leesbaar? Ook voor mensen die kleurenblind zijn?
Ook de leesbaarheid van teksten draagt bij aan toegankelijkheid. Denk bijvoorbeeld aan de lettergrootte, lettertype en regelafstand, maar ook aan de lengte van de zinnen en taalgebruik.
Net als dat de invoer van de content in het CMS een aandachtspunt is voor toegankelijkheid. Maak je op de juiste manier gebruik van koppen en headings? Dus spring je bijvoorbeeld niet zomaar van een H2 naar een H4 en heeft de pagina slechts één H1? Openen links niet zomaar in een nieuw tabblad als je binnen dezelfde site blijft? En denk ook aan alt-teksten bij afbeeldingen. Zo kan de screenreader dat voorlezen en het is ook nog eens goed voor de SEO.

Accessibility en WCAG 2.1: zelf aan de slag

Als je deze voorbeelden samenvat dan gaat het bij digitale toegankelijkheid eigenlijk om vier punten waar je attent op moet zijn:

Waarnemen: is alle informatie op mijn website direct zichtbaar voor bezoekers?
Bedienen: zijn alle componenten in de interface bedienbaar voor alle type bezoekers?
Begrip: zijn de informatie en de gebruikersinterface begrijpelijk?
Robuustheid: is de content voldoende robuust en houd je je daarmee aan webstandaarden, zodat het betrouwbaar kan worden geïnterpreteerd door een breed scala aan clients? We noemen dat user agents, bijvoorbeeld een browser, een printer, beamer of juist een screenreader.

Op de website van W3C staan de WCAG 2.1. richtlijnen toegelicht en wordt uitgelegd hoe je aan de hand van bovenstaande vier punten de toegankelijkheid van je webshop, app of site kunt verbeteren. Veel daarvan zijn technische punten waarmee een digitaal bureau uitstekend kan helpen. Een goed begin is bijvoorbeeld een Accessibility Scan waarmee je inzicht krijgt in struikelblokken van bezoekers en nuttige tips verwerft over verbeteringen en de impact daarvan.

Toegankelijkheid voor betere conversie

Het internet is de grootste bron van informatie ooit, voor mensen door mensen gemaakt. De waarde van digitale transacties blijft maar groeien. En e-commerce is aan het begin van de coronapandemie in 3 maanden net zo hard gegroeid als voor de aankomende 10 jaar oorspronkelijk was voorspeld. Dat internet en de digitale wereld onmisbaar zijn, staat vast. En wordt met iedere ontwikkeling nog maar eens benadrukt. Dat die belangrijke voorzieningen voor iedereen toegankelijk zouden moeten zijn, is – als je het Lucien vraagt – eerder ook een vanzelfsprekendheid dan een vraag. Door een website, app of shop voor écht iedereen toegankelijk te maken, verbeter je namelijk niet alleen de gebruikerservaring, maar ook de relevantie, vindbaarheid en conversie. Ga jij ook vandaag nog met digitale toegankelijkheid aan de slag?