Make every control legible in the accessibility tree

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 divs without roles, unlabeled icon buttons, or controls hidden with aria-hidden that still respond to clicks.

Artifact

<!-- 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.