Door 3 maart 2023 10 min
Olaf van de Westelaken WordPress developer

Als WordPress developer is Olaf iedere dag bezig met het realiseren van websites. Sinds oktober 2021 houdt hij zich binnen Vizien dagelijks bezig met het bouwen van een website aan de hand van een design. Daarnaast zorgt hij ervoor dat een website op alle schermen duidelijk te zien is en dat klanten de website eenvoudig kunnen beheren.

Na het drinken van een goede kop specialty coffee begint Olaf aan zijn werkzaamheden. Of het nu gaat om het bouwen van een nieuwe websitepagina of het oplossen van een foutje in een website die al live staat: Olaf gaat hier graag mee aan de slag. Deze variërende werkzaamheden zorgen er bij Olaf voor dat geen dag hetzelfde is. En dat vindt Olaf helemaal niet erg.

Jouw website toegankelijk maken voor alle gebruikers? Wij geven je 4 tips

Webtoegankelijkheid is belangrijk. Het zorgt er namelijk voor dat jouw website bruikbaar wordt voor iedereen, ook voor bezoekers die bijvoorbeeld dyslexie of (kleuren)blindheid hebben. Hoe je dit doet? Door bepaalde keuzes te maken in het design, maar ook door andere technieken toe te passen. In dit blog vertellen wij je graag meer over webtoegankelijkheid en hoe je dit toepast op jouw website.

Waarom is webtoegankelijkheid belangrijk?

Webtoegankelijkheid is belangrijk, omdat je er met een toegankelijke website voor zorgt dat iedereen jouw website kan bezoeken. Denk dan vooral aan mensen met slecht of geen zicht, kleurenblindheid, doofheid of gehoorverlies, cognitieve handicaps en lichamelijke handicaps. Wanneer jouw website niet is gebouwd met deze groep bezoekers in gedachten, is de kans groot dat zij problemen zullen ervaren tijdens het navigeren. In sommige gevallen is het zelfs mogelijk dat zij helemaal geen gebruik kunnen maken van jouw website.

Wanneer een groep bezoekers geen gebruik kan maken van jouw website omdat deze niet toegankelijk genoeg is, is dit niet alleen jammer. Het zorgt namelijk ook voor een minder groot bereik. Naast de hierboven genoemde doelgroep hebben ook senioren, mensen met dyslexie en mensen die Nederlands als tweede taal spreken baat bij een toegankelijke website.

Het effect van webtoegankelijkheid op jouw SEO

Naast dat een toegankelijke website essentieel is voor gebruikers met een beperking, kan het ook voordelen opleveren op het gebied van SEO. Sterker nog, deze twee disciplines versterken elkaar en hebben een gezamenlijk doel: het bieden van een goede gebruikerservaring.

Het vergroten van de webtoegankelijkheid kan leiden tot een groei in jouw organisch verkeer. Organisch verkeer is het verkeer dat via de zoekresultaten van een zoekmachine op jouw website terechtkomt. Het verbeteren van de toegankelijkheid van jouw website zorgt er namelijk voor dat niet alleen mensen, maar ook zoekmachines als Google eenvoudiger door jouw website kunnen navigeren. Zo scant Google de website, de navigatieknoppen en de hiërarchie. Een goede koppenstructuur zorgt ervoor dat gebruikers kunnen kiezen welk deel van de tekst ze willen lezen, maar ook dat Google begrijpt wat de hoofdonderwerpen van de tekst op jouw website zijn.

Daarnaast berekent Google de rankings van zoekresultatenpagina’s voortdurend. Websites worden geëvalueerd op basis van de bruikbaarheid en gebruikerservaring. Is jouw website goed toegankelijk en dus bruikbaar voor iedereen? Dan eindigt jouw website hoger in de zoekresultaten van Google en is deze eerder zichtbaar dan websites die minder toegankelijk zijn.

De richtlijnen voor webtoegankelijkheid

Om het mogelijk te maken dat iedereen zijn of haar website zo toegankelijk mogelijk kan maken, heeft World Wide Web Consortium (W3C) richtlijnen ontwikkeld voor de toegankelijkheid van webcontent. Deze richtlijnen staan beschreven in de Web Content Accessibility Guidelines (WCAG). De eerste versie hiervan werd in 2008 gepubliceerd. Tien jaar later, in 2018, is versie 2.1 uitgekomen. Deze versie is op dit moment de leidende variant.

De richtlijnen uit de WCAG zijn opgedeeld in drie verschillende niveaus, namelijk:

  • A (beginner)
  • AA (gemiddeld)
  • AAA (geavanceerd)

De richtlijnen uit niveau A vormen de basis voor webtoegankelijkheid en bevatten 30 criteria. Deze zijn over het algemeen redelijk eenvoudig te behalen. Voor niveau AA komen hier nog 20 criteria bij, waardoor webcontent dus in totaal aan 50 criteria moet voldoen. Deze zijn iets minder eenvoudig. Het laatste niveau, AAA, bestaat uit nog meer richtlijnen. In totaal kent dit niveau 73 richtlijnen. Dit niveau is best lastig te behalen en het merendeel van alle websites voldoen ook niet aan dit niveau.

