icon-mail icon-phone icon-facebook LinkedIn icon-twitter icon-youtube icon-twitter icon-x.com icon-instagram close icon-close icon-arrow-down icon-plus

Meer weten? We horen je graag!

070 750 74 74
info@flink.nl

Artikel

Werkt je website echt voor iedereen?

#WCAG
#toegankelijkheid
#design/ux

Wat leer je van een WCAG-audit die op toegankelijkheid toetst? Welke keuzes maak je daarna? En waarom wordt een website uiteindelijk beter voor álle gebruikers? Voor Staedion is online toegankelijkheid geen los project, maar een belangrijk onderdeel van hoe zij hun huurders willen bereiken. Visual designer Magali de Walick en front-end developer Anke Willems vertellen aan de hand van de Staedion-case hoe ontwerp, techniek en bewustwording samen zorgen voor een website die voor iedereen werkt.

Magali en Anke op de werkplek
Anke en Magali verbeteren toegankelijkheid

Toegankelijkheid begint bij je doelgroep

Staedion heeft als woningcorporatie een brede en diverse groep huurders. Juist daarom moet de website niet alleen goed ogen of technisch kloppen, maar vooral begrijpelijk, vindbaar en bruikbaar zijn voor zoveel mogelijk mensen. Volgens Anke is dat precies waarom toegankelijkheid voor deze organisatie zo belangrijk is.

“Staedion beseft heel goed dat ze mensen met alle leeftijden, talen, nationaliteiten en verschillende mate van beperking in hun doelgroep hebben”, vertelt Anke. “Daarom noemen we toegankelijkheid ook wel inclusiviteit, want je maakt je website inclusief voor iedereen.”

Die verantwoordelijkheid is voor Staedion niet alleen maatschappelijk, maar ook praktisch en juridisch relevant. Anke vertelt dat Staedion liet uitzoeken wat de European Accessibility Act voor de organisatie betekent. “Omdat huurders via de website online een contract kunnen aangaan, moet Staedion haar diensten toegankelijk aanbieden. Daarmee komt in dit project alles samen: de wens om huurders zo goed mogelijk te helpen én de noodzaak om online dienstverlening toegankelijk te maken.” 

Staedion keek daarom vanaf het begin verder dan alleen een mooie of technisch goede website. Anke noemt daarbij onder meer B1 taal, Nederlands dat eenvoudig en duidelijk is en door de meerderheid van alle volwassenen wordt begrepen. Ook taaltoegankelijkheid kreeg aandacht. “Omdat Staedion huurders heeft die samen meer dan honderd verschillende talen spreken, koos de organisatie niet voor een beperkt aantal taalkeuzes, maar voor een Google Translate optie op de website,” vertelt Anke. Daarnaast is er aandacht voor mensen die de website op een andere manier gebruiken, bijvoorbeeld met een screenreader of toetsenbord. “Ze zijn heel bewust informatie zo breed mogelijk beschikbaar aan het maken. Dan is het logisch dat je ook voor mensen met een beperking de informatie zo goed mogelijk bereikbaar maakt.”

Met een paar slimme design keuzes help je álle gebruikers de website beter te
bedienen.
Magali de Walick Digital designer

Design maakt toegankelijkheid zichtbaar

Magali legt uit dat veel toegankelijkheidskeuzes al in de ontwerpfase beginnen. Denk aan kleurcontrast, typografie, buttons, links en formulieren. Bij Staedion betekende dit onder andere dat de huisstijlkleuren kritisch werden bekeken.

“De huisstijlkleur oranje voldeed niet aan de minimale contrastwaarde”, vertelt Magali. “Daar hebben we in samenspraak met de klant een alternatief voor moeten zoeken. Het werd een oranje die dichtbij de huisstijlkleur zit en wél voldoende contrast heeft.”

Volgens Magali gaat toegankelijk ontwerpen niet alleen over kleuren. Het moet ook visueel duidelijk zijn wat klikbaar is. “Een button moet als button herkenbaar zijn, een link moet duidelijk als link voelen en iemand die zonder muis door de website navigeert moet goed kunnen zien waar hij of zij op dat moment is. Bijvoorbeeld doordat er een duidelijke rand om een knop of link verschijnt wanneer je daar met de Tab toets op terechtkomt.”

