Accessible forms: what UX design and AI have in common

Forms are the stepchild of every website

I've been doing website audits for over twenty years now. And if there's one thing that's consistently bad, across all sectors, it's forms.

Beautiful hero section. Carefully constructed blog posts. Neatly structured navigation. And then? A contact form with three unlabeled `` elements and a button called "Submit."

Every single time.

It's like building a birdhouse with a perfect roof and walls, but forgetting to put an opening in it. Looks great. Doesn't function.

That's a problem on three levels simultaneously: for users with visual impairments using a screen reader, for search engines assessing page structure, and for AI models trying to understand what your page asks and offers.

The good news? Fixing it isn't rocket science. It's discipline. And the right HTML knowledge.

The basics that must never be missing

An accessible form isn't a special form. It's simply a correctly built form. Period. These elements must always be present:

• Every ``, `` and `<select>` has a `<label>` linked to the field via the `for` attribute.</li><li>Use `<fieldset>` and `<legend>` to group related fields. All address fields together. Radio buttons together.</li><li>Error messages are linked to the specific field via `aria-describedby`. Not just visually visible, also programmatically.</li><li>Required fields are marked with `required` and `aria-required="true"`. Not just with an asterisk in the label text.</li><li>The tab order follows a logical reading order: top to bottom, left to right.</li></ul><div class="blog-callout"><div class="blog-callout-header">REAL WORLD</div><p>At a Kobalt client in healthcare, nine out of ten form fields had no associated label. A screen reader announced everything as "edit, blank." Completely useless for someone who is blind. After correction: all fields labeled, Lighthouse Accessibility score from 54 to 91. In an afternoon.</p></div><h2 id="what-ai-models-see-when-they-read-your-form">What AI models see when they read your form</h2><p>But wait. Why would AI crawlers care about your form? Good question. I had to think about it myself for a moment.</p><p>AI crawlers read forms differently from humans. But they do read them. And what they extract:</p><ul><li>The `<label>` texts provide context about what the form asks. "What is your question?" is far more informative than an unlabeled textarea.</li><li>The `<legend>` of a `<fieldset>` helps AI understand that fields belong together. "Your contact details" says more than three separate fields.</li><li>The button text makes a difference. "Request a consultation" communicates something entirely different from "Submit."</li><li>The `action` attribute and HTTP method (GET vs POST) are technical signals about how the form works.</li><li>Autocomplete attributes like `autocomplete="email"` provide additional semantic context.</li></ul><p>All these signals together help AI models understand what the page does. A well-built contact form on a consultancy page communicates: "Here you can request a conversation with an expert." A poorly built form communicates: nothing.</p><p>And that difference? It counts.</p><h2 id="concrete-improvements-you-can-implement-now">Concrete improvements you can implement now</h2><p>Enough theory. Here's your checklist, ordered from easy to harder:</p><ol><li>Check that every input field has a `<label>` with a `for` attribute that matches the `id` of the field. This is the single most important step.</li><li>Replace placeholder text as the only indication with a real `<label>`. Placeholders disappear as soon as someone types. That's not a label, that's a disappearing act.</li><li>Group related fields in a `<fieldset>` with a descriptive `<legend>`.</li><li>Write meaningful button texts. "Submit request" or "Schedule a call" tells much more than "Submit."</li><li>Add `autocomplete` attributes to fields asking for personal information: name, email, phone, address.</li><li>Test your form with a screen reader. VoiceOver on Mac, NVDA on Windows, or use the Accessibility tab in Chrome DevTools. It takes five minutes and it's an eye-opener.</li></ol><div class="blog-callout"><div class="blog-callout-header">TIP</div><p>Never use `aria-label` as a replacement for a visible `<label>`. ARIA labels are invisible and help screen reader users, but they're poor for AI readability. They decouple the visual and semantic context. Always use a visible label, supplemented with ARIA where needed.</p></div><p>Want to know how your forms (and the rest of your site) score for AI? Run our free AEO scan at aeo-expert.nl, or contact Kobalt for a full audit.</p><blockquote>An accessible form is not a form with extra code. It's a form that is correctly built. For people and for machines. Anyone who makes that distinction is simply building a bad form.</blockquote><h2 id="frequently-asked-questions">Frequently asked questions</h2><div class="blog-faq" role="list"><div class="blog-faq-item" role="listitem"><h3 id="does-form-accessibility-directly-affect-my-aeo-score">Does form accessibility directly affect my AEO score?</h3><p>Yes, via two routes. First, it improves your Lighthouse Accessibility score, which correlates with AEO score (as I showed in an earlier article). Second, well-labeled forms give AI models additional context about your page structure and intent. Forms are often the most interactive elements on a page. If those are well constructed, that signals quality across the board.</p></div><div class="blog-faq-item" role="listitem"><h3 id="what-is-the-difference-between-aria-label-and-aria-labelledby">What is the difference between aria-label and aria-labelledby?</h3><p>`aria-label` adds an invisible text label that is only read by assistive technology. `aria-labelledby` refers to an existing element on the page that serves as a label. The preference goes to `aria-labelledby`, because it reuses visible text and thus connects the visual and semantic context. Use `aria-label` only when there truly is no visible alternative.</p></div><div class="blog-faq-item" role="listitem"><h3 id="should-every-form-use-a-form-element">Should every form use a form element?</h3><p>Yes. Always. A `<form>` element gives browsers, screen readers and AI models a semantic signal that this is an interactive input form. Input fields without a `<form>` wrapper can be made technically functional with JavaScript, but it's an antipattern that disrupts all downstream interpretation. From autocomplete to screen readers to AI parsing. Just use a `<form>`. It's 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);">How does your website score on AI readiness?</p> <p class="text-sm" style="color: var(--color-text-dim);">Get your AEO score within 30 seconds and discover what you can improve.</p> </div> <a href="https://aeo-expert.nl/en/scan" class="btn-angled shrink-0" wire:navigate> <span>▸</span> Free 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/en/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/en/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/en/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/en/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/en/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);">SHARE THIS ARTICLE</h3> <div class="flex gap-3"> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Faeo-expert.nl%2Fen%2Fblog%2Faccessible-forms-what-ux-design-and-ai-have-in-common" 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%2Fen%2Fblog%2Faccessible-forms-what-ux-design-and-ai-have-in-common&text=Accessible+forms%3A+what+UX+design+and+AI+have+in+common" 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/en/blog/accessible-forms-what-ux-design-and-ai-have-in-common')" > COPY 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 your website</h3> <p class="mb-4" style="color: var(--color-text-dim);">Discover how AI-ready your website is with our free scanner.</p> <a href="https://aeo-expert.nl/en/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);">RELATED ARTICLES</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/en/blog/why-after-20-years-of-web-development-i-still-put-performance-first" 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="Why after 20 years of web development I still put performance first" 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="Why after 20 years of web development I still put performance first" 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/en/blog/categorie/aeo-strategy" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">AEO STRATEGY</span> </a> <a href="https://aeo-expert.nl/en/blog/categorie/technical-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNICAL SEO</span> </a> <a href="https://aeo-expert.nl/en/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/en/blog/why-after-20-years-of-web-development-i-still-put-performance-first" 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);"> Why after 20 years of web development I still put performance first </h2> </a> <!--[if BLOCK]><![endif]--> <p class="text-sm line-clamp-2 mb-4" style="color: var(--color-text-dim);">From 56k modems to AI crawlers. The technology changes. The lesson does not. After twenty years of building, optimizing, and yes, making mistakes too, my conclusion is always the same: start with speed. The rest follows.</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/en/blog/http2-and-http3-faster-protocols-for-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 and HTTP/3: faster protocols for 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 and HTTP/3: faster protocols for 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/en/blog/categorie/technical-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNICAL SEO</span> </a> <a href="https://aeo-expert.nl/en/blog/categorie/protocols-standards" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">PROTOCOLS & STANDARDS</span> </a> <!--[if ENDBLOCK]><![endif]--> </div> <a href="https://aeo-expert.nl/en/blog/http2-and-http3-faster-protocols-for-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 and HTTP/3: faster protocols for 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 over 25 years old. And your server is probably still running it. Learn what HTTP/2 and HTTP/3 concretely do for AI crawlers, why multiplexing is a game changer, and how to enable it today.</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/en/blog/semantic-html-the-language-humans-machines-and-ai-understand" 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="Semantic HTML: the language humans, machines and AI understand" 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="Semantic HTML: the language humans, machines and AI understand" 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/en/blog/categorie/technical-seo" wire:navigate> <span class="cat-badge" style="border: 1px solid var(--color-cyan); color: var(--color-cyan);">TECHNICAL SEO</span> </a> <a href="https://aeo-expert.nl/en/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/en/blog/semantic-html-the-language-humans-machines-and-ai-understand" 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);"> Semantic HTML: the language humans, machines and AI understand </h2> </a> <!--[if BLOCK]><![endif]--> <p class="text-sm line-clamp-2 mb-4" style="color: var(--color-text-dim);">Seven layers of div nesting for a simple paragraph. I am not exaggerating. Semantic HTML is the difference between a website AI models understand and an impenetrable mess of div elements. And it takes you an afternoon to fix.</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);"> Ready to see if your site is ready for AI search? </h2> <p class="font-sans text-[17px] mb-9 relative" style="color: var(--color-text-dim);"> First scan free. No credit card. </p> <a href="https://aeo-expert.nl/en/scan" class="btn-angled btn-angled-lg relative" wire:navigate> <span>▸</span> Start your 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-69edebc90c3e4" 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);"> The citability stack for teams that take AI being the new search engine seriously. </p> </div> <div> <h4 class="font-mono text-[10px] font-bold tracking-widest uppercase mb-3.5" style="color: var(--color-text-faint);">Company</h4> <ul class="space-y-2.5"> <li><a href="https://aeo-expert.nl/en/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>About</a></li> <li><a href="https://aeo-expert.nl/en/vacatures" class="font-sans text-[13px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-dim); text-decoration: none;" wire:navigate>Careers</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);">Press</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/en/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/en/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);">Documentation</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 · MADE IN AMSTERDAM </span> <div class="flex items-center gap-5"> <a href="https://aeo-expert.nl/en/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/en/voorwaarden" class="font-mono text-[11px] transition-colors hover:text-[var(--color-cyan)]" style="color: var(--color-text-faint); text-decoration: none;" wire:navigate>Terms</a> <a href="https://aeo-expert.nl/en/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="YAgfZcfk9967oh7P9hdqI33XcBvFj0bU2mUBAl6b" 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/en/scan' + '?url=' + encodeURIComponent(input.url); window.location.href = scanUrl; return { status: 'navigating', url: scanUrl }; } }, { signal: ctrl.signal }); } </script> </body> </html>