De impact van toegankelijkheid op SEO

Tegenwoordig is toegankelijkheid niet slechts een privilege, maar een fundamenteel recht. Wereldwijd heeft ongeveer 15% van de bevolking te maken met een vorm van een handicap. Als we ook oudere mensen meetellen, blijkt dat rond de 25% van de wereldbevolking baat heeft bij een toegankelijke website. Het negeren van dit aspect gaat ons alleen maar tegenwerken.

Met onze ervaring in het samenwerken met organisaties om hun websites toegankelijker te maken, willen we uitleggen hoe wij dit optimaliseren voor onze klanten. We richten ons op het begrijpen van de verschillende behoeften en uitdagingen van gebruikers, en implementeren praktische technieken en tools die elke site toegankelijker maken. (1)

Hoe beïnvloedt toegankelijkheid SEO?

De toegankelijkheid van een website is een cruciaal element dat aanzienlijke invloed heeft op SEO (meer dan je denkt):

1. Gebruikerservaring: toegankelijke websites zorgen voor een verbeterde gebruikerservaring, wat kan resulteren in een lager bouncepercentage en langere bezoekduur. Google en andere zoekmachines waarderen dit, en het kan bijdragen aan een betere ranking.
2. Mobiele responsiviteit: websites die goed presteren op mobiele apparaten worden door zoekmachines vaak hoger geplaatst. Aangezien mobiele toegankelijkheid een belangrijk aspect van algehele toegankelijkheid is, heeft dit een positieve impact op SEO.
3. Site snelheid: een toegankelijke website is doorgaans geoptimaliseerd voor snelheid. Snellere laadtijden verbeteren de gebruikerservaring, wat weer een gunstig effect kan hebben op de rankings.
4. Alt teksten voor afbeeldingen: het gebruik van alt-teksten helpt om afbeeldingen te beschrijven voor mensen die een schermlezer gebruiken. Dit is niet alleen nuttig voor de toegankelijkheid, maar helpt ook zoekmachines om de inhoud van de afbeelding te begrijpen.
5. Semantische HTML: goed gestructureerde HTML verhoogt niet alleen de toegankelijkheid maar ondersteunt ook zoekmachines in het beter begrijpen van de inhoud. Het juiste gebruik van koppen (H1, H2, etc.) en andere semantische elementen bevordert SEO.
6. Link toegankelijkheid: duidelijke en beschrijvende linkteksten maken de navigatie eenvoudiger voor gebruikers en bieden ook context voor zoekmachines.
7. Compliance en boetes: in sommige gebieden kunnen websites die niet voldoen aan toegankelijkheidsnormen geconfronteerd worden met boetes en sancties.
8. Duplicatie van content: toegankelijke websites vermijden vaak onnodige duplicatie van inhoud, zoals het hebben van aparte mobiele versies van pagina’s. Dit helpt om problemen met duplicate content te voorkomen, wat weer gunstig is voor SEO.

In het algemeen kan het verbeteren van de toegankelijkheid van een website leiden tot een betere gebruikerservaring, wat zich vertaalt in signalen die positief zijn voor zoekmachines (Chrome heeft niet voor niets een toegankelijkheidstest geïntegreerd). Een toegankelijke site kan meer verkeer aantrekken, gebruikers langer vasthouden en uiteindelijk bijdragen aan een hogere ranking in zoekresultaten. (2) (3)

De impact van toegankelijkheid op SEO in vogelvlucht

Geen tijd voor een lang artikel? Geen probleem. Bekijk onderstaande video voor een samenvatting van dit artikel.

Hoe toetst Lighthouse de toegankelijkheid?

Chrome DevTools biedt een toegankelijkheidsaudit via de Lighthouse-tool, die een pagina kan evalueren op verschillende toegankelijkheidsaspecten. Hier zijn enkele aspecten waarop Chrome DevTools kan toetsen:

