Inclusieve website – zo doe je dat

Geschreven door: Jacki

13 april 2022

Wist je dat het sinds 2018 voor sommige sectoren wettelijk verplicht is om hun website digitoegankelijk te maken? Overheden moeten bijvoorbeeld ervoor zorgen dat ze aan de hoogste eisen voldoen zodat iedereen (ook mensen met een beperking) gebruik kunnen maken van de digitale systemen (websites, portals etc).

Als maatschappij bewegen wij ons ook meer en meer richting een toegankelijke en inclusieve wereld (yaaas!) en wij vinden dat iedereen daar een steentje aan bij kan dragen. Bijvoorbeeld door op je website, shop of e-learning omgeving rekening te houden met digi toegankelijkheid.

In deze blog laten we je zien hoe dat kan doen zodat ook jij op die manier bij kan dragen aan een inclusieve wereld 🙂

Wat is inclusiviteit?

Inclusiviteit draait om alle (of zo veel mogelijk) mensen te waarderen en te betrekken. Het gaat om wie ergens aan mee mag doen, wie beslissingen mag nemen en wie gehoord wordt. Het draait om gelijke kansen.

Wanneer we het hebben over “inclusief zijn” – bijvoorbeeld met je website – dan bedoelen we daar dus mee dat je rekening houd met zo veel mogelijk mensen. Los van herkomst, cultuur, fysieke of mentale staat. 

Wat is digi toegankelijkheid?

Online kun je op verschillende manieren rekening houden met inclusiviteit. Zo kun je jouw website digi toegankelijk maken. Dat betekend, dat jouw website – die dus een digitale applicatie is – toegankelijk is voor zo veel mogelijk mensen.

Tegenwoordig zijn hier ook heel handige richtlijnen voor: De WCAG (Web Content Accessibility Guidelines). Deze worden ook gebruikt om te meten hoe toegankelijk digitale tools zijn. Overheden moeten bijvoorbeeld vaak aan de strengste WCAG richtlijnen voldoen, zodat hun websites en portalen digi toegankelijk zijn voor iedereen – voor alle burgers ongeacht herkomst, cultuur of beperking.

Voorbeelden van digi-toegankelijke websites & tools die jij hoogstwaarschijnlijk weleens gebruikt:

  • De app van je bank
  • De website van de overheid
  • Het inlog-portaal van je zorgverzekeraar

Waarom doet dit eraan toe?

“Allemaal mooi en aardig” hoor ik je nu denken, “maar wat moet ik hier nou mee?”. Nou, dat kan ik je vertellen:

Met de opkomst van het internet en de digitale systemen die we dagelijks gebruiken is er in het begin niet altijd rekening gehouden met digi toegankelijkheid. Dat heeft ervoor gezorgd dat bepaalde mensen buitengesloten werden van de tools maar dus ook van onze samenleving. 

Voorbeeld:

Een aantal jaar terug waren wij bij een Meet-up over digi toegankelijkheid. Er waren 3 sprekers die allemaal een beperking hadden. Eén van hen was bijvoorbeeld blind. Zij gebruikt een screen-reader, een apparaat dat haar – wanneer ze op een website komt – voorleest wat er allemaal staat. Toen zij op de website van haar gemeente door wilde geven dat zij was verhuisd, was die site zo onlogisch opgebouwd dat zij met haar screenreader helemaal niet begreep wat van haar gevraagd werd. Ze moest de volgende dag dus een fysieke afspraak maken op het kantoor om geholpen te worden.

Op het moment dat jij een dienst of product aanbiedt, dan spreek je een bepaalde doelgroep aan. Wij vinden dat jij binnen deze doelgroep zo inclusief mogelijk moet zijn om zo min mogelijk mensen buiten te sluiten. Op die manier draag je zelf een steentje bij aan een inclusievere samenleving 🙂

Inclusiviteit draait ook niet alleen maar om wie je WEL betrekt en met wie je WEL allemaal rekening houd. Het gaat ook om wie juist NIET gewaardeerd en betrokken wordt. Want bij dit tweede staan wij vaak niet heel erg stil. We denken vaak dat wanneer wij iemand niet met opzet buitensluiten, we dan inclusief zijn. Maar dit is dus helaas niet (altijd) het geval. Jij zal bijvoorbeeld niet met opzet blinden buitensluiten van je website. Maar als jij tegelijkertijd geen alt-teksten voor je afbeeldingen instelt, dan hebben blinden op jouw website dus gelijk een nadeel. En ben je dus toch niet zo inclusief als je misschien dacht.

Hoe kan je er zelf mee aan de slag?

De WCAG richtlijnen kunnen een complexe materie zijn. Er spelen ook diverse factoren een rol bij de digi toegankelijkheid van je website. Zo kan je bijvoorbeeld in je vormgeving al rekening ermee houden maar is het ook belangrijk hoe je website code-technisch in elkaar zit.

Deze tips gaan je in ieder geval helpen met een mooie basis voor een digi toegankelijke website:

Stel een ALT tekst voor je foto’s in