Websites van overheidsinstanties zijn verplicht om te voldoen aan zowel niveau A als aan AA. Niveau AAA is niet verplicht.

Wanneer is mijn website of app toegankelijk?

Voldoet jouw website aan niveau A of AA van de WCAG? Dan kun je via Stichting Drempelvrij.nl in aanmerking komen voor een waarmerk. Een van de aangesloten inspectie-instellingen gaat jouw website inspecteren. Kom je door de inspectie heen en kun je aantonen dat je jouw website blijft ontwikkelen zodat jouw website blijft voldoen aan het gekozen niveau? Dan mag je het logo van Stichting drempelvrij.nl op jouw website plaatsen. Daarnaast kom je in het register van Waarmerkdragers te staan. Het waarmerklogo is drie jaar geldig.

Welke punten worden behandeld in de WCAG?

De richtlijnen van de WCAG zijn opgedeeld in vier hoofdcategorieën: waarneembaar, bedienbaar, begrijpelijk en robuust. Iedere categorie heeft een lijst met criteria waarbij per criterium wordt aangegeven om welk niveau het gaat: A, AA of AAA.

Voorbeelden van criteria voor niveau A zijn:

  • Criteria 1.2.3.: video’s met audio die vooraf zijn opgenomen, zijn voorzien van een tekstueel alternatief of van een audiodescriptie. Hierin wordt belangrijke visuele informatie toegelicht.
  • Criteria 2.1.1.: de website is toegankelijk voor gebruikers die alleen hun toetsenbord kunnen gebruiken.

Voorbeelden van criteria voor niveau AA zijn:

  • Criteria 1.2.4.: video’s met audio die vooraf zijn opgenomen, zijn voorzien van een audiodescriptie.
  • Criteria 2.4.7.: toetsenbordbegeleiding is zichtbaar en helder.
  • Criteria 1.4.3.: de contrastverhouding tussen de tekst en de achtergrond is minimaal 4,5;1.

Voorbeelden van criteria voor niveau AAA zijn:

  • Criteria 1.2.7.: video’s hebben een uitgebreide audiodescriptie. Gebruikers met een functiebeperking moeten dezelfde informatie ontvangen uit de video als andere gebruikers.
  • Criteria 2.1.3.: de website is volledig bruikbaar wanneer gebruikers alleen een toetsenbord gebruiken.
  • Criteria 1.4.6.: de contrastverhouding tussen de tekst en de achtergrond is minimaal 7:1.

De volledige lijst met richtlijnen voor toegankelijkheid van webcontent vind je op de website van de WCAG.

Jouw huidige website testen op webtoegankelijkheid? Zo doe je dat!

Ben je na het lezen van bovenstaande richtlijnen benieuwd of jouw website in aanmerking komt voor een waarmerk? Of wil je weten aan welke criteria jouw website voldoet? Dit kun je eenvoudig zelf testen. Er zijn namelijk verschillende manieren om de toegankelijkheid van jouw website te testen. De makkelijkste manier is om gebruik te maken van de browserextensie WAVE.

Om je een beeld te geven van hoe deze browserextensie werkt, hebben wij onze eigen homepage getest. WAVE heeft onze homepage gecontroleerd op verschillende punten die te maken hebben met toegankelijkheid. Deze punten zijn onderverdeeld in zes categorieën:

  • Fouten
  • Fouten in het contrast
  • Waarschuwingen
  • Eigenschappen of functies
  • Structurele elementen
  • Accessible Rich Internet Applications (ARIA): technische specificaties die beschrijven hoe je de toegankelijkheid van een webpagina kunt verbeteren

Deze zes categorieën zijn vervolgens opgesplitst in fouten, waarschuwingen en features. Per categorie staat uitgebreid beschreven welke verbeterpunten er zijn én hoe je deze oplost.

Een groot voordeel van WAVE is dat elk verbeterpunt op de pagina visueel wordt aangeduid door middel van een icoon. Door op een icoon te klikken, krijg je een beschrijving van het probleem te zien. Bovendien kan WAVE ook de exacte locatie van het probleem weergeven in je broncode, zodat je het direct kunt aanpassen.

Screenshot homepage van Vizien

Een screenshot van de homepage van Vizien, geëvalueerd door de WAVE-extensie.

In bovenstaande afbeelding zie je dat we de homepage van onze eigen website hebben geëvalueerd met behulp van de WAVE-extensie. Een verbeterpunt aan onze homepage is de oranje knop. Volgens WAVE is het contrast tussen de tekst en de achtergrond te laag. Links in beeld staat beschreven wat dit betekent en waarom het belangrijk is om dit aan te passen. Onderaan staat een preview van het stukje HTML-code waar de knop zich bevindt.

Houden populaire websites zich ook aan deze richtlijnen?