1. Beeldbeschrijvingen: controleren of alle afbeeldingen de juiste alt-tekst bevatten die beschrijft wat er op de afbeelding staat.
2. Contrastverhouding: beoordelen of de tekst voldoende contrast heeft met de achtergrond, wat essentieel is voor de leesbaarheid.
3. Formulierelementen: nagaan of formuliervelden wordt voorzien van juiste labels en beschrijvingen, zodat gebruikers begrijpen welke informatie vereist is.
4. Toetsenbordnavigatie: controleren of de website toegankelijk is met een toetsenbord, zonder dat er een muis nodig is.
5. Documentstructuur: analyseren van de semantische HTML-structuur, inclusief het correcte gebruik van koppen, rollen en andere belangrijke HTML-elementen.
6. Aria-kenmerken: toetsen of ARIA (Accessible Rich Internet Applications) -kenmerken correct zijn geïmplementeerd om de toegankelijkheid voor schermlezers te verbeteren.
7. Zoom en schaalbaarheid: controleren of gebruikers de tekst kunnen zoomen en schalen tot 200% zonder verlies van functionaliteit of inhoud.
8. Taalattributen: nagaan of de juiste taal is gedefinieerd in de HTML, wat helpt bij het correct uitlezen van de content door schermlezers.
9. Tabelformattering: beoordelen of tabellen correct zijn geformatteerd met de juiste koppen en datacellen, zodat de informatie logisch wordt gepresenteerd.
10. Audio en video: toetsen op de aanwezigheid van ondertiteling, transcripties of andere alternatieven voor multimedia-inhoud.
11. Focusbeheer: evalueren of focusbare elementen een logische volgorde hebben en of er zichtbare focusindicatoren zijn.
12. Kleurenblindheid: sommige tools kunnen simuleren hoe een pagina eruitziet voor gebruikers met verschillende soorten kleurenblindheid, hoewel dit misschien niet direct in Chrome DevTools zit.
13. Timing en animaties: analyseren of de site tijdslimieten biedt en of bewegingen en animaties kunnen worden gepauzeerd of gestopt.
14. Verouderde of onjuiste HTML: controleren op de aanwezigheid van verouderde of onjuist gebruikte HTML-elementen die de toegankelijkheid kunnen beïnvloeden.

Lighthouse in Chrome DevTools biedt een gestandaardiseerde en uitgebreide manier om deze en andere toegankelijkheidsproblemen te identificeren, en biedt vaak ook suggesties en documentatie over hoe de problemen kunnen worden opgelost. Het is een waardevol instrument voor ontwikkelaars die de toegankelijkheid van hun websites willen verbeteren. (4)

Toegankelijkheid oplossen en de benodigde resources

Hieronder presenteren we een tabel met enkele belangrijke toegankelijkheidspunten, prioriteiten, mogelijke oplossingen en de benodigde resources. De prioriteiten kunnen variëren afhankelijk van de specifieke behoeften van een website en haar gebruikers, maar dit geeft een algemeen overzicht. (5)

Punt	Prioriteit	Oplossing	Resources
Beeldbeschrijvingen	Hoog	Voeg alt-teksten toe aan alle afbeeldingen die de inhoud beschrijven.	HTML/CSS-kennis, Schermlezer tools voor testen.
Contrastverhouding	Hoog	Pas kleuren aan om te voldoen aan de minimale contrastverhouding.	Kleurencontrast tools zoals WebAIM’s Contrast Checker.
Formulierelementen	Hoog	Label formuliervelden duidelijk en gebruik de juiste HTML-elementen.	HTML/CSS-kennis, toegankelijkheidstesttools zoals AXE.
Toetsenbordnavigatie	Hoog	Zorg ervoor dat alle interactieve elementen toegankelijk zijn via het toetsenbord.	Testen met toetsenbord, browser-ontwikkeltools.
Documentstructuur	Medium	Gebruik semantische HTML zoals correcte koppen en lijsten.	HTML/CSS-kennis, semantische testtools.
Aria-kenmerken	Medium	Gebruik ARIA-rollen en -attributen waar nodig en passend.	ARIA-specificatie, Schermlezer tools voor testen.
Zoom en schaalbaarheid	Medium	Zorg ervoor dat tekst en inhoud kunnen worden vergroot zonder verlies van functionaliteit.	Browser testen, mobiele emulator.
Taalattributen	Laag	Definieer de primaire taal van de pagina met behulp van het lang attribuut.	HTML-kennis.
Tabelformatting	Laag	Gebruik de juiste tabelelementen zoals <thead>, <th>, enz.	HTML/CSS-kennis.
Audio en video	Medium	Voorzie ondertiteling, transcripties of andere alternatieven voor multimedia-inhoud.	Video-editing software, transcriptietools.
Focusbeheer	Medium	Zorg voor een logische focusvolgorde en zichtbare focusindicatoren.	Toetsenbordtesten, browserontwikkeltools.
Kleurenblindheid	Laag	Test en ontwerp voor verschillende soorten kleurenblindheid.	Kleurenblindheid simulator tools.
Timing en animaties	Laag	Bied opties om bewegingen en animaties te pauzeren of te stoppen, en geef voldoende tijd voor tijdgebonden acties.	JavaScript/CSS-kennis, Animatie-controletests.
Verouderde/onjuiste HTML	Laag	Vervang of update verouderde of onjuist gebruikte HTML-elementen.	HTML/CSS-kennis, Validator tools zoals W3C Validator.