Volgens Magali vragen vooral formulieren extra aandacht. “Daar zit veel interactie met een gebruiker in”, legt ze uit. “Hoe meer interactie, hoe meer frustratie dit kan opleveren.” Daarom moeten labels, invulvelden, helpteksten en foutmeldingen volgens haar zo duidelijk mogelijk zijn.

“Een foutmelding moet bijvoorbeeld niet alleen rood zijn”, zegt Magali. “Gebruik ook een icoon en leg goed uit wat er niet goed is gegaan. Dus niet alleen: fout!”

“Ook kleine ontwerpkeuzes maken daarbij verschil. Denk aan invulvelden die duidelijk herkenbaar zijn, voldoende contrast hebben en technisch goed werken. Bijvoorbeeld doordat je met de Tab toets logisch naar het volgende veld gaat, of doordat je op mobiel direct een numeriek toetsenbord krijgt bij een telefoonnummer”, vult Magali aan.

“Met een paar slimme designkeuzes help je álle gebruikers de website beter te bedienen”, vat Magali samen. “Iemand is misschien maar zestig seconden op je website. Die moet dan niet gaan twijfelen of iets wel een button is of niet.”

Staedion case OG
Staedion: Een platform dat voelt als thuiskomen

Front-end laat toegankelijkheid echt werken

“Front-end ís toegankelijkheid”, zegt Anke. “Als we hier niet op letten bij het ontwikkelen, dan kun je een website heel mooi maken, maar is hij volledig ontoegankelijk.”

Daarmee bedoelt ze dat toegankelijkheid pas echt tot leven komt in de browser. Waar design de voorwaarden schept, zorgt front-end ervoor dat iemand de website ook zelfstandig kan gebruiken. Denk aan code die screenreaders goed kunnen voorlezen, koppen die in een logische volgorde staan en toetsenbordbediening die logisch aanvoelt.

Juist die toetsenbordbediening maakt voor sommige gebruikers een groot verschil. “Als je als ziend mens een cookiemelding bovenop de website ziet liggen, klik je die waarschijnlijk meteen weg”, legt Anke uit. “Maar als een toetsenbordgebruiker eerst honderd keer op de Tab toets moet klikken voordat die bij de cookiemelding is, dan doe je iets niet goed. Daarom moet de volgorde waarin je met de Tab toets door een website gaat, aansluiten op wat je op het scherm ziet.”

Dat principe kwam bij Staedion bijvoorbeeld terug in het menu. Uit de WCAG audit bleek dat de manier waarop gebruikers met het toetsenbord door de website bewogen nog scherper kon. “Je wilt dat als een menu opent, je alleen door de zichtbare menu items kunt navigeren”, legt Anke uit. “Niet door verborgen informatie op de achtergrond.” Zo wordt toegankelijkheid niet alleen iets wat je ontwerpt, maar vooral iets wat in het gebruik moet kloppen.

Een toegankelijke website is gewoon een website die voor iedereen prettiger werkt, soms ongemerkt.

Het is belangrijk om websites zo te ontwikkelen dat iedereen er op de beste manier informatie uit kan halen. Voor mij is het ook een manier om de wereld via mijn werk een klein stukje beter te maken.

Anke Willems, front-end developer bij Flink
Anke Willems Front-end developer

Een audit maakt keuzes concreet

Een WCAG-audit laat zien waar een website al goed werkt en waar verbetering nodig is. Volgens Anke gaat het daarna vooral om prioriteren. Welke verbeteringen hebben veel impact? Welke kosten relatief weinig tijd? En welke punten moeten op de backlog voor later?

“Vaak geven we prioriteit aan zaken als navigatie”, vertelt Anke. “Want als die niet goed is, houdt het meteen op voor je bezoeker.”

Soms zitten verbeterpunten niet in de eigen website, maar in onderdelen die van buitenaf worden ingeladen. Bij Staedion kwam bijvoorbeeld een externe tool naar voren die zelf nog niet voldoende toegankelijk was. “Dan kunnen wij die tool niet zelf toegankelijk maken”, legt Anke uit. “Maar we kunnen wel advies geven als blijkt dat zo’n externe tool de website minder toegankelijk maakt.”

