ARIA Roles for LLM Navigation: What Agents Read and Ignore

Screen readers and LLM agents consume the same underlying accessibility tree. That means the ARIA you write for assistive tech is exactly the vocabulary an autonomous agent uses to decide whether something is clickable, fillable, or already done.

Roles are the contract

A <div onClick={...}> carries no role. An agent sees an inert container and skips it, even though a human can click it. Wrapping the handler in a real <button> — or adding role="button" with keyboard support — makes the action discoverable.

<!-- before: invisible to the action model -->
<div onClick="openCart()">
  <span>Cart</span>
</div>

<!-- after: clickable, named, focusable -->
<button type="button" aria-label="Open cart">
  Cart
</button>

States that change behavior

Agents check state before acting. A collapsed accordion with aria-expanded="true" confuses the model; a disabled button with aria-disabled absent reads as available and fails on click. Mirror the real state in ARIA and the model’s plan matches reality.

Landmarks as a map

Landmarks compress the page into regions an agent can navigate in a bounded number of steps. A page whose navigation is “built from generic divs” looks like one undifferentiated block of content and forces the model to waste context finding anything.

The rule of thumb: if it behaves like a button, link, list, or dialog, say so in the markup. The agent will thank you by completing the task.