Het is essentieel om te benadrukken dat toegankelijkheid geen eenmalig project is, maar eerder een continu proces. Door regelmatig te testen en updates door te voeren en gebruikers met diverse behoeften te betrekken, kunnen we een website zo toegankelijk mogelijk maken.

Wat we vaak tegenkomen bij onze klanten, is dat dezelfde fouten steeds terugkeren. Dit geldt vooral voor elementen die vaak worden aangepast op een website:

• de structuur van de HTML;
• zaken rondom afbeeldingen;
• aanpassingen in de mobiele bruikbaarheid;
• de leesbaarheid van teksten;
• contrast (kleuren).

Dergelijke zaken worden helaas vaak over het hoofd gezien binnen een organisatie. Zeker tijdens “snelle” aanpassingen van de website kan dit verkeerd uitpakken.

Aan de slag met de toegankelijkheid van je website

Het verbeteren van de toegankelijkheid van een website kan complex zijn, maar dit kan worden gestructureerd met behulp van een framework. Hieronder delen we een algemeen framework dat kan helpen om de toegankelijkheid van een website te verbeteren: (6)

1. Begrip en bewustwording

Doel: zorg ervoor dat het hele team begrijpt wat toegankelijkheid inhoudt en waarom het belangrijk is.

• Training en onderwijs: bied training aan ontwikkelaars, ontwerpers en contentmakers over toegankelijkheidsstandaarden en -technieken.
• Onderzoek: onderzoek de specifieke behoeften en vereisten van je gebruikers, inclusief de wettelijke verplichtingen.

2. Planning

Doel: definieer duidelijke doelen en ontwikkel een plan om deze te bereiken.

• Beleid: ontwikkel een toegankelijkheidsbeleid, inclusief normen zoals WCAG.
• Prioriteiten en doelen: identificeer prioritaire gebieden en stel meetbare doelstellingen op.
• Tools en resources: selecteer de tools, technologieën en bronnen die we zullen gebruiken.

3. Ontwerp en ontwikkeling

Doel: Integreer toegankelijkheid in elk stadium van het ontwerp en de ontwikkeling.

• Toegankelijk ontwerp: maak gebruik van toegankelijke ontwerppatronen en kleurenschema’s.
• Semantische code: schrijf schone, semantische HTML en CSS.
• Toetsenbord en schermlezer vriendelijk: zorg voor volledige toetsenbordtoegankelijkheid en test met schermlezers.
• Responsiviteit: zorg ervoor dat de website goed functioneert op verschillende apparaten en schermformaten.

4. Testen

Doel: verifieer of de site voldoet aan de vastgestelde toegankelijkheidsnormen.

• Geautomatiseerde tests: gebruik tools zoals Lighthouse om te testen op veel voorkomende problemen.
• Handmatige tests: voer handmatige tests uit, zoals toetsenbordnavigatie en schermlezertests.
• Gebruikerstests: betrek echte gebruikers met verschillende behoeften in het testproces.

5. Implementatie en onderhoud

Doel: lanceren van de toegankelijke website en blijven onderhouden.

• Implementatie: ga live met de geteste en gevalideerde toegankelijke website.
• Continue monitoring en updates: houd de website regelmatig in de gaten en werk deze bij volgens de nieuwste normen en technologieën.
• Feedbackloop: stel een systeem in voor feedback van gebruikers om continue verbetering mogelijk te maken.

6. Documentatie en Training

Doel: documenteer alle processen en train het team zodat toegankelijkheid een integraal onderdeel van de organisatiecultuur wordt.

• Documenteer processen en richtlijnen: maak handleidingen en documentatie voor toekomstig gebruik.
• Opleiding en bewustwording: blijf teamleden trainen en bewust maken van het belang van toegankelijkheid.

Afsluitend

Dit framework dient als een leidraad voor het verbeteren van toegankelijkheid en kan worden aangepast aan de unieke behoeften en uitdagingen van elk project. Door toegankelijkheid een integraal onderdeel van het gehele proces te maken, kunnen wij zorgen voor een inclusieve gebruikerservaring voor iedereen.

Conclusie

Zoals we in dit artikel hebben besproken: De toegankelijkheid van een website heeft een aanzienlijke impact op zowel SEO als conversies. Het optimaliseren hiervan is cruciaal, want anders spreek je mogelijk een kwart van je bezoekers niet aan (en voor sommige sites zelfs nog meer).

Maak gebruik van de standaardtools van Lighthouse om dit grondig te analyseren. Een eenmalige optimalisatie leidt vaak niet tot de gewenste resultaten. We beschouwen het als een doorlopend proces (anders is de kans groot dat alles binnen een half jaar weer op hetzelfde niveau is). Veel succes!