Daarmee wordt toegankelijkheid breder dan de eigen techniek. Het gaat ook om de keuzes die je maakt in externe oplossingen, hoe je leveranciers daarop bevraagt en welke alternatieven je onderzoekt als een tool niet voldoet.

Magali herkent dat toegankelijkheid vraagt om consequente keuzes. Niet alleen in losse pagina’s, maar juist in het hele systeem erachter. Daarom worden de verschillende vormen van interactie vastgelegd in de styleguide. Zo wordt toegankelijkheid geen verzameling losse verbeteringen, maar een vast onderdeel van het ontwerp en de doorontwikkeling.

Disability is not a personal Health condition. Disability is mismatched human interactions.
Microsoft Inclusive Design

Toegankelijkheid stopt niet bij livegang

Anke benadrukt dat WCAG geen eenmalige checklist is. “Een website is een levend iets”, zegt Anke. “Er wordt steeds content toegevoegd en verder doorontwikkeld. Juist daarom is het belangrijk dat toegankelijkheid onder de aandacht blijft en dat je af en toe weer een check doet.”

Bij Staedion zat die aandacht ook duidelijk aan de klantkant. Product Owner Priscilla hield toegankelijkheid scherp op de agenda en dacht actief mee over keuzes en vervolgstappen. “Priscilla van Staedion heeft zelf altijd heel goed bovenop de toegankelijkheid gezeten”, vertelt Anke. “Dat is meer uitzondering dan regel, want vaak moeten wij vanuit Flink uitleggen waarom toegankelijkheid van belang is. In dit geval zat Priscilla er zelf ontzettend achteraan.” 

Juist die betrokkenheid maakte volgens Anke het verschil. “Ik denk dat het de grootste impact maakt als de klant er ook echt heel betrokken bij is”, zegt ze. “Want zonder die betrokkenheid is het heel plat en ben je nergens.” 

Daarbij ligt niet alles bij techniek of design. Ook content en redactie spelen een grote rol. Denk aan goede alt teksten, toegankelijke pdf’s, ondertiteling bij video’s en duidelijke uitleg bij formulieren. Anke noemt video als voorbeeld. “Als er gesproken tekst is, moet er ondertiteling zijn. En als beeld belangrijke informatie bevat, moet die informatie ook op een andere manier beschikbaar zijn.”

Interview Staedion OG
Product Owners Priscilla en Bianca van Staedion

Beter voor mensen met én zonder beperking

Volgens Anke is het belangrijk om toegankelijkheid breder te zien dan alleen de groep mensen met een beperking. Tegelijkertijd is die groep groter dan veel organisaties denken. “Ongeveer 20 procent van de websitebezoekers heeft op de een of andere manier een handicap”, vertelt Anke. “Soms gaat het om kleurenblindheid, slechtziendheid, slechthorendheid of een motorische beperking. Kijk maar hoeveel mensen je kent met een leesbril.” 

Ook tijdelijke situaties maken een groot verschil. Iemand met een gebroken pols navigeert misschien met het toetsenbord. Iemand in de trein kijkt een video zonder geluid. Iemand in de felle zon heeft extra baat bij goed contrast. Voor Staedion zit de waarde bovendien niet alleen in een betere online ervaring voor huurders. Als informatie duidelijker, begrijpelijker en beter vindbaar is, kan dat ook vragen bij het callcenter verminderen. 

Anke vat dat mooi samen. “Een toegankelijke website is gewoon een website die voor iedereen prettiger werkt, soms ongemerkt. Het is belangrijk om websites zo te ontwikkelen dat iedereen er op de beste manier informatie uit kan halen. Voor mij is het ook een manier om de wereld via mijn werk een klein stukje beter te maken.”

En precies daar zit de waarde. WCAG gaat niet alleen over regels, techniek of audits. Het gaat over mensen. Over drempels wegnemen. Over online informatie die voor iedereen toegankelijk is. Voor Staedion betekent dat: huurders zo goed mogelijk helpen, ongeacht hoe zij de website gebruiken. Vandaag, morgen en bij iedere volgende stap in de doorontwikkeling. 

Wil je weten waar jouw website drempels opwerpt? We kijken graag met je mee. 

Plan meteen een vrijblijvende kennismaking of laat je gegevens achter en we komen bij je terug.