De invloed van toegankelijkheid op SEO

Vandaag de dag is toegankelijkheid niet alleen een gunst maar een recht. Wereldwijd heeft circa 15% van de bevolking een vorm van een handicap. Alles bij elkaar opgeteld (zoals bijvoorbeeld ook ouderen) profiteert ongeveer een kwart van de wereldbevolking van een toegankelijke website. Dit niet serieus nemen betekent jezelf in de voet schieten.

Met mijn ervaring in het werken met organisaties om hun websites toegankelijker te maken, wil ik je meenemen in hoe ik dit optimaliseer voor mijn opdrachtgevers. Van het begrijpen van de verschillende behoeften en uitdagingen van gebruikers tot het toepassen van praktische technieken en tools die elke site toegankelijker maken. (1)

Hoe beïnvloedt toegankelijkheid SEO?

De toegankelijkheid van een website is een belangrijk aspect dat een duidelijke invloed heeft op de SEO (meer dan je denkt):

1. Gebruikerservaring: toegankelijke websites bieden een betere gebruikerservaring, wat weer kan leiden tot een lager bouncepercentage en langere bezoekduur. Google en andere zoekmachines waarderen dit, en het kan helpen bij een hogere ranking.
2. Mobiele responsiviteit: websites die goed werken op mobiele apparaten worden door zoekmachines vaak hoger gerangschikt. Aangezien mobiele toegankelijkheid een belangrijk onderdeel is van algehele toegankelijkheid, speelt dit een rol in SEO.
3. Site snelheid: een toegankelijke website zal vaak geoptimaliseerd zijn voor snelheid. Snellere laadtijden dragen bij aan een betere gebruikerservaring, wat weer een positieve invloed 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 goed voor de toegankelijkheid maar helpt ook zoekmachines om de inhoud van de afbeelding te begrijpen.
5. Semantische HTML: goed gestructureerde HTML maakt een website niet alleen toegankelijker maar helpt zoekmachines ook om de inhoud beter te begrijpen. Het correct gebruik van koppen (H1, H2, etc.) en andere semantische elementen kan bijdragen aan 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 jurisdicties kunnen websites die niet voldoen aan toegankelijkheidsnormen onderworpen zijn aan 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 kan helpen 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 test voor toegankelijkheid erin verwerkt). Een toegankelijke site kan meer verkeer aantrekken, gebruikers langer vasthouden en uiteindelijk bijdragen aan een hogere ranking in zoekresultaten. (2) (3)

De invloed 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 beoordelen op verschillende toegankelijkheidsaspecten. Hier zijn enkele van de aspecten waarop Chrome DevTools kan toetsen:

1. Beeldbeschrijvingen: controleren of alle afbeeldingen een alt-tekst hebben die beschrijft wat er op de afbeelding staat.
2. Contrastverhouding: beoordelen of de tekst voldoende contrast heeft met de achtergrond, wat belangrijk is voor leesbaarheid.
3. Formulierelementen: nagaan of formuliervelden juiste labels en beschrijvingen hebben, zodat gebruikers begrijpen welke informatie vereist is.
4. Toetsenbordnavigatie: controleren of de website navigeerbaar is met een toetsenbord, zonder dat een muis nodig is.
5. Documentstructuur: analyseren van de semantische HTML-structuur, inclusief het juiste 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. Tabelformatting: 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-content.
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 vind je een tabel met een aantal belangrijke toegankelijkheidspunten, de prioriteit, 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 belangrijk op te merken dat toegankelijkheid geen eenmalig project is, maar een doorlopend proces. Regelmatig testen en bijwerken, en het betrekken van gebruikers met verschillende behoeften, kan helpen om een website zo toegankelijk mogelijk te maken.

Wat ik vaak zie bij opdrachtgevers is dat dezelfde fouten er steeds in blijven sluipen. Met name zaken rondom de onderdelen die vaak worden gewijzigd op een website:

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

Zulk soort dingen worden nogal eens over het hoofd gezien in een organisatie. Zeker tijdens “snelle” wijzigingen in de website kan dit fout gaan.

Aan de slag met de toegankelijkheid van je website

Het werken aan de toegankelijkheid van een website kan een complex proces zijn, maar het kan worden gestructureerd met behulp van een framework. Hier is een algemeen framework dat kan worden gebruikt om de toegankelijkheid van een website te verbeteren: (6)

1. Begrip en bewustwording

Doel: zorg ervoor dat het hele team begrijpt wat toegankelijkheid betekent 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 stel een plan op om die te bereiken.

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

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 voor een goede werking op verschillende apparaten en schermgroottes.

4. Testen

Doel: verifieer dat de site voldoet aan de gestelde 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: lanceer de toegankelijke website en blijf deze onderhouden.

• Implementatie: ga live met de geteste en gevalideerde toegankelijke website.
• Continue monitoring en updates: houd de website regelmatig in de gaten en update deze 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 om ervoor te zorgen dat 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 is een leidraad voor het werken aan toegankelijkheid en kan worden aangepast aan de unieke behoeften en uitdagingen van elk project. Door toegankelijkheid een integraal onderdeel van het hele proces te maken, kunnen organisaties zorgen voor een inclusieve gebruikerservaring voor iedereen.

Conclusie

Zoals in dit artikel besproken: De toegankelijkheid van een website speelt een enorme rol in zowel de SEO als de conversie hiervan. Dit niet optimaliseren betekent ook dat je een kwart van je bezoekers niet meer “aanspreekt” (voor sommige sites zelfs meer dan dat).

Gebruik de standaard tools van Lighthouse om dit grondig in kaart te brengen. Het eenmalig optimaliseren biedt vaak niet de gewenste uitkomst. Ik zie het voor ieder SEO-traject als een proces (omdat het anders een half jaar later weer op hetzelfde niveau is). Succes!