SEO is voor veel partijen een belangrijk onderdeel van hun online activiteiten en krijgt vaak veel meer aandacht dan toegankelijkheid. Maar wat als een toegankelijke website je SEO effectiever maakt?
Google Web Vitals voor betere UX
Voordat we over gaan op de rol van toegankelijkheid op je ranking eerst een kleine introductie op wat er momenteel speelt op het gebied van SEO. Google rolt namelijk hun Web Vitals uit. De gebruikerservaringen (user experience, UX) van je bezoekers worden daarmee een belangrijkere factor voor zoekmachines om je positie in de resultaten te bepalen.
De belangrijkste factoren binnen de Web Vitals noemen ze de Core Web Vitals. Dit is een set factoren met impact op de gebruikerservaring van bezoekers. Deze factoren zijn:
- Largest Contentful Paint (LCP): Indicatie voor de (beleving van) laadsnelheid. Gekeken wordt naar de snelheid waarmee het grootste, in beeld zichtbare, element (afbeelding of tekst) geladen is.
- First Input Delay (FID): Hoe snel is de website klaar om interacties van de bezoeker te verwerken?
- Cumulative Layout Shift (CLS): Hoeveel 'veranderd' de layout van je pagina tijdens gebruik? Bijvoorbeeld door het laden van een afbeelding waardoor de link eronder verspringt.
Toegankelijkheid van je website is nu nog geen wegende factor in de Web Vitals, maar een goed toegankelijke website helpt indirect wel degelijk mee aan het verbeteren van je ranking! Met een grote impact op de UX, is het daarnaast niet ondenkbaar dat toegankelijkheid uiteindelijk wel mee gaat wegen. Er is namelijk veel overlap met het verbeteren van je SEO en UX.
Waar helpt toegankelijkheid nu al?
Ontwerp voor iedereen
Om de gebruikerservaring van je bezoekers te verbeteren is het belangrijk dat je vanaf het begin al bedenkt hoe zoveel mogelijk mensen er goed gebruik van kunnen maken. Je wilt niet alleen gevonden worden, maar ook dat je bezoeker zijn doel bereikt op je website.
Het is dus belangrijk dat je rekening houdt met je kleurgebruik (contrast), je lettertypes en tekstgrootte en hoe je pagina's onderling opgebouwd zijn. Maak gebruik van een sitemap om snel overzicht te bieden aan bezoekers. Een kruimelpad helpt weer om de opbouw van je website te verduidelijken, veel mensen komen namelijk niet via je homepage bij je terecht!
Gebruik goede semantische HTML om al deze relaties ook voor computers duidelijk te maken. Op die manier hebben gebruikers van hulpsoftware als screenreaders en zoekmachines er baat van!
Als je rekening houdt met verschillende bezoekers en beperkingen, maar je de website beter bruikbaar voor iedereen. Om hier een goede start mee te maken zijn de uitgangspunten van Inclusive Design en Universal Design zijn een goed plek om te starten. Er wordt daarmee gekeken hoe een product, in dit geval je website, zo ontworpen kan worden dat zoveel mogelijk mensen hem kunnen gebruiken.
Snelheid
Toegankelijkheid heeft ook te maken met de bruikbaarheid van je website. Snelheid is daarbij een sterke factor of iemand afhaakt of niet. Als ontwikkelaars vergeten we nogal eens dat niet iedereen een splinternieuwe laptop, high-end mobiele telefoon of snelle internetverbinding bezit. Zoals we aan het begin zagen is snelheid ook een zwaarwegend onderdeel van de Core Web Vitals.
Zorg ervoor dat je website dus ook onder sub-optimale omstandigheden goed werkt!
Goede code
Een van de allerbelangrijkste stappen die je kunt ondernemen waar zowel SEO als toegankelijkheid van afhankelijk zijn, is het schrijven van goede, semantische, code.
Zowel zoekmachines als screenreaders zijn ook maar computers die, hoe slim ook, het nog moeten doen met de input die erin gestopt wordt om te verwerken. Hoe beter die input, hoe beter het resultaat.
Semantische HTML wil zeggen dat de code betekenis heeft. Deze betekenis kan dan programmatisch bepaald worden. In plaats van elementen zonder betekenis te gebruiken zoals een <div>, maak je gebruik van correcte HTML5.
Hier is een voorbeeld van een website met code zonder betekenis:
<body>
<div id="header">
<img src="img" alt="logo" />
<a href="https://link">link</a>
<a href="https://link">link</a>
<p>Lorum Ipsum</p>
</div>
<div id="container">
<div class="section"></div>
<div class="section"></div>
</div>
<div id="footer">
<a href="mailto:a@b.nl">email</a>
<a href="https://link">link</a>
<p>Lorum Ipsum</p>
</div>
</body>Door het gebruik van de juiste element kan een screenreader, maar ook een zoekmachine, de betekenis en onderlinge relaties bepalen.
<body>
<header>
<img src="img" alt="logo" />
<nav>
<ul>
<li><a href="https://link">link</a></li>
<li><a href="https://link">link</a></li>
</ul>
</nav>
</header>
<main>
<h1>Page title</h1>
<p>Lorum Ipsum</p>
<h2>correct heading</h2>
<p>Lorum Ipsum</p>
</main>
<footer>
<nav>
<ul>
<li><a href="mailtoa@b.nl">email</a></li>
<li><a href="https://link">link</a></li>
</ul>
</nav>
</footer>
</body>Transcripties
als je podcasts of video's op je website hebt, zijn ondertiteling en transcripties een belangrijke toevoeging. Ze helpen om mensen die gehoorproblemen hebben of die op dat moment geen geluid aan kunnen zetten om toch de inhoud tot zich te nemen.
Een transcriptie is de volledig uitgeschreven versie van een video of audiobestand in losse tekst. Uiteraard wordt die tekst ook door zoekmachines bekeken en meegenomen, weer een win win situatie dus!
Let er bij het maken van transcripties op dat automatisch gegenereerde versies vaak nog onnauwkeurig zijn. Ze kunnen als een goed startpunt dienen, maar controleer ze altijd handmatig!
Alternatieve teksten
Een van de elementen die al wel een factor is bij SEO zijn alternatieve teksten voor afbeeldingen. Hiervoor is het alt="" attribuut beschikbaar voor afbeeldingen. Hiermee kan de inhoud en betekenis van een afbeelding overgedragen worden.
De belangrijkste reden om alternatieve teksten toe te voegen is voor mensen met een visuele beperking die een screenreader gebruiken. Richt je daarop bij het schrijven ervan. Zorg ervoor dat de afbeelding past bij je content en het helpt ook zoekmachines om extra informatie te krijgen.
Duidelijke linktekst
Duidelijke linkteksten helpen bezoekers rechtstreeks te navigeren naar de informatie die ze zoeken, zeker met hulpsoftware als een screenreader. Deze bezoekers horen links vaak zonder context. Bij stembediening kan een link uitgesproken worden om te activeren. Het geeft in beide gevallen problemen als er bijvoorbeeld meerdere links met dezelfde naam, maar verschillende doelen zijn.
Al deze informatie is uiteraard ook nuttig voor zoekmachines om de relevantie van je links te bepalen.
Toegankelijke documenten
Als je documenten zoals pdf's deelt op je website is het natuurlijk belangrijk om ervoor te zorgen dat deze toegankelijk zijn. Voor pdf's geldt namelijk hetzelfde als voor je website. Een goede pdf is namelijk opgebouwd uit codes zoals een website dat ook is. Hierdoor is de inhoud beschikbaar voor hulpsoftware en ook voor zoekmachines.
De toekomst
Het zou niet verrassend zijn dat toegankelijkheid in de toekomst als wegingsfactor wordt opgenomen door zoekmachines als Google. De vraag is eerder wanneer? De overlap met SEO is er en Lighthouse heeft al tests voor toegankelijkheid in de scans zitten.
Naast een planning is het ook nog de vraag welke eisen er dan meegenomen gaan worden. Want ook met een score van 100 in Lighthouse hoeft je website zeker nog niet toegankelijk voor iedereen te zijn. Twee derde van de toegankelijkheidsproblemen zijn namelijk niet automatisch te testen en vereisen handmatige controle en beoordeling.
We zullen nog moeten afwachten welke kant Google verder opgaat met hun Web Vitals, maar feit blijft dat een goed toegankelijke website nu al meehelpt aan je online zichtbaarheid!
Gerelateerde sites
Werken aan je toegankelijkheid?
Wees Google een stap voor! Maak je website toegankelijk voor iedereen en boost gelijk je SEO! Hulp nodig? Ik help je graag!