Tips en tricks voor inclusief ontwerpen - WCAG
In de wereld van UX-design is het essentieel om rekening te houden met webtoegankelijkheid, en de Web Content Accessibility Guidelines (WCAG) zijn daarbij van onschatbare waarde.
Hoewel WCAG 3.0 nog niet officieel is vrijgegeven door het World Wide Web Consortium, is er wel een werkgroep die bezig is met de ontwikkeling van deze nieuwe standaard. WCAG 2.1 is momenteel de meest recente officiële versie, en deze biedt al een duidelijke set van richtlijnen om websites en apps toegankelijk te maken.
Het naleven van deze richtlijnen kan echter een uitdaging zijn, omdat de standaard erg hoog ligt. Het is belangrijk om te onthouden dat perfecte naleving van de richtlijnen vaak onmogelijk is, maar het is wel mogelijk om een website of app aanzienlijk toegankelijker te maken door te voldoen aan de belangrijkste richtlijnen. In dit blogbericht zullen we enkele tips geven om WCAG-richtlijnen toe te passen en webtoegankelijkheid te verbeteren voor mensen met verschillende soorten beperkingen.
We beginnen met een weetje. Wist je dat een derde tot de helft van de gebruikers (tijdelijk) een beperking heeft? Denk maar aan sportblessures of een verzwikte pols waardoor je je muis niet meer kan gebruiken. Of een migraineaanval die gepaard gaat met tijdelijke blindheid, wat bekend staat als een "migraine aura".
Net daarom is rekening houden met beperkingen eigenlijk rekening houden met iedereen. Dat maakt het ‘inclusief ontwerpen’. Een inclusief ontwerp zorgt ervoor dat iedereen toegang heeft tot de informatie en functionaliteiten van de website, ongeacht eventuele beperkingen.
Een typische en veelvoorkomende methode om een website toegankelijk te maken voor mensen met een visuele beperking, is die zo bouwen dat de tekst kan worden voorgelezen door een screenreader.
Deze methode is niet alleen handig voor mensen met een visuele beperking, maar ook voor mensen die bijvoorbeeld onderweg zijn en niet kunnen lezen. Het is belangrijk om ervoor te zorgen dat de website op een logische manier wordt voorgelezen. Wat wij als UX’ers indachtig moeten houden dat alle tekst wordt voorgelezen, ook alle “lees meer” knoppen op overzichtpagina’s. Dat kan snel zorgen voor een overload!
Wat als een gebruiker geen muis kan gebruiken? Dan bieden tabs een oplossing. Met tabs spring je van het ene element naar de volgende. Bij het ontwerpen van een website met tabs is het belangrijk om een logische flow te creëren, ook in de navigatieflow. Bijvoorbeeld bij FAQ's kan het handig zijn om een titel te geven met een pijltje naar beneden. Of als er veel tussentitels op de pagina staan, kunnen we een ‘back to top’ elementje voorzien. Maar ook weer niet te veel, want dit wordt dan weer voorgelezen door een screanreader!
Het is ook belangrijk om de focus states van elementen op de website of applicatie te ontwerpen op een manier die duidelijk aangeeft welk element momenteel in focus is. Dit kan worden gedaan door niet alleen de kleur te veranderen bij een focusverandering, maar ook door een duidelijk vormverschil aan te brengen. Dit maakt het voor gebruikers duidelijk welk element momenteel in focus is en draagt bij aan de toegankelijkheid van de website of applicatie.
Een belangrijk aspect van toegankelijkheid is het contrast tussen tekst en de achtergrondkleur. Dit is omdat mensen met een visuele beperking vaak moeite hebben met het lezen van tekst als er niet voldoende contrast is tussen de tekst en de achtergrondkleur. De WCAG heeft daarom richtlijnen voor het minimumcontrastniveau tussen tekst en de achtergrondkleur van de website.
Daarnaast zijn er ook richtlijnen voor het gebruik van kleuren op een website. Kleuren kunnen belangrijk zijn om informatie over te brengen, zoals bijvoorbeeld bij grafieken of diagrammen. Echter, mensen met een visuele beperking kunnen moeite hebben met het onderscheiden van bepaalde kleuren. De WCAG geeft daarom aanwijzingen om voor voldoende contrast te zorgen, of door meer dan enkel kleur te gebruiken om informatie over te brengen. Denk dan bijvoorbeeld aan een kalender die de verwachte drukte aanduidt in een pretpark. Door zowel in kleuren te werken (groen is rustig, rood is druk) als vormelijk (een icoon van een persoon is rustig, drie wijzen op een drukke dag) vermijd je verwarrende informatie voor mensen met kleurenblindheid.
Bij het ontwerpen van een website is het belangrijk om duidelijk te zijn wat de titel en subtitel is, vooral gebruikers die zich navigeren via hulptechnologieën, zoals een screenreader.
Daarnaast is het cruciaal om de juiste beschrijvingen te geven bij afbeeldingen, zodat gebruikers met een visuele beperking deze ook kunnen begrijpen. Dit kan worden gedaan door het invoegen van een alt-tag die een beschrijving geeft van wat er op de afbeelding te zien is. Hierdoor kunnen ook gebruikers die afhankelijk zijn van een screenreader, de informatie op de afbeelding begrijpen.
Het is moeilijk om esthetisch verantwoord en WCAG-proof te zijn. En toch, het is een balans die moet worden nagestreefd. Het is belangrijk om niet alleen aan het uiterlijk van de website te denken, maar ook aan de toegankelijkheid.
In het kort, door het ontwerp en de opbouw van de content zorgvuldig te plannen en te ontwerpen met de WCAG in gedachten, kan de toegankelijkheid van een website of applicatie aanzienlijk worden verbeterd voor alle gebruikers, ongeacht hun beperkingen of assistieve technologieën die ze gebruiken.