Nu we onze homepage onder de loep hebben genomen, is het ook leuk om te kijken naar populaire websites. Want hoe zit het eigenlijk met hun toegankelijkheid? Je verwacht natuurlijk dat websites met miljoenen, of zelfs miljarden, gebruikers hun zaakjes goed op orde hebben. Je raadt het al: in de praktijk blijkt dit toch niet altijd zo te zijn. Zo is een aanzienlijk percentage van populaire websites zoals Instagram, Telegram en Facebook niet toegankelijk, blijkt uit onderzoek van Tooltester. Met name het inlogscherm is vaak al een struikelpunt. Dit betekent dat bezoekers met een visuele beperking hierop al zouden kunnen vastlopen.

Webtoegankelijkheid van populaire websites

Enkele veel voorkomende fouten zijn onder andere:

  • Een (te) laag contrast tussen de tekstkleur en de achtergrondkleur, wat een negatieve invloed heeft op de leesbaarheid.
  • Een tekort aan alt-tags, waardoor mensen die een schermlezer gebruiken geen idee hebben wat voor afbeeldingen er op de pagina staan.
  • Missende aria-labels, waardoor navigeren met behulp van schermlezers lastiger of zelfs onmogelijk wordt.

Welke zaken kan ik zelf doorvoeren om toegankelijker te zijn?

Er zijn een hoop punten die je zelf kunt doorvoeren om jouw website toegankelijker te maken. Wij geven je graag een aantal tips die een positieve invloed hebben op de toegankelijkheid van jouw website.

Tip 1: voeg alt-tags toe aan afbeeldingen.
Een alt-tag wordt gebruikt om een afbeelding te beschrijven. Door een duidelijke beschrijving toe te voegen aan de alt-tag kan iedere lezer zien waar de afbeelding over gaat.

De alt-tag voeg je toe aan het afbeeldingselement in jouw HTML-code. Het ziet er zo uit:

Alt tags afbeeldingen

Tip 2: voeg labels toe aan formuliervelden.
Door labels toe te voegen aan formuliervelden, maak je duidelijk wat de doelen van de invoervelden zijn. Hierdoor worden formulieren makkelijker te begrijpen voor schermlezers.

Labels kun je dus het beste voor ieder veld in jouw formulier toevoegen. Het ziet er zo uit:

Labels formuliervelden

Tip 3: zorg voor voldoende contrast tussen de elementen.
Door te zorgen voor voldoende contrast tussen verschillende elementen, maak je teksten beter leesbaar.

Tip 4: geef hyperlinks een beschrijvende naam.
Gebruik geen ‘klik hier’ in jouw teksten, maar geef hyperlinks een beschrijvende naam. Is dit lastig of niet mogelijk? Zorg er dan voor dat je jouw hyperlink een label meegeeft met een beschrijving van de actie van de link.

De actie van de hyperlink is in dit geval eenvoudig uit de context op te halen.

Bij deze knop is het niet direct duidelijk wat er gedownload kan worden.

Label aan hyperlink in HTML

Door een ‘aria-label’ toe te voegen, beschrijf je wat de knop doet.

Testcase: onze eigen website

Om enkele verbeterpunten in de praktijk te brengen, hebben wij onze homepage nog een keer laten evalueren door de WAV E-extensie. We hebben dit keer drie verbeterpunten doorgevoerd die essentieel zijn voor bezoekers die gebruik maken van een screenreader.

Het eerste punt betreft de social media-iconen in de footer van de website. Deze iconen linken naar onze social media pagina’s. Omdat deze links geen tekst bevatten, hebben screenreaders geen idee om wat voor soort link het gaat. Dit kunnen we oplossen door een aria-label toe te voegen. Hierin plaatsen we een tekstuele beschrijving van het doel van de link.

Voor en na het toevoegen van een aria-label

Voor en na het toevoegen van een aria-label

Als tweede wijst de WAVE-extensie ons op een aantal partnerlogo’s in de footer die niet zijn voorzien van alt-tags. Dit is wederom nadelig, omdat screenreaders zonder alt-tags geen idee hebben om wat voor soort afbeeldingen het gaat. Door een unieke alt-tag toe te voegen aan ieder logo lossen wij dit probleem op.

Voor en na het toevoegen van een alt-tag

Voor en na het toevoegen van een alt-tag

Voor het laatste verbeterpunt moeten we de mobiele versie van de website bekijken. De knop rechtsboven die verantwoordelijk is voor het openen en sluiten van het menu bevat namelijk geen tekst. Dit is op zich niet vreemd: het is tenslotte een icoon. Maar omdat het om een navigatie-element gaat, is het belangrijk dat we deze knop een label meegeven. Zo weten screenreaders namelijk dat het om een navigatie-element gaat.

Voor en na het toevoegen van een label

Voor en na het toevoegen van een label

Meer weten over webtoegankelijkheid?

Wil je meer weten over webtoegankelijkheid, omdat je dit wil toepassen op jouw website? Of heb je hulp nodig bij het toegankelijk maken van jouw website? Neem gerust contact met ons op. Wij helpen je graag!


Wijntje?

Ben jij op zoek naar een zoekmachine marketingbureau dat wél waarmaakt wat ze zeggen? Dan ben jij onze klant. Zin om samen te werken? Wij maken graag kennis met jou en je bedrijf.

Neem contact op
Lois Hoos, Commercieel officemanager
Lois Hoos Commercieel officemanager
Geen bullshit, gewoon
goede search marketing?