6 websites die laten zien: toegankelijkheid kan ook mooi zijn!

Toegankelijkheid saai? Echt niet! Deze 6 websites bewijzen dat een toegankelijke website ook aantrekkelijk en gebruiksvriendelijk kan zijn. Laat je inspireren en ontdek hoe je jouw website voor iedereen toegankelijk maakt!

Een website die voor iedereen toegankelijk is, zorgt ervoor dat iedereen, met of zonder beperking, makkelijk de weg vindt, informatie begrijpt en de site fijn vindt om te gebruiken.

Maar dat is nog niet alles! 

Een toegankelijke website is niet alleen in veel gevallen wettelijk verplicht, je zorgt hiermee ook voor blije bezoekers die graag terugkomen.

Hoe maak je je website toegankelijk? Denk aan dingen als:

• Goede kleurencombinaties: Zodat iedereen de tekst goed kan lezen.
• Duidelijke teksten: Gebruik een lettertype en -grootte die prettig leesbaar is.
• Overzichtelijke code: Gebruik HTML op de juiste manier, zodat hulpmiddelen zoals screenreaders de informatie goed kunnen begrijpen.

Klinkt misschien ingewikkeld, maar geen zorgen, we helpen je op weg! In dit artikel leggen we uit waar je op moet letten bij het bouwen van een toegankelijke website. We laten je ook zes voorbeelden zien van websites die het al supergoed doen. Laat je inspireren!

Een toegankelijke website: Waarom is dat belangrijk?

Een gebouw kan je met bepaalde technieken toegankelijk maken: Hellingen en liften zorgen ervoor dat iedereen naar binnen kan, bijvoorbeeld ook mensen in een rolstoel. Toegankelijke websites doen hetzelfde, maar dan online! In een steeds digitaler wordende samenleving is het belangrijk dat iedereen op internet mee kan doen.

Een website die goed toegankelijk is, is fijn voor iedereen. Of je nu een beperking hebt of niet, je vindt makkelijker wat je zoekt en de website is prettiger in gebruik.

Je website-gebruikers kunnen met permanente, tijdelijke of situationele beperkingen te maken hebben.  Denk bijvoorbeeld aan mensen die:

• Blind of slechtziend zijn: Zij gebruiken een screenreader die de tekst op de website voorleest.
• Doof of slechthorend zijn: Zij hebben ondertiteling nodig bij video’s.
• Moeite hebben met bewegen: Zij kunnen een muis misschien niet goed gebruiken en navigeren met het toetsenbord.
• Een gebroken arm hebben: Tijdelijk even niet zo handig met een muis.
• Een baby vasthouden: Probeer dan maar eens met één hand te klikken!

Een toegankelijke website houdt rekening met al deze situaties.

Simpele menu’s zijn bijvoorbeeld voor iedereen fijn, maar vooral voor mensen die het lastig vinden om veel informatie tegelijk te verwerken.

Een goed vormgegeven website is dus meer dan alleen een mooi plaatje. Het gaat erom dat iedereen de website makkelijk kan gebruiken en begrijpen!

Hoe toegankelijkheid SEO en rankings beïnvloedt

Hoe beter je website gevonden wordt via Google, hoe meer bezoekers je krijgt. Dat heet SEO. Nu is het zo dat Google niet direct kijkt of je website toegankelijk is. Maar… een toegankelijke website zorgt wél voor blije bezoekers!

Denk maar zo: als mensen je website niet snappen of niet kunnen gebruiken, klikken ze snel weer weg. Een hoog bouncepercentage vindt Google niet fijn. Google wil namelijk dat mensen websites nuttig en makkelijk vinden. Een ondermaats zoekresultaat reflecteert namelijk ook negatief op Google.

Een toegankelijke website zorgt ervoor dat mensen langer blijven en meer pagina’s bekijken. Zo laat je ook aan Google zien dat je website de moeite waard is!

John Mueller, Search Advocate bij Google, zegt het zo: “Als mensen je website niet kunnen gebruiken, zullen ze hem ook niet aan anderen aanraden.”

Dus, een toegankelijke website is goed voor iedereen: voor je bezoekers én voor je positie in Google!

Toegankelijkheid, compliance en juridische aspecten

Wist je dat er wetten zijn die zeggen dat websites toegankelijk moeten zijn? In Amerika hebben ze de Americans with Disabilities Act (ADA), in Europa de European Accessibility Act (EAA) en de gemeenschappelijke toegankelijkheids­normen van producten en diensten. Deze regels zorgen ervoor dat iedereen, ook mensen met een beperking, websites kan gebruiken.

