What Agent Interaction measures
Weight: 30% 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>