JS, een dunne lijn tussen SEO en toegankelijk­heid

SEO van je JavaScript website testen

Online zijn verschillende artikelen als ook manieren om te testen of je website goed gecrawled kan worden door zoekmachine bots. Kijk bijvoorbeeld naar verschil in:

• HTML code voor en nadat JavaScript is uitgevoerd;
• Weergave, met JavaScript ingeschakeld en uitgeschakeld;
• Veranderde metatags bij navigeren (veranderen metatags en de title-tag correct mee?);
• Gevonden hyperlinks.

Gebruik van SEO tooling voor JavaScript crawlability

Een tooling die wij recent tegen kwamen, is "What Would JavaScript Do", te vinden op onely.com. Deze test bovengenoemde punten, en doet het vrij goed. Dusdanig, dat het dezelfde tekortkomingen heeft als een echte bot. Dat lichten we vandaag toe.

Toegankelijk­heid: frontend versus backend

Backend developers weten van oudsher: gebruik logische, semantische HTML. Dat betekent, gebruik voor kopteksten ook echt headings, in plaats van een span element, en gebruik voor hyperlinks anchor-elementen met een ingevulde href-attribuut. Backend developers houden zich veelal liever niet bezig met de styling, en hebben in de regel aangeleerd HTML semantisch aan te leveren voor een frontend developer.

Gevolg: Accessibility by default. HTML is in de basis toegankelijk.

Toegankelijk­heid breken

Met de vrijheid van het web, kan diezelfde toegankelijk­heid ook eenvoudig de das om worden gedaan. Bijvoorbeeld, binnen JavaScript kun je onachtzaam en eenvoudig alles klikbaar maken, zonder afhankelijkheid van een backend developer of een aangeleverde thema. Dat betekent dat je dus:

• een div of span element klikbaar kunt maken;
• een anchor klikbaar kunt maken zonder een href attribuut te declareren.

Dit is een probleem, omdat browsers enkel specifieke elementen focus laten ontvangen. Een element dat focus kan ontvangen, kan dus via screenreader- en toetsenbordgebruik eenvoudig bereikt worden. Denk aan anchors dan wel hyperlinks, buttons en invoervelden.

De toegankelijk­heid kan dus echter eenvoudig gebroken worden. En laat hier een parallel zijn tussen SEO, via crawlability.

Zoekmachines zijn blind

Zoekmachines worden slimmer, kunnen zelfs JavaScript renderen, maar wensen tegelijkertijd nog semantiek, oftewel, een toegankelijk­e website. De reden? Een zoekmachine bot zal niet elk element analyseren om event listeners te detecteren. Om het crawl-proces optimaal te houden, beperken bots en parsers zich tot elementen herkenbare hyperlinks met aanwezige href-attributen. Exact dus zoals ook benodigd voor toegankelijk­heid.

Test zelf de SEO kwaliteit van je JavaScript site

Je kunt JavaScript in de browser uitzetten om te testen, maar bots parsen gelukkig gewoonweg JavaScript. Houdt, wanneer je kritieke content ook client side rendered, rekening met de zogenaamde second wave of indexing. Zware JavaScript componenten worden in een wachtrij gezet, waarbij de benodigde JavaScript eerst nog gedownload en geparsed moet worden.

Toch in de basis eenvoudig zelf testen? Test dan je website op toetsenbord toegankelijk­heid om je website voor iedereen (mens en robot) meer inclusief te maken. Heb je een opsomming van producten, of een uitklapnavigatie? Ga na of je deze met enkel de tab-toets en enter-toets kunt bereiken en opvragen.

Wanneer je dit niet lukt, is het noodzaak dit direct te addresseren, om je toegankelijk­heid en technische SEO te verbeteren.

Je maakt dus vrienden met toegankelijk­heid

Indien van toepassing, voldoe je aan de wetgeving. Maar het profijt is dus breder:

• Mensen die wegens een visuele beperking aangewezen zijn op een screenreader, profiteren;
• Mensen die wegens een motorische beperking aangewezen zijn op het gebruik van een toetsenbord, profiteren;
• Beter indexeerbaar door zoekmachine bots;
• Je SEO afdeling wordt blijer als gevolg van verminderde SEO risico factoren;

Bijvoorbeeld, een zonder href-attribute kan geen (keyboard)focus ontvangen, maar wordt ook door bots niet gecrawled/geactiveerd, laat staan een hamburger menu gestyled via een span/div element.