Maar toegankelijkheid is meer dan alleen de wet volgen. Het gaat erom dat je website voor iedereen bruikbaar is. Het is eigenlijk best simpel: iedereen moet online mee kunnen doen!

Bedrijven moeten hierin hun verantwoordelijkheid nemen en ervoor zorgen dat hun website de diversiteit van hun publiek weerspiegelt. Dus, of je nu blind bent, doof bent, of moeite hebt met bewegen, je moet gewoon die website kunnen gebruiken!

Bovendien: Toegankelijkheid is niet alleen goed voor de mensen die je website bezoeken, het is ook goed voor je bedrijf. Hoe meer mensen je website kunnen gebruiken, hoe meer klanten je kunt bereiken!

Een website voor iedereen: hoe zorg je voor toegankelijkheid?

Websites moeten voor iedereen toegankelijk zijn, ook voor mensen met een beperking. Denk aan blinden, slechtzienden, doven, slechthorenden, mensen met een lichamelijke beperking of laaggeletterde mensen. Iedereen moet je website makkelijk kunnen gebruiken.

Maar hoe doe je dat? Daarvoor zijn richtlijnen: de Web Content Accessibility Guidelines (WCAG). Deze richtlijnen zijn gemaakt door het World Wide Web Consortium (W3C), een organisatie die zich bezighoudt met standaarden voor het internet. De WCAG is heel erg uitgebreid en technisch, we lichten hier de belangrijkste punten uit. 

De WCAG kent drie niveaus:

• A: Dit is het basisniveau.
• AA: Dit is de wereldwijde standaard waar iedereen zich aan zou moeten houden.
• AAA: Dit niveau is het strengst en niet altijd nodig.

Als je verplicht bent om aan WCAG richtlijnen te voldoen gaat het meestal om niveau AA. Maar het is niet erg om hier en daar ook aan AAA-richtlijnen te voldoen!

De WCAG richtlijnen gaan over allerlei dingen, zoals:

• Hoe je website eruitziet.
• Hoe makkelijk mensen de weg kunnen vinden op je website.
• Hoe de code van je website is geschreven.

Op de website van het W3C kan je veel meer te weten komen over de WCAG. Ons dochterbedrijf The A11y Collective geeft online cursussen over webtoegankelijkheid.

Maar laten we eerst eens kijken naar een paar belangrijke dingen om op te letten als je begint met het toegankelijk maken van je website:

Alt-tekst voor afbeeldingen

Stel je voor dat je een website bezoekt en de afbeeldingen niet kunt zien. Misschien gebruik je een schermlezer omdat je blind of slechtziend bent. Dan heb je alternatieve tekst nodig!

Alternatieve tekst is een korte beschrijving van een afbeelding. Deze tekst wordt voorgelezen door een schermlezer, zodat je toch weet wat er op de afbeelding staat.

Waar moet je op letten bij het schrijven van alternatieve tekst?

• Houd het kort en bondig: Beschrijf de afbeelding in een paar woorden.
• Focus op de essentie: Wat is het belangrijkste dat mensen moeten weten over de afbeelding?
• Geef geen artistieke kritiek: Je hoeft niet te zeggen of je de afbeelding mooi vindt of niet.

Welke alt-tekst vind jij beter? 

• Een horizontale foto van een kleine zwartharige jongen met een wit overhemd en een korte spijkerbroek, glimlachend vol verwachting, geknield in een stukje gras, wachtend op een kleine harige hond van een onbekend ras die hem op zijn locatie zou ontmoeten. 
• Een kind zit in het gras, wachtend op een hondje dat zijn kant op rent

De tweede beschrijving is inderdaad beter. Waarom? Omdat die beschrijving kort en duidelijk is. Iemand die de afbeelding niet kan zien, krijgt toch de belangrijkste informatie. Zo kunnen blinden en slechtzienden de website net zo goed gebruiken als mensen die wel kunnen zien.

Hoe zorg je ervoor dat je tekst makkelijk te lezen is?

Websites met veel informatie zijn prettiger om te gebruiken als de teksten kort en bondig zijn. Maar hoe maak je die teksten nou echt makkelijk leesbaar? Daarbij zijn lettertypes, tekstgrootte en regelafstand heel belangrijk.

Lettertypes

Kies lettertypes die iedereen makkelijk kan lezen. Vermijd lettertypes met vreemde vormen, die lijken op andere letters maar het net niet zijn. 

