Toegankelijke formulieren: wat UX-design en AI gemeen hebben

Formulieren zijn het stiefkind van elke website

Ik doe nu al meer dan twintig jaar website-audits. En als er één ding is dat consistent slecht is, over alle sectoren heen, dan zijn het formulieren.

Prachtige hero-sectie. Zorgvuldig opgebouwde blogposts. Net gestructureerde navigatie. En dan? Een contactformulier met drie unlabeled `` elementen en een knop die "Verzenden" heet.

Elke keer weer.

Het is alsof je een vogelhuisje bouwt met een perfect dak en muren, maar vergeet er een opening in te maken. Ziet er geweldig uit. Functioneert niet.

Dat is een probleem op drie niveaus tegelijk: voor gebruikers met een visuele beperking die een screen reader gebruiken, voor zoekmachines die pagina-structuur beoordelen, en voor AI-modellen die proberen te begrijpen wat je pagina vraagt en aanbiedt.

Het goede nieuws? Het oplossen is geen raketwetenschap. Het is discipline. En de juiste HTML-kennis.

De basis die nooit mag ontbreken

Een toegankelijk formulier is geen speciaal formulier. Het is gewoon een correct gebouwd formulier. Punt. Dit zijn de elementen die er altijd in moeten zitten:

• Elke ``, `` en `<select>` heeft een `<label>` die via het `for`-attribuut aan het veld is gekoppeld.</li><li>Gebruik `<fieldset>` en `<legend>` om gerelateerde velden te groeperen. Alle adresvelden bij elkaar. Radio-buttons bij elkaar.</li><li>Foutmeldingen zijn gekoppeld aan het specifieke veld via `aria-describedby`. Niet alleen visueel zichtbaar, ook programmatisch.</li><li>Verplichte velden zijn gemarkeerd met `required` en `aria-required="true"`. Niet alleen met een sterretje in de labeltekst.</li><li>De tab-volgorde volgt een logische leesvolgorde: boven naar beneden, links naar rechts.</li></ul><div class="blog-callout"><div class="blog-callout-header">PRAKTIJK</div><p>Bij een Kobalt-klant in de gezondheidszorg hadden negen van de tien formuliervelden geen gekoppeld label. Een screen reader kondigde alles aan als "bewerken, leeg." Volledig nutteloos voor iemand die blind is. Na correctie: alle velden gelabeld, Lighthouse Accessibility-score van 54 naar 91. In een middag.</p></div><h2 id="wat-ai-modellen-zien-als-ze-je-formulier-lezen">Wat AI-modellen zien als ze je formulier lezen</h2><p>Maar wacht. Waarom zouden AI-crawlers iets geven om je formulier? Goede vraag. Ik moest er zelf ook even over nadenken.</p><p>AI-crawlers lezen formulieren anders dan mensen. Maar ze lezen ze wel. En wat ze eruit halen:</p><ul><li>De `<label>` teksten geven context over wat het formulier vraagt. "Wat is je vraag?" is véél informatiever dan een unlabeled textarea.</li><li>De `<legend>` van een `<fieldset>` helpt de AI begrijpen dat velden bij elkaar horen. "Jouw contactgegevens" zegt meer dan drie losse velden.</li><li>De knop-tekst maakt verschil. "Vraag een gesprek aan" communiceert iets heel anders dan "Verzenden."</li><li>Het `action`-attribuut en de HTTP-method (GET vs POST) zijn technische signalen over hoe het formulier werkt.</li><li>Autocomplete-attributen zoals `autocomplete="email"` geven extra semantische context.</li></ul><p>Al deze signalen samen helpen AI-modellen om te begrijpen wat de pagina doet. Een goed contactformulier op een consultancypagina communiceert: "Hier kun je een gesprek aanvragen met een expert." Een slecht formulier communiceert: niks.</p><p>En dat verschil? Dat telt.</p><h2 id="concrete-verbeteringen-die-je-nu-kunt-doorvoeren">Concrete verbeteringen die je nu kunt doorvoeren</h2><p>Genoeg theorie. Hier is je checklist, geordend van makkelijk naar moeilijker:</p><ol><li>Controleer of elk inputveld een `<label>` heeft met een `for`-attribuut dat overeenkomt met het `id` van het veld. Dit is de allerbelangrijkste stap.</li><li>Vervang placeholder-tekst als enige aanduiding door een echte `<label>`. Placeholders verdwijnen zodra iemand typt. Dat is geen label, dat is een verdwijntruc.</li><li>Groepeer gerelateerde velden in een `<fieldset>` met een beschrijvende `<legend>`.</li><li>Schrijf betekenisvolle knop-teksten. "Verstuur aanvraag" of "Plan een gesprek" vertelt veel meer dan "Submit."</li><li>Voeg `autocomplete`-attributen toe aan velden die persoonlijke informatie vragen: naam, e-mail, telefoon, adres.</li><li>Test je formulier met een screen reader. VoiceOver op Mac, NVDA op Windows, of gebruik de Accessibility-tab in Chrome DevTools. Het duurt vijf minuten en het is een eye-opener.</li></ol><div class="blog-callout"><div class="blog-callout-header">TIP</div><p>Gebruik nooit `aria-label` als vervanging voor een zichtbare `<label>`. ARIA-labels zijn onzichtbaar en helpen screen reader-gebruikers, maar ze zijn slecht voor AI-leesbaarheid. Ze ontkoppelen de visuele en semantische context. Gebruik altijd een zichtbare label, aangevuld met ARIA waar nodig.</p></div><p>Wil je weten hoe je formulieren (en de rest van je site) scoren voor AI? Draai onze gratis AEO-scan op aeo-expert.nl, of neem contact op met Kobalt voor een volledige audit.</p><blockquote>Een toegankelijk formulier is geen formulier met extra code. Het is een formulier dat correct is gebouwd. Voor mensen én voor machines. Wie dat onderscheid maakt, bouwt gewoon een slecht formulier.</blockquote><h2 id="veelgestelde-vragen">Veelgestelde vragen</h2><div class="blog-faq" role="list"><div class="blog-faq-item" role="listitem"><h3 id="heeft-formulier-toegankelijkheid-directe-invloed-op-mijn-aeo-score">Heeft formulier-toegankelijkheid directe invloed op mijn AEO-score?</h3><p>Ja, via twee wegen. Ten eerste verbetert het je Lighthouse Accessibility-score, die correleert met AEO-score (zoals ik in een eerder artikel heb laten zien). Ten tweede geven goed gelabelde formulieren AI-modellen extra context over je pagina-structuur en intentie. Formulieren zijn vaak de meest interactieve elementen op een pagina. Als die goed zijn opgebouwd, signaleert dat kwaliteit over de hele linie.</p></div><div class="blog-faq-item" role="listitem"><h3 id="wat-is-het-verschil-tussen-aria-label-en-aria-labelledby">Wat is het verschil tussen aria-label en aria-labelledby?</h3><p>`aria-label` voegt een onzichtbare tekst-label toe die alleen door assistieve technologie wordt gelezen. `aria-labelledby` verwijst naar een bestaand element op de pagina dat als label fungeert. De voorkeur gaat naar `aria-labelledby`, omdat het zichtbare tekst hergebruikt en zo de visuele en semantische context verbindt. Gebruik `aria-label` alleen als er echt geen zichtbaar alternatief is.</p></div><div class="blog-faq-item" role="listitem"><h3 id="moet-elk-formulier-een-form-element-gebruiken">Moet elk formulier een form-element gebruiken?</h3><p>Ja. Altijd. Een `<form>` element geeft browsers, screen readers en AI-modellen een semantisch signaal dat dit een interactief invulformulier is. Inputvelden zonder `<form>` wrapper zijn technisch werkend te maken met JavaScript, maar het is een antipatroon dat alle downstream interpretatie verstoort. Van autocomplete tot screen readers tot AI-parsing. Gebruik gewoon een `<form>`. Het is 2026.</p></div></div> </div> <div class="mt-10 mb-10 p-6 border" style="border-color: var(--color-cyan); background: color-mix(in srgb, var(--color-cyan) 5%, transparent);"> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4"> <div class="flex-1"> <p class="font-sans font-bold mb-1" style="color: var(--color-text);">Hoe scoort jouw website op AI-gereedheid?</p> <p class="text-sm" style="color: var(--color-text-dim);">Krijg binnen 30 seconden je AEO-score en ontdek wat je kunt verbeteren.</p> </div> <a href="https://aeo-expert.nl/scan" class="btn-angled shrink-0" wire:navigate> <span>▸</span> Gratis scan </a> </div> </div> <!--[if BLOCK]><![endif]--> <div class="mt-12 pt-8 border-t" style="border-color: var(--color-border);"> <h3 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-4" style="color: var(--color-text-faint);">TAGS</h3> <div class="flex flex-wrap gap-2"> <!--[if BLOCK]><![endif]--> <a href="https://aeo-expert.nl/blog/tag/toegankelijkheid" class="font-mono text-[12px] px-3 py-1.5 transition-colors hover:text-[var(--color-cyan)] hover:border-[var(--color-cyan)]" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" wire:navigate > #toegankelijkheid </a> <a href="https://aeo-expert.nl/blog/tag/aria" class="font-mono text-[12px] px-3 py-1.5 transition-colors hover:text-[var(--color-cyan)] hover:border-[var(--color-cyan)]" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" wire:navigate > #aria </a> <a href="https://aeo-expert.nl/blog/tag/formulieren" class="font-mono text-[12px] px-3 py-1.5 transition-colors hover:text-[var(--color-cyan)] hover:border-[var(--color-cyan)]" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" wire:navigate > #formulieren </a> <a href="https://aeo-expert.nl/blog/tag/semantische-html" class="font-mono text-[12px] px-3 py-1.5 transition-colors hover:text-[var(--color-cyan)] hover:border-[var(--color-cyan)]" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" wire:navigate > #semantische-html </a> <a href="https://aeo-expert.nl/blog/tag/ux" class="font-mono text-[12px] px-3 py-1.5 transition-colors hover:text-[var(--color-cyan)] hover:border-[var(--color-cyan)]" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" wire:navigate > #ux </a> <!--[if ENDBLOCK]><![endif]--> </div> </div> <!--[if ENDBLOCK]><![endif]--> <div class="mt-10 pt-8 border-t" style="border-color: var(--color-border);"> <h3 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-4" style="color: var(--color-text-faint);">DEEL DIT ARTIKEL</h3> <div class="flex gap-3"> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Faeo-expert.nl%2Fblog%2Ftoegankelijke-formulieren-wat-ux-design-en-ai-gemeen-hebben" target="_blank" rel="noopener" class="btn-angled text-[10px]" > LINKEDIN </a> <a href="https://x.com/intent/tweet?url=https%3A%2F%2Faeo-expert.nl%2Fblog%2Ftoegankelijke-formulieren-wat-ux-design-en-ai-gemeen-hebben&text=Toegankelijke+formulieren%3A+wat+UX-design+en+AI+gemeen+hebben" target="_blank" rel="noopener" class="btn-angled text-[10px]" > X </a> <button type="button" class="font-mono text-[10px] font-bold uppercase tracking-wider px-4 py-2 cursor-pointer transition-colors" style="border: 1px solid var(--color-border); color: var(--color-text-dim);" x-data @click="navigator.clipboard.writeText('https://aeo-expert.nl/blog/toegankelijke-formulieren-wat-ux-design-en-ai-gemeen-hebben')" > KOPIEER LINK </button> </div> </div> <div class="mt-10 footer-cta p-8" style="background: var(--color-panel);"> <div class="kicker mb-4">NEWSLETTER</div> <h3 class="font-sans text-xl font-bold mb-2" style="color: var(--color-text);">Test je website</h3> <p class="mb-4" style="color: var(--color-text-dim);">Ontdek hoe AI-ready jouw website is met onze gratis scanner.</p> <a href="https://aeo-expert.nl/scan" class="btn-angled" wire:navigate> <span>▸</span> Start scan </a> </div> </div> <aside class="hidden xl:block w-[220px] shrink-0" x-data="blogToc"> <div class="blog-toc"> <div class="blog-toc-heading">ON THIS PAGE</div> <nav class="space-y-0" id="toc-nav"> <template x-for="item in items" :key="item.id"> <a :href="'#' + item.id" class="blog-toc-link" :class="{ 'blog-toc-link--active': activeId === item.id, 'blog-toc-link--h3': item.tag === 'H3' }" x-text="item.text" @click.prevent="document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })" ></a> </template> </nav> </div> </aside> </div> </article> <!--[if BLOCK]><![endif]--> <section class="mt-16 pt-10 border-t" style="border-color: var(--color-border);"> <h2 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-6" style="color: var(--color-text-faint);">GERELATEERDE ARTIKELEN</h2> <div class="grid grid-cols-1 sm:grid-cols-3 gap-6"> <!--[if BLOCK]><![endif]--> <div class="card-bevel group" style="--bevel: 14px;"> <article class="card-bevel-inner p-0 flex flex-col"> <a href="https://aeo-expert.nl/blog/waarom-ik-na-20-jaar-webontwikkeling-performance-nog-steeds-op-1-zet" wire:navigate> <!--[if BLOCK]><![endif]--> <div class="aspect-[4/3] overflow-hidden"> <img src="https://aeo-expert.nl/images/blog-dark/120-why-after-20-years-of-web-development-i-still-put-performanc.svg" alt="Waarom ik na 20 jaar webontwikkeling performance nog steeds op 1 zet" class="hidden dark:block h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if BLOCK]><![endif]--> <img src="https://aeo-expert.nl/images/blog-light/120-why-after-20-years-of-web-development-i-still-put-performanc.svg" alt="Waarom ik na 20 jaar webontwikkeling performance nog steeds op 1 zet" class="block dark:hidden h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> </a> <div class="p-5"> <div class="flex flex-wrap gap-1.5 mb-3"> <!--[if BLOCK]><![endif]--> <a href="https://aeo-expert.nl/blog/categorie/aeo-strategie" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">AEO STRATEGIE</span> </a> <a href="https://aeo-expert.nl/blog/categorie/technische-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNISCHE SEO</span> </a> <a href="https://aeo-expert.nl/blog/categorie/case-studies" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">CASE STUDIES</span> </a> <!--[if ENDBLOCK]><![endif]--> </div> <a href="https://aeo-expert.nl/blog/waarom-ik-na-20-jaar-webontwikkeling-performance-nog-steeds-op-1-zet" wire:navigate> <h2 class="font-sans text-lg font-semibold group-hover:text-[var(--color-cyan)] transition-colors line-clamp-2 mb-3" style="color: var(--color-text);"> Waarom ik na 20 jaar webontwikkeling performance nog steeds op 1 zet </h2> </a> <!--[if BLOCK]><![endif]--> <p class="text-sm line-clamp-2 mb-4" style="color: var(--color-text-dim);">Van 56k-modems tot AI-crawlers. De technologie verandert. De les niet. Na twintig jaar bouwen, optimaliseren, en ja, ook fouten maken, is mijn conclusie steeds dezelfde: begin bij de snelheid. De rest volgt.</p> <!--[if ENDBLOCK]><![endif]--> <div class="flex items-center gap-3 mt-auto"> <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <picture> <source srcset="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.webp" type="image/webp"> <img src="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.png" alt="Reinier Sierag" width="28" height="28" class="rounded-full object-cover shrink-0" loading="lazy" decoding="async"> </picture> <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> <span class="font-mono text-[0.6875rem]" style="color: var(--color-text-faint);"> 23 apr. 2026 </span> </div> </div> </article> </div> <div class="card-bevel group" style="--bevel: 14px;"> <article class="card-bevel-inner p-0 flex flex-col"> <a href="https://aeo-expert.nl/blog/http2-en-http3-snellere-protocollen-voor-ai-crawlers" wire:navigate> <!--[if BLOCK]><![endif]--> <div class="aspect-[4/3] overflow-hidden"> <img src="https://aeo-expert.nl/images/blog-dark/119-http-2-and-http-3-faster-protocols-for-ai-crawlers.svg" alt="HTTP/2 en HTTP/3: snellere protocollen voor AI-crawlers" class="hidden dark:block h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if BLOCK]><![endif]--> <img src="https://aeo-expert.nl/images/blog-light/119-http-2-and-http-3-faster-protocols-for-ai-crawlers.svg" alt="HTTP/2 en HTTP/3: snellere protocollen voor AI-crawlers" class="block dark:hidden h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> </a> <div class="p-5"> <div class="flex flex-wrap gap-1.5 mb-3"> <!--[if BLOCK]><![endif]--> <a href="https://aeo-expert.nl/blog/categorie/technische-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNISCHE SEO</span> </a> <a href="https://aeo-expert.nl/blog/categorie/protocol-standaarden" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">PROTOCOL & STANDAARDEN</span> </a> <!--[if ENDBLOCK]><![endif]--> </div> <a href="https://aeo-expert.nl/blog/http2-en-http3-snellere-protocollen-voor-ai-crawlers" wire:navigate> <h2 class="font-sans text-lg font-semibold group-hover:text-[var(--color-cyan)] transition-colors line-clamp-2 mb-3" style="color: var(--color-text);"> HTTP/2 en HTTP/3: snellere protocollen voor AI-crawlers </h2> </a> <!--[if BLOCK]><![endif]--> <p class="text-sm line-clamp-2 mb-4" style="color: var(--color-text-dim);">HTTP/1.1 is meer dan 25 jaar oud. En je server draait er waarschijnlijk nog op. Leer wat HTTP/2 en HTTP/3 concreet doen voor AI-crawlers, waarom multiplexing een gamechanger is, en hoe je het vandaag nog inschakelt.</p> <!--[if ENDBLOCK]><![endif]--> <div class="flex items-center gap-3 mt-auto"> <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <picture> <source srcset="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.webp" type="image/webp"> <img src="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.png" alt="Reinier Sierag" width="28" height="28" class="rounded-full object-cover shrink-0" loading="lazy" decoding="async"> </picture> <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> <span class="font-mono text-[0.6875rem]" style="color: var(--color-text-faint);"> 23 apr. 2026 </span> </div> </div> </article> </div> <div class="card-bevel group" style="--bevel: 14px;"> <article class="card-bevel-inner p-0 flex flex-col"> <a href="https://aeo-expert.nl/blog/semantische-html-de-taal-die-mens-machine-en-ai-begrijpen" wire:navigate> <!--[if BLOCK]><![endif]--> <div class="aspect-[4/3] overflow-hidden"> <img src="https://aeo-expert.nl/images/blog-dark/118-semantic-html-the-language-humans-machines-and-ai-understand.svg" alt="Semantische HTML: de taal die mens, machine en AI begrijpen" class="hidden dark:block h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if BLOCK]><![endif]--> <img src="https://aeo-expert.nl/images/blog-light/118-semantic-html-the-language-humans-machines-and-ai-understand.svg" alt="Semantische HTML: de taal die mens, machine en AI begrijpen" class="block dark:hidden h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" /> <!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> </a> <div class="p-5"> <div class="flex flex-wrap gap-1.5 mb-3"> <!--[if BLOCK]><![endif]--> <a href="https://aeo-expert.nl/blog/categorie/technische-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNISCHE SEO</span> </a> <a href="https://aeo-expert.nl/blog/categorie/ai-agents" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">AI & AGENTS</span> </a> <!--[if ENDBLOCK]><![endif]--> </div> <a href="https://aeo-expert.nl/blog/semantische-html-de-taal-die-mens-machine-en-ai-begrijpen" wire:navigate> <h2 class="font-sans text-lg font-semibold group-hover:text-[var(--color-cyan)] transition-colors line-clamp-2 mb-3" style="color: var(--color-text);"> Semantische HTML: de taal die mens, machine en AI begrijpen </h2> </a> <!--[if BLOCK]><![endif]--> <p class="text-sm line-clamp-2 mb-4" style="color: var(--color-text-dim);">Zeven lagen div-nesting voor een simpele alinea. Ik overdrijf niet. Semantische HTML is het verschil tussen een website die AI-modellen begrijpen en een ondoordringbare brij van div-elementen. En het kost je een middag om het te fixen.</p> <!--[if ENDBLOCK]><![endif]--> <div class="flex items-center gap-3 mt-auto"> <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--> <picture> <source srcset="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.webp" type="image/webp"> <img src="https://aeo-expert.nl/images/auteurs/reinier_sierag-112.png" alt="Reinier Sierag" width="28" height="28" class="rounded-full object-cover shrink-0" loading="lazy" decoding="async"> </picture> <!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> <span class="font-mono text-[0.6875rem]" style="color: var(--color-text-faint);"> 23 apr. 2026 </span> </div> </div> </article> </div> <!--[if ENDBLOCK]><![endif]--> </div> </section> <!--[if ENDBLOCK]><![endif]--></div> </div> </main> <footer class="relative z-10 border-t" style="border-color: var(--color-border); background: var(--color-bg-deep);"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20"> <div class="footer-cta p-10 sm:p-14 relative" style="background: var(--color-panel);"> <div class="footer-cta-overlay" aria-hidden="true"></div> <h2 class="font-display text-3xl sm:text-4xl lg:text-[56px] font-bold leading-tight tracking-tight mb-4 max-w-[760px] relative" style="color: var(--color-text);"> Klaar om te zien of je site klaar is voor AI-search? </h2> <p class="font-sans text-[17px] mb-9 relative" style="color: var(--color-text-dim);"> Eerste scan gratis. Geen creditcard. </p> <a href="https://aeo-expert.nl/scan" class="btn-angled btn-angled-lg relative" wire:navigate> <span>▸</span> Start je scan </a> </div> </div> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-9 border-b" style="border-color: var(--color-border);"> <div class="grid grid-cols-2 md:grid-cols-[1.6fr_1fr_1fr] gap-8 sm:gap-10"> <div class="col-span-2 md:col-span-1"> <div class="flex items-center gap-2 mb-4"> <svg width="28" height="28" viewBox="0 0 64 64" fill="none" aria-hidden="true" style="display: block;"> <defs> <linearGradient id="lr-69edecc62c3d3" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="var(--color-cyan)" stop-opacity="0"/> <stop offset="100%" stop-color="var(--color-cyan)" stop-opacity="0.75"/> </linearGradient> </defs> <circle cx="32" cy="32" r="29" stroke="var(--color-text)" stroke-width="2" fill="none"/> <circle cx="32" cy="32" r="19" stroke="var(--color-text)" stroke-width="1" opacity="0.4" fill="none"/> <circle cx="32" cy="32" r="9" stroke="var(--color-text)" stroke-width="1" opacity="0.4" fill="none"/> <line x1="3" y1="32" x2="61" y2="32" stroke="var(--color-text)" stroke-width="0.6" opacity="0.3"/> <line x1="32" y1="3" x2="32" y2="61" stroke="var(--color-text)" stroke-width="0.6" opacity="0.3"/> <circle cx="32" cy="32" r="3.2" fill="var(--color-magenta)"/> <line x1="32" y1="32" x2="26" y2="26" stroke="var(--color-cyan)" stroke-width="1"/> <circle cx="26" cy="26" r="1.6" fill="var(--color-cyan)"/> <line x1="32" y1="32" x2="38" y2="26" stroke="var(--color-cyan)" stroke-width="1"/> <circle cx="38" cy="26" r="1.6" fill="var(--color-cyan)"/> <line x1="32" y1="32" x2="26" y2="38" stroke="var(--color-cyan)" stroke-width="1"/> <circle cx="26" cy="38" r="1.6" fill="var(--color-cyan)"/> <line x1="32" y1="32" x2="38" y2="38" stroke="var(--color-cyan)" stroke-width="1"/> <circle cx="38" cy="38" r="1.6" fill="var(--color-cyan)"/> </svg> <span class="font-sans text-sm font-bold" style="color: var(--color-text);">AEO<span style="color: var(--color-text-faint);">/</span>EXPERT</span> </div> <p class="font-sans text-[13px] leading-relaxed max-w-xs" style="color: var(--color-text-dim);"> De citability-stack voor teams die serieus nemen dat AI de nieuwe zoekmachine is. </p> </div> <div> <h4 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-3.5" style="color: var(--color-text-faint);">Bedrijf</h4> <ul class="space-y-2.5"> <li><a href="https://aeo-expert.nl/over-ons" class="font-sans text-[13px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-dim); text-decoration: none;" wire:navigate>Over ons</a></li> <li><a href="https://aeo-expert.nl/vacatures" class="font-sans text-[13px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-dim); text-decoration: none;" wire:navigate>Werken bij</a></li> <li><span class="font-sans text-[13px]" style="color: var(--color-text-dim);">Contact</span></li> <li><span class="font-sans text-[13px]" style="color: var(--color-text-dim);">Pers</span></li> </ul> </div> <div> <h4 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-3.5" style="color: var(--color-text-faint);">Resources</h4> <ul class="space-y-2.5"> <li><a href="https://aeo-expert.nl/scan" class="font-sans text-[13px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-dim); text-decoration: none;" wire:navigate>Scan runner</a></li> <li><a href="https://aeo-expert.nl/blog" class="font-sans text-[13px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-dim); text-decoration: none;" wire:navigate>Blog</a></li> <li><span class="font-sans text-[13px]" style="color: var(--color-text-dim);">Documentatie</span></li> <li><span class="font-sans text-[13px]" style="color: var(--color-text-dim);">AEO Glossary</span></li> </ul> </div> </div> </div> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-3"> <span class="font-mono text-[11px]" style="color: var(--color-text-faint);"> © 2026 AEO/EXPERT · GEMAAKT IN AMSTERDAM </span> <div class="flex items-center gap-5"> <a href="https://aeo-expert.nl/privacy" class="font-mono text-[11px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-faint); text-decoration: none;" wire:navigate>Privacy</a> <a href="https://aeo-expert.nl/voorwaarden" class="font-mono text-[11px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-faint); text-decoration: none;" wire:navigate>Algemene voorwaarden</a> <a href="https://aeo-expert.nl/blog" class="font-mono text-[11px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-faint); text-decoration: none;" wire:navigate>Blog</a> </div> </div> </footer> <script src="https://aeo-expert.nl/flux/flux.min.js?id=27098d51" data-navigate-once></script> <script src="https://aeo-expert.nl/livewire-0e4841bf/livewire.min.js?id=6b3709b1" data-csrf="rgMuM1ap7AUumllKCk25DEEi1Q35TX963jL9wbbP" data-module-url="https://aeo-expert.nl/livewire-0e4841bf" data-update-uri="https://aeo-expert.nl/livewire-0e4841bf/update" data-navigate-once="true"></script> <script> if (navigator.modelContext) { const ctrl = new AbortController(); navigator.modelContext.registerTool({ name: 'scan_url', title: 'AEO Scanner', description: 'Scan a URL for AI-readiness. Returns AEO score (content layer) and Agent-Readiness score (protocol layer) with actionable fix advice.', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'The URL to scan for AI-readiness' } }, required: ['url'] }, annotations: { readOnlyHint: true }, execute: async (input) => { const scanUrl = 'https://aeo-expert.nl/scan' + '?url=' + encodeURIComponent(input.url); window.location.href = scanUrl; return { status: 'navigating', url: scanUrl }; } }, { signal: ctrl.signal }); } </script> </body> </html>