Een website toegankelijk voor personen met een handicap

De WCAG praktisch toepassen op je website

Jaana Coppens
Grow With the Flow
7 min readAug 17, 2021

--

Je staat er zelf misschien niet meteen bij stil maar voor veel personen met een handicap is het bezoeken van een website geen evidentie.

Daarom zijn er richtlijnen opgesteld voor het beter toegankelijk maken van websites en andere digitale kanalen. Deze richtlijnen staan beschreven in WCAG, dit staat voor ‘Web Content Accessibility Guidelines’.

Een website maken, dat is een samenwerking tussen Yools en onze klanten. Daarom laten we in onderstaand interview zowel onze designer Jasmien aan het woord alsook Veerle, bestuurslid én cliënt bij IZW. Zij vertellen je wat meer over de WCAG en wat ze voor hen hebben betekend bij het maken van de IZW website.

Zelf nood aan een website voor je vereniging of vzw die voldoet aan de WCAG? Yools helpt je graag bij met advies en expertise. We bouwen, samen met jullie, graag een aantrekkelijk én toegankelijk website!

Onze webdesigner Jasmien aan het woord

Een foto van Jasmien, webdesigner bij Yools

Hey Jasmien! Had je al eens van de Web Content Accessibility Guidelines (WCAG) gehoord voor je aan de website van IZW begon?

Ik had wel al eens van de richtlijnen gehoord en wist dat deze bijvoorbeeld bij websites van overheidsinstanties gebruikt worden, maar de exacte richtlijnen waren eerlijk gezegd nog onbekend voor mij.

Iedereen heeft al wel eens een website van de overheid bezocht en daar valt het direct op dat deze websites veel gemeenschappelijk hebben.

Enkele voorbeelden (screenshots van) websites van de overheid zoals die van de Federale Dienst Financiën, de Officiële site van België en de informatieve website van de Federale Overheid over het Corona virus.
Voorbeelden van overheidssites: https://financien.belgium.be/, https://www.belgium.be/ en https://www.info-coronavirus.be/ De sites van de overheid zijn veelal sober met veel contrast en lichte achtergronden en duidelijke buttons.

Ik wist daardoor wel dat de richtlijnen te maken hadden met een optimale toegankelijkheid van de website en er bijvoorbeeld regels waren zoals voldoende contrast voorzien, complexiteit vermijden, etc.

De website van IZW was wel het eerste project waar ik de richtlijnen zelf moest gaan toepassen.

Op welke manier ben je van je vaste ontwerpproces moeten afwijken om rekening te houden met deze richtlijnen?

We hebben om te beginnen onderzoek gedaan naar de WCAG en de verschillende versies van deze richtlijnen. Daaruit bleek dat we een aantal zaken sowieso al toepassen in onze ontwerpen, maar dat er met een aantal andere zaken inderdaad extra rekening gehouden moest worden.

Een van de vereisten is dat elke link een duidelijk doel en omschrijving moet hebben. Een link met “lees meer” mag bijvoorbeeld niet, wat nochtans wel vaak gebruikt wordt. De beschrijvingen van de links moesten dus concreter zoals “bekijk de open plaatsen”.

Dat was soms wat zoeken omdat de tekst voor een link of knop ook best niet meer dan 5 woorden bevatten.

Een screenshot met voorbeelden van buttons met een duidelijk doel en omschrijving op de website van IZW
Voorbeeld van buttons met een duidelijk doel en omschrijving op https://izw.be/

Ook complexiteit vermijden is een belangrijk gegeven en dus gebruik je best geen sliders of andere elementen met een animatie, wat in veel van onze projecten standaard terugkomt.

IZW heeft bijvoorbeeld logo’s van partners. Deze worden vaak in een slider getoond maar die vermeden we dus best.

Een screenshot van de raster-structuur met partners op de website van IZW.
De partners van IZW worden niet getoond in een slider-element maar in een duidelijke raster-structuur op https://izw.be/over/

Tenslotte is het contrast ook heel belangrijk. Daar proberen we sowieso wel rekening mee te houden omdat dat belangrijk is voor de leesbaarheid, maar voor dit project hebben we voor elke content blok en over de gehele website extra nagekeken of het contrast goed zat.

Welke zaken paste je sowieso al toe in je ontwerpen?

De semantische HTML structuur (dus bijvoorbeeld de hiërarchie van titels: H1, H2, H3) is belangrijk volgens de WCAG. Deze structuur is standaard een belangrijk webdesign principe en daarnaast ook relevant voor je SEO.

Met de regels rond contrast proberen we ook standaard rekening te houden, die zijn gewoon op alle websites belangrijk voor de gebruiksvriendelijkheid van je bezoekers.

Een screenshot van de website van IZW die de toepassing van de contrastregels illustreert.
De contrastverhouding moet ten minste 4,5:1 zijn voor normale tekst en 3:1 voor grote tekst. Voor de banner is dit 9,92:1 en voor de button 7,07:1 wat de leesbaarheid sterk bevorderd.

Ook het navigeren aan de hand van je toetsenbord is iets wat onze nieuwe websites standaard hebben en wat aan de WCAG voldoet.