Deze “alternatieve tekst” wordt dus door screen-readers gebruikt om aan slechtziende mensen voor te lezen wat er op te foto te zien is. De ALT tekst kan je heel makkelijk in je WordPress Mediabibliotheek toevoegen en kost je heel weinig extra tijd:

  • Ga naar WordPress
  • Open je mediabibliotheek
  • Open een afbeelding
  • Vul het veld “Alternatieve tekst” in
Screenshot van de mediabibliotheek in WordPress met een markering voor het veld waar je alt-tekst toe kan voegen

Kies kleuren met een goed contrast

Kleur speelt een enorm belangrijke rol voor digi toegankelijkheid. Een goed contrast in je kleurenpalet is niet alleen maar cruciaal voor goed leesbare tekst, maar ook voor de lay-out van je pagina of specifieke elementen. Als jij bijvoorbeeld een complex tabel op een pagina toont en de lijnen daarvan zijn door een te laag contrast niet goed zichtbaar voor mensen, dan kan dit als gevolg hebben dat je content niet goed kan worden opgenomen door je gebruiker. Of als de kleur van je titels nét iets te licht is dan kan deze slecht worden gelezen door bezoekers waardoor het scannen van je website heel moeilijk gaat en mensen af kunnen haken.

Het contrast van je kleuren kan je heel makkelijk checken via tools als deze: 

www.contrast-ratio.com

Screenshot van contrast-ratio tool waarin je het contrast van 2 kleuren ziet.

Gebruik de juiste titel hiërarchie

Binnen je website maak je in je tekst-elementen gebruik van verschillende titels: De grootste en belangrijkste is de H1 titel waarna je de H2 gebruikt, dan de H3 enzovoort. Voor het scannen van je pagina en voor mensen die screen readers gebruiken is het heel belangrijk dat jij de hiërarchie van je titels goed gebruikt. Zorg ervoor dat je pagina altijd begint met één H1 titel. Daarna pas de H2 toe voor titels die belangrijk zijn en die gebruikers helpen om de pagina te scannen. Idealiter zou iemand puur aan de hand van je H2 titels moeten begrijpen waar je pagina over gaat. Voor iets minder belangrijke titels gebruik je de H3 en daarna de H4. Heel soms heb je een H5 nodig maar idealiter wil houd je de hiërarchie van je titels op 4 niveau’s (H1-H4).

Zorg ervoor dat de niveau’s een duidelijke vormgeving hebben, zodat bijvoorbeeld de H1 visueel ook opvallender is dan de H2. Dan kun je doen door de tekst groter te tonen, vetgedrukte letter te gebruiken of misschien een achtergrond kleur (met goed contrast, hehe) toe te voegen. 

Dus:

  • Gebruik per pagina één H1 titel
  • Pas de H2, H3, H4 toe aan de hand van hiërarchie
  • Denk dus na over welke titels belangrijker zijn dan andere
  • Gebruik een passende styling om het onderscheid te laten zien
Links: Hoe je titels NIET toe moet passen: Weinig onderscheid

Rechts: Hoe je titels WEL toe moet passen: Duidelijk onderscheid

Breek je content op in kleine stukjes

Als je duidelijke titel-styles hebt, dan kun je die heel mooi inzetten om je content op te breken in kleine stukjes. Dat is niet alleen maar visueel heel fijn maar helpt jouw doelgroep dus ook om je website te scannen. 

Dus:

  • Verdeel tekst in meerdere alinea’s
  • Zet je titel-styling in om per alinea aan te geven waar de alinea over gaat
  • Gebruik nooit te veel tekst en te veel alinea’s (mensen lezen op websites niet graag ;P)
Links: Hoe je NIET met tekst om moet gaan: één lange lap tekst

Rechts: Hoe je WEL met tekst om moet gaan: Gebruik maken van diverse alinea's met titels

Kies een leesbaar lettertype

Voor belangrijke dingen zoals je titels en teksten kan je het beste gaan voor een goed leesbaar lettertype. Jaaaa, dat is jammer als je net en heel mooi decoratief font hebt gespot maar trust us, voor je content is leesbaarheid enorm belangrijk. 

Dus:

  • Kies een leesbaar font (niet te veel decoratieve lijnen)
  • Gebruik een goede lettergrootte (niet kleiner dan 15pt – afhankelijk van je font)
  • Stel een goede lijn hoogte in (ca 1.5x de tekst grootte) 
  • Lijn teksten links uit (niet rechts, niet gecentreerd)

Tip: Kan je dat ene mooie decoratieve font niet los laten? Voor puur decoratieve elementen zoals een quote die ergens op de achtergrond staat, kun je nog wel gebruiken. 

Links: Lettertypes die je NIET moet gebruiken: Te decoratief, slecht leesbaar

Rechts: Lettertypes die je WEL moet gebruiken: Goed leesbaar, goede grootte en lijn hoogte

Conclusie

Zoals je ziet zijn er dus verschillende manieren hoe jij ervoor kan zorgen dat je website digitoegankelijker wordt. Je kan al met kleine stappen een groot verschil maken in het leven van iemand die zich anders misschien buitengesloten zou gaan voelen. En dat is toch wel een heel mooie gedachte, vind je niet? 🙂

Literatuur

Wil je meer ontdekken over digi toegankelijkheid? Check dan deze bronnen: