Accessible names for AI agents: buttons, links and form labels

Why it matters for AI agents

Browser agents don’t see your design; they read the accessibility tree, where every interactive element has a role and a name. Chrome’s Lighthouse added an accessibility for agents audit to its Agentic Browsing category for this reason. Anthropic’s browser tool returns elements in the form button "Search" (browser use tool), and OpenAI asks developers to follow WAI-ARIA practices with “descriptive roles, labels, and states” so its Atlas agent can operate pages (OpenAI FAQ).

A store header typically has five or six icon buttons: search, account, wishlist, cart, menu. Without names, an agent sees button "" five times and has to guess. The same applies to quantity steppers (+ / −), carousel arrows, close buttons on dialogs, and links wrapping a product image with no alt.

Form fields follow the same logic. Agents fill in search boxes, quantity inputs, newsletter forms and checkout fields by label. A field with no label is a field the agent can’t map to the user’s data.

What the scanner checks

The scanner inspects the server HTML of the homepage and the first sampled product page.

• Controls: every button, a[href] and [role="button"], excluding elements with hidden or aria-hidden="true". A control is named if it has aria-label, text from aria-labelledby, its own text content, alt on an image inside it (or an SVG <title>), or a title or value attribute.
• Fields: every input, select and textarea, except hidden, submit, button, reset and image inputs. A field is labelled by aria-label, aria-labelledby, title, placeholder, a <label for> pointing to its id, or a wrapping <label>.

The score weights controls at 70% and fields at 30%:

Result	Weighted named share
Pass	95% or more
Partial	80% to under 95%
Fail	under 80%
Inconclusive	no page loaded

Findings list up to three unnamed controls and three unlabelled fields, so you can find them in your templates.

How to fix it

Name icon-only buttons and links:

<button type="button" aria-label="Open cart (2 items)">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<a href="/account" aria-label="Account">
  <svg aria-hidden="true">…</svg>
</a>

Or include visually hidden text inside the button:

<button type="button">
  <svg aria-hidden="true">…</svg>
  <span class="visually-hidden">Search</span>
</button>

Label every field:

<label for="newsletter-email">Email address</label>
<input id="newsletter-email" type="email" name="email" autocomplete="email" />

Give product images inside links a meaningful alt, such as alt="Merino crew sock in navy", so the link takes its name from the image.

Then run Lighthouse’s Accessibility and Agentic Browsing audits and fix any “Buttons do not have an accessible name”, “Links do not have a discernible name” or “Form elements do not have associated labels” failures.

Common mistakes

• aria-hidden="true" on the SVG but no label on the button, which leaves the button completely nameless.
• Generic names like “Click here” or several links named “Shop now”. They pass this check but tell an agent little; WCAG’s link purpose criterion asks for descriptive text.
• Labels that don’t match the visible text. WCAG’s label in name criterion expects the accessible name to contain the visible label.

The single most important control to name is add-to-cart; see add-to-cart.

Sources

• Lighthouse: accessibility for agents
• W3C Accessible Name and Description Computation 1.2
• WCAG 2.2 SC 4.1.2 Name, Role, Value
• WCAG 2.2 SC 3.3.2 Labels or Instructions
• Anthropic: browser use tool
• OpenAI: Publishers and Developers FAQ