November 7, 2022
  •  
8 min

Hoe maak je je (web)app toegankelijk voor iedereen

Hoe maak je je (web)app toegankelijk voor iedereen

Apps maken een onlosmakelijk deel uit van ons leven. Als je dit leest, kun je waarschijnlijk makkelijk uit de voeten met apps en behoor je tot een grote groep mensen die zonder beperkingen hun smartphone gebruikt. Maar wat als je bijvoorbeeld kleurenblind bent, slechtziend of lichamelijk beperkt? Ik leg je graag uit waar je rekening mee moet houden wanneer je een inclusieve app wil ontwikkelen.

Accessibility in het kort

Webtoegankelijkheid, ook wel accessibility genoemd gaat over het aanbieden van content voor met name mensen met cognitieve, visuele of lichamelijke beperkingen. Deze toegankelijkheid is vastgelegd in richtlijnen: WCAG (Web Content Accessibility Guidelines). De richtlijnen zijn opgesteld als standaard om websites en (web)applicaties beter bereikbaar en toegankelijk te maken voor mensen met een beperking.

Type richtlijnen

Er zijn vier verschillende type richtlijnen:

  • Ten eerste de waarneembaarheid: bedoeld om mensen met een visuele beperking te helpen content te begrijpen. Denk hierbij aan kleur, contrast, maar ook ondertiteling bij video.
  • Bedienbaarheid is de tweede set aan richtlijnen. In hoeverre kun je met een handicap alsnog goed navigeren en zijn alle functionaliteiten beschikbaar en invoerbaar.
  • Begrijpbaarheid gaat over de leesbaarheid, voorspelbaarheid en geboden hulp (foutmeldingen of instructies).
  • Robuustheid zoomt in op de technische opzet waarin titels, labels, velden etc goed te onderscheiden dienen te zijn door bijvoorbeeld screenreaders, die de tekst uit een webbrowser voorlezen.  

A, AA, of AAA

Op al die verschillende richtlijnen zijn er drie niveaus te onderscheiden: A, AA, of AAA. Waarbij AAA de zwaarste norm is. Kortweg: hoe zwaarder de norm, hoe groter de toegankelijkheid van de website, app, of platform. In de regel betekent dit dus hoe meer A’s, hoe meer je rekening moet houden met anderen, in de meest brede zin. Toegankelijkheid geeft echter ook weer beperkingen. Zowel voor het ontwerp als voor de technische ontwikkeling. Dat lichten we even toe.

Ontwerpen voor mensen met een beperking

Als designer staat de gebruiker natuurlijk altijd centraal. Maar wie is deze gebruiker? Heb je je verdiept in je doelgroep? Misschien heb je wel persona’s of een archetype bepaald. Maar heeft deze bijvoorbeeld een handicap? Neem kleurenblindheid, niet echt een handicap die je aan mensen ziet. Toch heeft 8% van de mannen in Nederland een vorm hiervan (bij vrouwen overigens slechts 0,5%). Goed om bij je ontwerp altijd stil te staan aan welke standaard deze moet voldoen. Dus denk niet alleen na over contrast, maar ook of de verschillende vormen van content wel werken voor mensen met een beperking. Dit kan gevolgen hebben voor de creatieve ruimte die je als ontwerper gewend bent te kunnen nemen. Kleurgebruik, leesbaarheid van lettertypen en de user experience volgen op basis van de richtlijnen.

Hoe maak je je (web)app toegankelijk voor iedereen

De valkuilen in het ontwikkelproces

Sommige functionaliteiten kunnen extreem lastig zijn om volledig toegankelijk te maken. Je hebt niet alleen te maken met een huisstijl, maar ook met de uitdaging om het ontwerp zo te vertalen in de ontwikkeling dat het voor iedereen gaat werken. Hoe zwaarder het niveau, hoe lastiger dit vaak is. Voorbeeld: de onderscheidbaarheid op gebied van tekst. Op niveau A hoef je als ontwikkelaar van een app alleen rekening te houden met kleur, contrast en onderscheid bij hover (met de muis ergens over gaan) of focus (iets is geselecteerd). Wanneer je aan niveau AAA wilt voldoen zul je de tekstgrootte ook door de gebruiker moeten kunnen laten vergroten (minstens 18px, maar doorgaans 24px) en er mag door het vergroten ook geen horizontale scroll ontstaan. Vooral voor een app nog best een uitdaging.

Misschien wel het belangrijkste: de content

Uiteindelijk is de content zelf misschien nog wel het belangrijkste. De leesbaarheid van tekst is voor de hand liggend. Begrijpelijke woorden, korte zinnen, compacte alinea’s en actief taalgebruik staan voorop bij het schrijven. Dubbelzinnige betekenissen moeten worden vermeden en geef duidelijke instructies. Maar content is meer dan tekst. Audio en video dienen te worden voorzien van ondertiteling. Tekst in afbeeldingen en binnen een video moet zo veel mogelijk worden vermeden, dat kunnen automatische screenreaders niet lezen. En zelfs voor audio zijn er criteria voor achtergrondgeluid (level AAA). Kortom, veel om rekening mee te houden nadat je bepaald hebt aan welke niveau van toegankelijkheid je wil of moet voldoen.

Hoe maak je je (web)app toegankelijk voor iedereen

Testen, testen, testen

De richtlijnen zijn omvangrijk. Sommige zijn heel concreet, maar andere kunnen op verschillende manieren geïnterpreteerd worden. Als toegankelijkheid echt belangrijk is dan zorg je niet alleen dat je er rekening mee houdt in de ontwikkeling van je app, maar betrek je ook mensen met een beperking in het testen. En bedenk dat toegankelijkheid niet alleen gaat over mensen met een zichtbare beperking, maar ook bijvoorbeeld het gebruik van heftige animaties in combinatie met motion sickness of epilepsie. Door dit in je achterhoofd te houden bij het testen, kom je erachter of je app echt werkt en door iedereen bediend en begrepen kan worden. Bij ons project VraagApp hebben we de doelgroep (mensen met een verstandelijke beperking) onderdeel gemaakt van de testcyclus.

Meer over de richtlijnen

Alle richtlijnen vind je dus terug in de WCAG van W3C. Daar is zelfs onderscheid gemaakt in informatie voor verschillende doelgroepen zoals ontwerpers, ontwikkelaars en contentschrijvers. Hoewel deze richtlijnen een breed scala van aandachtspunten bevatten, zijn ze niet in staat om in de behoeften van mensen met alle soorten, gradaties en combinaties van functiebeperkingen te voorzien. Bij het ontwikkelen van een app, of webapplicatie is het dus vooral van belang, breder over je doelgroep na te denken, dan alleen in persona’s of de doorsnee gebruiker.

Begin 2023 worden de richtlijnen overigens weer geactualiseerd. De nieuwe versie (WCAG 2.2) is als voorlopige versie al beschikbaar. Kijk op https://www.w3.org/WAI/ voor alle informatie over web toegankelijkheid.