AI-test: Herkent AI een div die doet alsof het een knop is?

Een div die doet alsof het een knop is

Een <div> met een onclick. Ziet eruit als een knop. Doet iets als je klikt. Maar druk op Tab en er gebeurt niets. Enter? Ook niets.

Voor een toetsenbordgebruiker bestaat deze knop niet.

Dit is de nummer 1 toetsenbordfout die ik tegenkom bij audits (WCAG 2.1.1). En de makkelijkste om op te lossen: vervang de div door een <button>. Maar kan AI dit probleem ook vinden? En dan niet in een losstaand stukje code, maar op een echte, live website?

Test 2: Een live website testen

Kan AI een webpagina bezoeken en deze fout opsporen? Ja, maar niet uit zichzelf. AI heeft een browser nodig.

Met Playwright (een tool voor browserautomatisering) kan Claude Code een echte browser openen, een webpagina bezoeken, en de DOM (de boomstructuur van alle elementen op een pagina) inspecteren. Dat ziet er zo uit:

const { chromium } = require("playwright");

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto("https://voorbeeld-webshop.nl");

// Zoek alle elementen met onclick die geen button of link zijn
const problemen = await page.evaluate(() => {
  const elementen = document.querySelectorAll("[onclick]");
  return Array.from(elementen)
    .filter((el) => {
      const tag = el.tagName.toLowerCase();
      return (
        tag !== "button" &&
        tag !== "a" &&
        tag !== "input" &&
        el.getAttribute("role") !== "button"
      );
    })
    .map((el) => ({
      tag: el.tagName.toLowerCase(),
      tekst: el.textContent?.trim().substring(0, 80),
      onclick: el.getAttribute("onclick"),
    }));
});

Dit script vindt elke div, span of ander niet-interactief element met een onclick-attribuut. Geen broncode nodig. Het test de live pagina.

Waar gaat het mis?

Het grootste probleem: addEventListener. De meeste moderne websites gebruiken niet onclick="..." in de HTML. Ze koppelen click-events via JavaScript:

element.addEventListener("click", function () {
  addToCart(123);
});

Dit is onzichtbaar in de DOM. Er is geen onclick-attribuut om op te zoeken.

Je kunt wel zoeken naar signalen dat een element klikbaar bedoeld is:

• Heeft het cursor: pointer in de berekende stijl?
• Heeft het een class als “btn”, “button”, “clickable”?
• Is het een <div> of <span> met tabindex="0" maar zonder role="button"?

Maar dat zijn heuristieken – vuistregels die vaak kloppen, maar niet altijd. Je krijgt vals positieven (elementen die er klikbaar uitzien maar het niet zijn) en vals negatieven (klikbare elementen zonder visuele hints).

Andere beperkingen:

Wat heb je nodig?

Om deze test zelf uit te voeren heb je drie dingen nodig:

1. Node.js (versie 18 of hoger)
2. Playwright (npm install playwright)
3. Een Chromium-browser (npx playwright install chromium)

Geen broncode nodig, geen speciale toegang. Je test de website zoals een bezoeker die ziet.

De fix

<!-- Niet doen -->
<div class="btn-primary" onclick="addToCart(123)">In winkelwagen</div>

<!-- Wel doen -->
<button class="btn-primary" type="button" onclick="addToCart(123)">
  In winkelwagen
</button>

Een <button> is standaard focusbaar, activeerbaar met Enter en Spatie, en heeft de juiste rol voor schermlezers. Gratis. Zonder extra code.