Toegankelijkheid en SEO: één klus, twee beloningen

Een zoekmachinecrawler is functioneel een blinde gebruiker met een snelle verbinding: hij ziet het ontwerp niet, hij leest de structuur van het document. Daarom is bijna alles wat toegankelijkheid vraagt (semantiek, hiërarchie, tekstalternatieven, zinvolle linknamen) tegelijk een SEO-signaal. En sinds juni 2025 maakt de European Accessibility Act (EAA) toegankelijkheid een wettelijke eis voor de meeste digitale consumentendiensten in de EU: wat "mooi meegenomen" was, kan nu boetes opleveren.

Het overlappende deel: één fix, twee winnaars

• Kophiërarchie (h1 → h2 → h3, zonder sprongen, één h1) is de inhoudsopgave waarmee schermlezers navigeren, en de structuur waaruit crawlers en AI-engines secties halen en citeren.
• Semantische oriëntatiepunten (<nav>, <main>, <article>, <footer>) vertellen hulptechnologieën en parsers wat elke regio is. Een soep van <div>'s is voor parsers moeilijker te duiden en laat audits falen.
• Alt-tekst bedient schermlezers en afbeeldingenzoek met dezelfde tekenreeks.
• Linknamen: "klik hier" haalt WCAG niet (een link moet ook buiten de context begrijpelijk zijn) en verspilt anchorsignaal. Eén herformulering lost beide problemen op.
• lang-attributen, op <html> en op anderstalige fragmenten, sturen de uitspraak van schermlezers en de taaldetectie voor je hreflang.
• CLS is een toegankelijkheidsprobleem voordat het een metriek wordt: layoutsprongen treffen mensen met motorische en visuele beperkingen het hardst. Core Web Vitals verbeteren is toegankelijkheidswerk.

Toegankelijkheid is geen directe rankingfactor. Sommige onderdelen van de implementatie, zoals semantische structuur en beschrijvende tekst, helpen zoeksystemen wel om een pagina te interpreteren.

Next.js: dwing het af in je pipeline

// .eslintrc — jsx-a11y vangt ontbrekende alt-teksten, foute rollen en onbenoemde controls al in de PR
{
  "extends": ["next/core-web-vitals", "plugin:jsx-a11y/recommended"]
}

• next/image vereist alt al: ontwijk dat niet met een lege alt="" op betekenisvolle afbeeldingen.
• Zet <html lang={locale}> in de root-layout vanuit de routeparameter.
• Draai Lighthouse accessibility naast performance in CI: dezelfde tooling die je al hebt voor monitoring, alleen één poort erbij.
• Automatisering vangt ~30–40% van de WCAG-problemen; de hoofdroutes alleen met het toetsenbord doorlopen vangt het grootste deel van de rest. Kom je met Tab niet bij een element, dan komt een crawler er via links misschien ook niet.

EAA: de deadline die de discussie beëindigt

Sinds 28 juni 2025 dekt de EAA e-commerce, bankieren, vervoer, e-books en de meeste digitale consumentendiensten die in de EU worden verkocht (micro-ondernemingen met minder dan 10 medewerkers en 2 mln € omzet zijn vrijgesteld). Handhaving verloopt per land en op basis van klachten: een ontoegankelijke checkout is nu juridisch risico, geen backlog-item. De praktische lat is WCAG 2.1 AA (via EN 301 549), precies de norm waarop bovenstaande fixes mikken.

Checklist:

• Eén h1 per pagina; kopniveaus zonder sprongen; semantische landmarks aanwezig
• Elke betekenisvolle afbeelding heeft een echte alt; elke link is begrijpelijk buiten de context
• lang vanuit de locale gezet op <html> en op anderstalige fragmenten
• jsx-a11y in ESLint + Lighthouse a11y-poort in CI; hoofdroutes met het toetsenbord getest
• Toepasselijkheid van de EAA beoordeeld; consumentenroutes voldoen aan WCAG 2.1 AA