Agent Interaction

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 | |---| | At least 3 of: <nav>, <main>, <header>, <footer>, <article>, <section> are present | | ≥ 80% of clickable elements are <button> or <a> (not <div>/<span> with onclick) | | All <input> elements are inside a <form>, or there are no inputs | | Page has both a <main> and at least one <nav> |

To improve:

<!-- Avoid: div soup -->
<div class="navbar">...</div>
<div class="content">...</div>
<div class="sidebar">...</div>

<!-- Prefer: semantic landmarks -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Replace <div onclick="..."> and <span role="button"> with actual <button> elements.

I2 — Accessibility

Checks whether interactive elements have labels that AI agents (and screen readers) can use to identify them.

| Signal | |---| | ≥ 90% of <button> and <a> elements have visible text, aria-label, or aria-labelledby | | ≥ 80% of form fields (<input>, <select>, <textarea>) have an aria-label or associated <label for> | | No unlabeled icon-only buttons (buttons with no text content and no aria-label, containing only <svg> or <img>) | | No interactive elements with inline width or height style below 24px |

To improve — icon buttons:

<!-- Avoid: icon-only button with no label -->
<button><svg><!-- close icon --></svg></button>

<!-- Prefer: aria-label on icon buttons -->
<button aria-label="Close dialog"><svg><!-- close icon --></svg></button>

To improve — form labels:

<!-- Avoid: unlabeled input -->
<input type="email" placeholder="Email">

<!-- Prefer: associated label -->
<label for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com">

<!-- Or: aria-label on the input -->
<input type="email" aria-label="Email address" placeholder="you@example.com">

I3 — Navigation & Structure

Checks whether the page has clear navigation that AI agents can traverse without special interaction patterns.

| Signal | |---| | Skip-to-content link (<a href="#main-content">, <a href="#content">, or <a href="#main">) or <main id="..."> present | | No hover-only content detected (awarded by default; deducted only if hover patterns are found) | | Primary content is not behind infinite scroll (load more, show more, IntersectionObserver patterns appear fewer than 3 times) | | <nav> element(s) contain at least 3 internal links (starting with / or #) |

To improve:

<!-- Add a skip link at the top of the page -->
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>

<main id="main-content">
  <!-- page content -->
</main>

For navigation links:

<nav>
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
  <a href="/pricing">Pricing</a>
  <a href="/blog">Blog</a>
</nav>

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 | |---| | No hidden text affecting layout (no elements with visibility: hidden, opacity: 0, or left: -9999px that contain more than 50 characters of text) | | Icon font elements (Font Awesome, Material Icons, etc.) have aria-label, or fewer than 3 unlabeled icon elements total | | ≥ 70% of <img> elements with a src attribute have non-empty alt text |

To improve — image alt text:

<!-- Avoid: missing or empty alt -->
<img src="/hero.png">
<img src="/hero.png" alt="">

<!-- Prefer: descriptive alt text -->
<img src="/hero.png" alt="Dashboard showing AI readiness score of 87">

<!-- Exception: decorative images should use empty alt -->
<img src="/divider.svg" alt="" role="presentation">

To improve — icon fonts:

<!-- Avoid: icon with no context -->
<i class="fa fa-star"></i>

<!-- Prefer: labeled icon -->
<i class="fa fa-star" aria-label="Featured"></i>
<!-- Or: icon is supplementary, text is primary -->
<span><i class="fa fa-star" aria-hidden="true"></i> Featured</span>