Tekstgrootte

Maak je tekst groot genoeg! Gebruik “em” of “rem” om de grootte aan te geven. “1em” of groter is meestal goed voor de gewone tekst.

Regelafstand

Zorg voor voldoende ruimte tussen de regels. Dat maakt grote stukken tekst minder intimiderend en makkelijker te lezen.

Tooltips

Tooltips zijn kleine tekstballonnetjes die verschijnen als je met je muis over iets beweegt.

• Zorg voor een duidelijk contrast tussen de achtergrondkleur en de tekstkleur in tooltips.
• Tooltips mogen nooit belangrijke informatie of knoppen blokkeren.
• De tekst in de tooltips moet makkelijk leesbaar zijn.

Navigeren met het toetsenbord

Een website moet voor iedereen toegankelijk zijn, ook voor mensen die geen muis kunnen gebruiken. Daarom is het belangrijk dat je website volledig te bedienen is met alleen het toetsenbord.

Mensen die geen muis kunnen gebruiken, navigeren met toetsen zoals “Tab” om vooruit te gaan en “Shift” + “Tab” om terug te gaan. Zorg ervoor dat deze toetsen goed werken op je website!

Alle belangrijke onderdelen van je website, zoals links, knoppen en formulieren, moeten bereikbaar zijn met het toetsenbord. Zo kan iedereen makkelijk je website gebruiken, ongeacht hun fysieke mogelijkheden.

Goed kleurcontrast

Goede kleurencombinaties op je website zijn belangrijk, vooral voor mensen met een visuele beperking. Denk bijvoorbeeld aan mensen die kleurenblind zijn. Door voldoende contrast te gebruiken tussen de tekstkleur en de achtergrondkleur, zorg je ervoor dat iedereen de tekst goed kan lezen.

Uiteraard staan in de WCAG (Web Content Accessibility Guidelines) richtlijnen voor goed kleurcontrast. Gelukkig zijn er handige tools die je helpen om te checken of jouw kleurencombinaties voldoen aan deze richtlijnen:

• WebAIM Contrast Checker: Deze tool berekent het contrast tussen twee kleuren.
• Stark plugin: Deze plugin voor Figma, Sketch en Adobe doet hetzelfde.

Zwarte tekst op een witte achtergrond geeft een hoog contrast en is dus goed leesbaar. Lichtgrijze tekst op een witte achtergrond heeft een laag contrast en is lastig te lezen.

Denk dus goed na over je kleurencombinaties!

Ondertiteling bij video’s

Ondertiteling is niet alleen handig voor mensen die slecht horen. Ook mensen die de taal niet goed begrijpen of een nieuwe taal leren, hebben er veel aan. En in een rumoerige omgeving of als je het geluid uit hebt staan, zijn ondertitels natuurlijk onmisbaar.

Duidelijke navigatie en ontwerp

Een website moet makkelijk te gebruiken zijn. Zorg daarom voor een duidelijke navigatie en een consistent ontwerp. Dat betekent dat de website er op elke pagina hetzelfde uitziet. Gebruik bekende webdesign-patronen, zoals een zoekbalk op een logische plek, en zorg voor een goede structuur met duidelijke kopjes.

Semantische HTML en ARIA-landmarks

Semantische HTML is code die de functie van verschillende onderdelen van een webpagina beschrijft. Dit helpt bezoekers en schermlezers om de pagina beter te begrijpen. Gebruik bijvoorbeeld kopjes zoals <h1>, <h2>, <h3> om verschillende secties aan te duiden.

ARIA-landmarks zijn stukjes code die extra informatie geven aan schermlezers. Zo kunnen gebruikers de website beter begrijpen en navigeren. Je kunt ARIA-landmarks bijvoorbeeld gebruiken om een zoekfunctie op je website te labelen. Schermlezers herkennen deze functie dan meteen en kunnen gebruikers er snel naartoe leiden.

The A11y Collective heeft een hele ARIA-cursus, als je de diepte in wilt!

6 voorbeelden van toegankelijke websites waar wij trots op zijn

Genoeg theorie! Laten we eens kijken naar websites die goed scoren op toegankelijkheid én mooi zijn.

Fietsersbond

De nieuwe website van de Fietsersbond is een onuitputtelijke bron van informatie over fietsen, fietsroutes, nieuws en evenementen. Geïnteresseerde fietsers kunnen op de site lid worden en zich bij ruim 33.000 andere leden aansluiten. Er zitten ook bijna 100 subsites van lokale afdelingen in deze site. 