Daarnaast voorzien we ook altijd de mogelijkheid om een alternatieve beschrijving toe te voegen aan afbeeldingen, dat is ook iets wat in de richtlijnen staat.

Zijn er zaken die je nu meeneemt naar andere website ontwerpen die niet specifiek vragen om de WCAG te volgen?

Vooral de specifieke beschrijving van microcopy is iets wat ik probeer mee te nemen in nieuwe ontwerpen. Duidelijke tekst in links en in de navigatie om écht te omschrijven wat je bezoekers kunnen terugvinden op die link of pagina is bijvoorbeeld iets waar ik nu meer op let. Als je bezoekers wilt aanzetten tot actie is dat ook van belang.

Een screenshot van de website van IZW die een voorbeeld van microcopy toont.
Voorbeeld van microcopy in een Call To Action knop

Zijn er aspecten uit het ontwerp waar je extra trots op bent?

De meeste websites met WCAG zijn van overheidsinstanties en zien er over het algemeen wat soberder uit. Dat is om te voldoen aan de richtlijnen uiteraard, maar ik ben wel trots dat we voor de website van IZW aan de richtlijnen kunnen voldoen én ook de eigenheid van IZW konden weergeven.

Daarnaast zijn we bij Yools ook fan van de menselijke en persoonlijke aanpak en dat is op de website van IZW ook terug te vinden.

Naast het onderzoeken van de WCAG deden we ook onderzoek naar de ideale structuur voor de website. Daaruit besloten we om potentiële bewoners te overtuigen door reviews te integreren waarin bewoners van IZW aan het woord komen alsook door de persoonlijke call-to-actions die per locatie tonen met wie je contact kan opnemen.

Een screenshot van de website van IZW die een contactpersoon toont.
Een persoonlijke toets door de contactpersoon te tonen die je aan de lijn zal krijgen.

Veerle, bestuurslid en cliënt bij IZW aan het woord

Het logo van IZW

Hey Veerle! Kan je wat meer vertellen over IZW?

IZW levert een dienstverlening voor personen met een fysieke handicap. We werken samen met een sociale huurmaatschappij om aangepaste woningen aan te bieden voor personen met een fysieke handicap.

Bijkomend zorgen wij voor 24 uur op 24 hulp voor deze personen. Mensen met een fysieke handicap kunnen in een aangepaste woning wonen en hulp vragen bij al hun activiteiten.

We hebben 3 diensten: 2 in Leuven en 1 in Strombeek-Bever. In elke dienst is er een centrale locatie waar assistenten aanwezig zijn. Rondom de dienst liggen aangepaste woningen waar onze cliënten kunnen wonen en hulp vragen.

Wat is jouw rol bij IZW?

Ik ben zelf cliënt bij IZW en woon in een aangepaste woning. Ik zit ook al een aantal jaar in het bestuur van IZW. IZW vindt het heel belangrijk dat personen met een handicap vertegenwoordigd zijn in het bestuur.

Hoe ben je bij Yools terecht gekomen voor het bouwen van jullie website?

Voor de zoektocht naar een websitebouwer heb ik samengewerkt met een coördinator (diensthoofd) van IZW. Zij hebben mij gevraagd omdat ik een achtergrond heb in IT.

We hebben eerst een lijst gemaakt van punten die we wilden bereiken met onze nieuwe website. Deze lijst hebben we naar een heleboel firma’s opgestuurd. Daarna hebben we een aantal gesprekken gevoerd met mogelijke websitebouwers.

We hadden onmiddellijk een heel goed gevoel bij Kevin van Yools, die in het eerste gesprek al een heleboel hints en tips gaf. Hij gaf ook een heel verstaanbare uitleg en kon heel goed meedenken met onze ideeën. We hebben natuurlijk ook een prijsvergelijking gedaan maar Yools was voor ons de beste kandidaat.

Waarom zijn de WCAG zo belangrijk voor IZW en jullie cliënten?

Wij zijn een organisatie voor personen met een handicap en daarom hechten we veel belang aan toegankelijkheid. En toegankelijkheid is ook belangrijk in de digitale wereld. Onze website kan door iedereen gelezen worden.

Hoe reageren de gebruikers op jullie nieuwe IZW website?

Onze gebruikers vinden de website heel mooi. Ze ziet er fris en modern uit. Een groot verschil met onze oude website. De foto’s en de layout maken de website heel aantrekkelijk.

Heb je een favoriet stukje van de website?

Het mooiste stukje van de website zijn de getuigenissen van onze cliënten. Deze staan bij onze locaties. Dit geeft een heel persoonlijke toets en toont aan hoeveel belang IZW hecht aan zijn cliënten.

Een scrollend voorbeeld van de ervaringen van IZW cliënten op hun website
De getuigenissen van cliënten op de website van IZW

Zelf nood aan een website voor je vereniging of vzw die voldoet aan de WCAG? Yools helpt je graag bij met advies en expertise. We bouwen, samen met jullie, graag een aantrekkelijke én toegankelijke website!

--

--