What Agent Interaction measures#
Weight: 25% of the AI Readiness Score
Agent Interaction answers the question: can visual AI agents navigate your site?
This sub-score addresses agents that take screenshots, click elements, and fill forms — tools like computer-use agents and browser-based AI assistants. These agents depend on semantic HTML and proper accessibility markup to identify what elements are, not just where they appear visually.
All four checks analyze the rendered DOM (JavaScript executed), not the bot-view HTML.
I1 — Semantic HTML Quality#
Checks whether the page uses HTML5 semantic elements that communicate structure to AI agents.
| Signal | What the scanner checks |
|---|---|
At least 3 of: <nav>, <main>, <header>, <footer>, <article>, <section> are present | The rendered DOM uses HTML5 semantic landmark elements for structure |
≥ 80% of clickable elements are <button> or <a> | Clickable elements use proper tags, not <div> or <span> with onclick |
All <input> elements are inside a <form>, or there are no inputs | Form inputs are wrapped in <form> elements for agent discoverability |
Page has both a <main> and at least one <nav> | Core landmark elements are present so agents can identify primary content and navigation |
What scores well vs. what doesn't:
<!-- Scores well: semantic landmarks -->
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
</main>
<footer>...</footer>
<!-- Scores poorly: div soup -->
<div class="navbar">...</div>
<div class="content">...</div>
<div class="sidebar">...</div>
The scanner also checks that clickable elements use <button> or <a> tags rather than <div> or <span> with click handlers:
<!-- Detected as a semantic issue -->
<div onclick="handleClick()">Submit</div>
<span role="button" tabindex="0">Cancel</span>
<!-- Recognized as proper interactive elements -->
<button>Submit</button>
<a href="/cancel">Cancel</a>
I2 — Accessibility#
Checks whether interactive elements have labels that AI agents (and screen readers) can use to identify them.
| Signal | What the scanner checks |
|---|---|
≥ 90% of <button> and <a> elements have visible text, aria-label, or aria-labelledby | Buttons and links are identifiable by text or ARIA attributes |
≥ 80% of form fields have an aria-label or associated <label for> | <input>, <select>, and <textarea> elements have programmatic labels |
| No unlabeled icon-only buttons | No <button> elements whose only child is <svg> or <img> without an aria-label |
No interactive elements with inline width or height style below 24px | Click targets are at least 24x24px so agents can reliably interact with them |
What scores well vs. what doesn't:
The scanner checks whether interactive elements have programmatic labels that AI agents (and screen readers) can identify.
Buttons and links — at least 90% need visible text, aria-label, or aria-labelledby:
<!-- Not identifiable — icon-only with no label -->
<button><svg><!-- close icon --></svg></button>
<!-- Identifiable — has aria-label -->
<button aria-label="Close dialog"><svg><!-- close icon --></svg></button>
Form fields — at least 80% need aria-label or an associated <label for>:
<!-- Not identifiable — no label -->
<input type="email" placeholder="Email">
<!-- Identifiable — associated label -->
<label for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com">
<!-- Also identifiable — aria-label -->
<input type="email" aria-label="Email address" placeholder="you@example.com">
Click targets — no interactive elements with inline width or height styles below 24px.
Framework example:
In component libraries like shadcn/ui, buttons with only an icon need an explicit label:
// Scanner cannot identify the button's purpose
<Button variant="ghost" size="icon">
<X className="h-4 w-4" />
</Button>
// Scanner identifies the button via aria-label
<Button variant="ghost" size="icon" aria-label="Close">
<X className="h-4 w-4" />
</Button>
The same applies to any component library — if the rendered HTML produces an icon-only <button> without text or aria-label, this check flags it.
I3 — Navigation & Structure#
Checks whether the page has clear navigation that AI agents can traverse without special interaction patterns.
| Signal | What the scanner checks |
|---|---|
Skip-to-content link or <main id="..."> present | A skip link (<a href="#main-content">, #content, or #main) or a <main> with an id attribute exists |
| No hover-only content detected | No critical content is hidden behind CSS :hover only; awarded by default, deducted if hover patterns are found |
| Primary content is not behind infinite scroll | Fewer than 3 "load more", "show more", or IntersectionObserver patterns detected |
<nav> element(s) contain at least 3 internal links | Navigation has at least 3 <a> links starting with / or # |
What scores well vs. what doesn't:
The scanner checks for clear navigation that agents can traverse without hover interactions or infinite scrolling.
<!-- Scores well: skip link + main landmark + navigation with internal links -->
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
<a href="/pricing">Pricing</a>
<a href="/blog">Blog</a>
</nav>
<main id="main-content">
<!-- page content -->
</main>
The scanner also deducts points when critical content is hidden behind CSS :hover only, or when more than 3 "load more" / infinite scroll patterns are detected.
I4 — Visual-Semantic Consistency#
Checks whether visual elements match their semantic meaning — so an agent that "sees" and "reads" the page gets consistent information.
| Signal | What the scanner checks |
|---|---|
| No hidden text affecting layout | No elements with visibility: hidden, opacity: 0, or left: -9999px contain more than 50 characters of text |
Icon font elements have aria-label | Font Awesome, Material Icons, and similar icon elements have aria-label, or fewer than 3 unlabeled icons total |
≥ 70% of <img> elements with a src attribute have non-empty alt text | Images are described with alt text so agents get consistent visual and semantic information |
What the scanner checks for:
This check verifies that visual elements match their semantic meaning — so an agent that "sees" and "reads" the page gets consistent information.
Hidden text — the scanner flags elements with visibility: hidden, opacity: 0, or left: -9999px that contain more than 50 characters of text. This pattern creates a mismatch between what the page visually shows and what the DOM contains.
Image alt text — at least 70% of <img> elements with a src attribute should have non-empty alt text:
<!-- Consistent: visual and semantic match -->
<img src="/hero.png" alt="Dashboard showing AI readiness score of 87">
<!-- Inconsistent: agent sees an image but has no text description -->
<img src="/hero.png">
<img src="/hero.png" alt="">
<!-- Exception: decorative images should use empty alt -->
<img src="/divider.svg" alt="" role="presentation">
Icon fonts — Font Awesome, Material Icons, and similar icon elements should have aria-label, or fewer than 3 unlabeled icons total:
<!-- Inconsistent: icon with no semantic meaning -->
<i class="fa fa-star"></i>
<!-- Consistent: labeled icon -->
<i class="fa fa-star" aria-label="Featured"></i>
<!-- Also consistent: icon is supplementary, text is primary -->
<span><i class="fa fa-star" aria-hidden="true"></i> Featured</span>
Frequently Asked Questions
What does the Agent Interaction score measure?
Agent Interaction measures whether visual AI agents — ones that take screenshots and interact with the DOM, like computer-use agents and browser-based AI assistants — can navigate a site. These agents depend on semantic HTML and accessibility markup to identify what elements are, not just where they appear visually.
What are the four checks in the Agent Interaction score?
I1 Semantic HTML Quality checks for HTML5 landmark elements and proper interactive tags. I2 Accessibility checks that buttons, links, and form fields have labels AI agents can identify. I3 Navigation & Structure checks for skip links, avoidance of hover-only or infinite-scroll content, and a navigable menu. I4 Visual-Semantic Consistency checks that hidden text, icon fonts, and image alt text match what's visually shown.
Why does the scanner check the rendered DOM instead of the bot-view HTML for this score?
All four Agent Interaction checks analyze the rendered DOM, with JavaScript executed, rather than the bot-view HTML the other sub-scores use. That's because visual AI agents interact with a page the way a browser renders it — via screenshots and DOM structure — not via the raw, unrendered HTTP response.
What counts as an accessible interactive element for AI agents?
Buttons and links need visible text, an aria-label, or aria-labelledby. Form fields need an aria-label or an associated label element. Icon-only buttons need an aria-label since they have no visible text. Click targets should be at least 24x24px so agents can reliably interact with them.