Lees ook onze case over de nieuwe website van de Fietsersbond.

IFFR

Het International Film Festival Rotterdam (IFFR) is een van de grootste en meest prestigieuze filmfestivals ter wereld. Het festival vindt elk jaar plaats in Rotterdam en toont een breed scala aan films uit de hele wereld. De website van het IFFR is een belangrijk platform voor het festival, waar bezoekers informatie kunnen vinden over het programma, tickets en evenementen.

In 2024 heeft het IFFR een nieuwe website gelanceerd. De website is ontworpen om toegankelijk te zijn voor iedereen en gemakkelijk te gebruiken. Gebouwd met WordPress, biedt de nieuwe site een stabiel en gebruiksvriendelijk platform dat hoge verkeersvolumes kan aan. Het ontwerp van de website is gebaseerd op de merkidentiteit en online stijl van het IFFR. Het is een dynamisch ontwerp dat gedurende het jaar verandert om de actuele festivalcampagne weer te geven.

Lees ook onze case over de nieuwe website van IFFR.

The A11y Collective

Wil jij alles leren over webtoegankelijkheid? Dan is The A11y Collective dé plek voor jou! Op dit online leerplatform vind je cursussen en informatie die je helpen om websites te bouwen die voor iedereen toegankelijk zijn. Vanzelfsprekend is de site van The A11y Collective zelf ook geheel toegankelijk gebouwd.

Discriminatie.nl

Discriminatie.nl heeft een gebruiksvriendelijke website die ook volledig met het toetsenbord te bedienen is. Dat laat zien dat ze toegankelijkheid belangrijk vinden.

De website is gebouwd met semantische HTML. Dat is een soort code die de betekenis van de inhoud beschrijft. Zo begrijpen zowel bezoekers als schermlezers makkelijk hoe de website in elkaar zit en kunnen ze er vlot doorheen navigeren.

Lees ook onze case over de nieuwe website van discriminatie.nl.

KIT

KIT is een kennisinstituut, bedrijfslocatie en congrescentrum met een missie: werken aan een inclusieve en duurzame wereld. De inclusiviteit is ook te zien op hun volledig toegankelijke website.

Denk aan handige functies zoals:

• Intuïtieve navigatie: Je vindt makkelijk je weg op de website.
• Aangepaste kleurenschema’s: De kleuren zijn zorgvuldig gekozen, zodat ook mensen met een visuele beperking de website goed kunnen gebruiken.
• Compatibiliteit met schermlezers: Blinden en slechtzienden kunnen de website gebruiken met een schermlezer.

Lees ook onze case over de nieuwe website van KIT.

IDEM

IDEM Rotterdam is een organisatie die zich inzet voor inclusie in de maatschappij. Ze hebben een website die professionals in het sociale domein helpt met antwoorden op veelgestelde vragen over inclusie. De website is onlangs opnieuw ontworpen in samenwerking met Level Level.

Lees ook onze case over de nieuwe website van IDEM. 

Laat je inspireren!

Al deze voorbeelden laten zien dat toegankelijkheid echt mogelijk is. Begin vandaag nog met het verbeteren van je eigen website! Door deze tips toe te passen, maak je je website gebruiksvriendelijker voor iedereen.

Maak je nieuwe website digitaal toegankelijk én mooi – wij helpen je graag!

Een toegankelijke website maken gaat niet alleen om het voldoen aan de regels. Het gaat erom dat je alle bezoekers verwelkomt en ze een prettige ervaring biedt.

Er zijn tools die je website op toegankelijkheid controleren, maar die geven slechts een beperkt beeld. Ze kunnen de gebruikerservaring niet beoordelen zoals een mens dat kan.

Pas op voor snelle oplossingen! Sommige tools beloven je website met één klik toegankelijk te maken. Vaak lossen deze ’tovermiddelen’ problemen niet echt op en ze worden vaak bekritiseerd door mensen met een beperking.

De juiste aanpak

Toegankelijkheid is een continu proces. Als je met Level Level samenwerkt, ben je er zeker van dat het resultaat voor iedereen toegankelijk en inclusief is. 

We kunnen

• je huidige websites reviewen en duidelijke instructies aan je developers geven
• je web-afdeling opleiden, designers, schrijvers en developers om webtoegankelijkheid in alle processen te verankeren
• je nieuwe toegankelijke website bouwen, van design tot uitvoering, zo complex als je het maar wilt maken, daag ons uit

Laten we samen ontdekken hoe we jouw website toegankelijk én mooi kunnen maken.