Actueel

Blog

Training 'WCAG en webdesign'

Enkele weken geleden hebben diverse Interactie ontwerpers en testers van QDelft een training gevolgd met betrekking tot webtoegankelijkheid. Deze training is door The Internet Academy op maat gemaakt voor QDelft. Aan de hand van een aantal praktische tips legde Jaap van de Putte van The Internet Academy uit hoe een webdesigner toegankelijke websites ontwerpt en ook waar een tester de website op kan testen.

WCAG en webdesign

In een vorige blog hebben wij jullie alles al verteld over WCAG, maar toch nog even in het kort: Wat is WCAG precies? WCAG staat voor Web Content Accessibility Guidelines. Dit zijn internationale richtlijnen voor webtoegankelijkheid en bestaan uit vier basisprincipes: waarneembaar voor iedereen, bedienbaar voor iedereen, begrijpelijk voor iedereen en robuust voor hulpapparatuur. Momenteel is versie 2.0 van WCAG leidend.

Tijdens de training hebben wij kort stilgestaan bij deze richtlijnen. Het grootste gedeelte van de tijd hebben wij besteed aan de relatie tussen deze richtlijnen en het gebruik bij webdesign. Aan de hand van een lijst met 15 tips en diverse praktijkvoorbeelden hebben wij veel geleerd over de toepassing van WCAG in het designproces. Een aantal handige tips:

  1. Gebruik altijd HTML heading-elementen voor de koppen op je website en sla geen niveaus over. Realiseer je daarbij dat de heading-elementen bedoeld zijn om betekenis mee te geven en niet voor design.
  2. Zorg voor een contrastratio van minimaal 4,5 tussen tekst en achtergrond. De contrastratio geeft aan hoe groot het contrast is tussen verschillende kleuren. Hoe groter het contrast, hoe beter de tekst te onderscheiden is. Aan de andere kant kan een te hoog contrast ook weer voor problemen zorgen.
  3. Maak linkjes in een lopende tekst herkenbaar als link. Dit kan op diverse manier gebeuren. De simpelste manier is om de link te onderstrepen. Als dit niet mogelijk is dan gelden er andere eisen: het contrast met de omliggende tekst moet 3.0 of hoger zijn én er moet een visuele verandering zijn bij een focus op de link, bijvoorbeeld onderstreping.
  4. Zorg ervoor dat je geen informatie probeert over te brengen met uitsluitend kleur. Op onderstaande afbeelding is hiervan een voorbeeld te zien. Mensen die kleurenblind zijn, kunnen het verschil tussen de rode kleur van de pijl en de groene kleur van het verkeerslicht niet (goed) onderscheiden. Het verkeerslicht zelf is wel toegankelijk: het maakt behalve van de kleur ook gebruik van de positie van het licht om informatie over te brengen.

  Verkeerslicht met een rood of groene pijl.

Opdrachten

Tijdens de training hebben wij diverse opdrachten gedaan om WCAG toe te passen in het designproces. Eén van die opdrachten ging over de richtlijnen die betrekking hebben op contrasteisen. We hebben met diverse browserplug-ins een bekende nieuwswebsite onderzocht.  Uit deze opdracht bleek dat er redelijk veel fouten waren op deze website. Vaak is de reden hiervan dat er content op de website is, die verplicht aanwezig moet zijn, maar niet belangrijk is om (meteen) te zien. Het is hierbij verstandiger om te veranderen van locatie op de pagina (verder naar beneden) dan het contrast te verlagen.

De afsluitende opdracht die wij met de gehele groep hebben uitgevoerd, is het maken van een eigen lijst met tips. Deze lijst kunnen wij binnen Q gebruiken in ons design- en testproces. Voor de opdracht werkte wij in tweetallen. Elk tweetal kreeg een eigen richtlijn. Bij elke richtlijn moesten drie vragen beantwoord worden: (1) Wat is precies de regel? (2) Waarom is deze regel belangrijk? (3) Wat gaat er vaak mis en hoe kun je dat oplossen? Al deze tips hebben wij verzameld op grote vellen papier en daarna aan de rest van de groep gepresenteerd. We hebben de volgende richtlijnen behandeld: Gebruik altijd headings voor koppen; Scheid inhoud van vorm; Breng geen betekenis over met alleen kleur; Zorg voor een goede contrastratio; Maak hyperlinks in lopende tekst herkenbaar; Zorg voor leesbare teksten. De vellen met de resultaten zijn hieronder te vinden:

Papieren vel met uitwerking voor de stelling; maak hyperlinks in lopende tekst herkenbaar
Papieren vel met uitwerking voor de stelling breng geen betekenis over met kleur alleen
Papieren vel met uitwerking voor de stelling; zorg voor een goed contrast ratio
Papieren vel met uitwerking voor de stelling; zorg voor leesbare teksten.
Papieren vel met uitwerking voor de stelling; gebruik altijd headings voor koppen
Papieren vel met uitwerking voor de stelling; scheid inhoud van vorm

Wat is ons opgevallen?

Tot slot nog enkele punten die tijdens de training ter sprake kwamen en ons opvielen.
Het eerste is dat je niet altijd aan alle richtlijnen moet willen voldoen. Zoals bekend zijn er drie niveaus binnen WCAG: A, AA en AAA. De ontwikkelaars van WCAG zeggen het volgende over niveau AAA: “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.” De richtlijnen van dit niveau zijn vaak moeilijk om aan te voldoen en daarmee niet haalbaar voor de meeste websites.
Een ander aspect van WCAG dat ter sprake kwam is dat WCAG niet voor alle personen met een functiebeperking evenveel aandacht heeft. Zo hebben veel richtlijnen betrekking op blinde gebruikers, maar zijn er veel minder die bedoeld zijn om de webtoegankelijkheid voor de laaggeletterde gebruiker te verbeteren.


Het laatste punt dat ons opviel is dat klanten vaak het idee hebben dat het bouwen van een website die voldoet aan de WCAG (meestal niveau AA) extra tijd en geld kost en uiteindelijk weinig oplevert. Wat hen mogelijk over de streep kan trekken is dat het naast een technisch goede website die voor iedereen te benaderen en te gebruiken is, ook een veel betere vindbaarheid door zoekmachines oplevert. Beide is voor bepaalde websites en doelgroepen erg belangrijk, denk aan een overheidswebsite of mensen die een screenreader gebruiken. In het onderstaande filmpje wordt door een blinde gebruiker duidelijk gemaakt hoe belangrijk een toegankelijke website voor hem is.

Onderwerpen: Training, Webtoegankelijkheid, WCAG, Webdesign, Testen, Interactie ontwerp