# AX-SYS-32: Make every control legible in the accessibility tree

> Context and comprehension · foundational · AX-SYS-32

Browser agents read your page through its accessibility tree, so give every interactive element a real name and role, never hide a working control from that tree, and keep the layout still while the page is in use.

## Why

An agent operating a website for a user does not see the page the way a person does. Browser tools for agents work from a structured view of the page, the accessibility tree: the same roles, names and states that screen readers use. Chrome's Lighthouse now has an agentic browsing audit that says so directly: agents rely on the accessibility tree as their primary data model. The checks it runs are the ones that decide whether an agent can act. Every interactive element needs a programmatic name, roles and parent-child relationships must be valid, and content must not be hidden from the tree while still being interactive. A `<div>` with a click handler and no role, or an icon button with no label, is invisible or anonymous to the agent. Microsoft's Playwright MCP server, a browser tool for agents, works the same way: it acts through the accessibility tree rather than pixel input, and describes its accessibility snapshot as better than a screenshot. Layout matters too. Lighthouse includes Cumulative Layout Shift because agents rely on element positioning, so a button that moves between reading the page and clicking it becomes a misclick. The work is ordinary accessibility, and it serves people using assistive technology and agents at once.

## Do

Use native controls or correct ARIA roles, give every control a visible or programmatic label, and reserve space so the layout does not shift.

## Don't

Build clickable `div`s without roles, unlabeled icon buttons, or controls hidden with `aria-hidden` that still respond to clicks.

## Artifact

```html
<!-- Anonymous to an agent: no role, no name -->
<div class="btn" onclick="checkout()"><svg>...</svg></div>

<!-- Legible: native control, accessible name, labeled field -->
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Place order</button>
<button type="button" aria-label="Remove item from cart"><svg aria-hidden="true">...</svg></button>
```

Check with Lighthouse's agentic browsing audit or by reading the page's accessibility tree in Chrome DevTools.

## Citations

1. [Chrome for Developers: Lighthouse agentic browsing](https://developer.chrome.com/docs/lighthouse/agentic-browsing): Agents rely on the accessibility tree as their primary data model. Lighthouse checks that every interactive element has a programmatic name, that roles and parent-child relationships are valid, and that content is not hidden from the accessibility tree while being interactive; Cumulative Layout Shift measures visual stability, which is critical for agents relying on element positioning
2. [Microsoft: Playwright MCP](https://github.com/microsoft/playwright-mcp): Uses Playwright's accessibility tree, not pixel-based input; its browser_snapshot tool captures an accessibility snapshot of the current page, described as better than a screenshot

---
Source: Agent Experience Principles (axprinciples.com)