Buttons an AI agent can't identify

An AI agent that books, buys or fills in a form for someone finds what it can press in the page's accessibility tree, the same one a screen reader reads. Google says browser agents work by "analyzing visual renderings (like screenshots), inspecting the DOM structure, and interpreting the accessibility tree", and Chrome's checks for agents ask for "every interactive element" to have "a programmatic name". A button that holds only an icon has none: to the agent it is "button", and it can't tell the menu from the basket.

A button's name comes from the text inside it, the alt of an image inside it, an aria-label, or a title. The accessibility pack has the same check for the people who use screen readers; with both packs on you hear it once.

Sources: Google's guide to generative AI features in Search, Chrome: accessibility for agents, Chrome: agentic browsing scoring.

Name the button for what it does, not what it looks like:

<button type="button" aria-label="Open menu">
    <svg aria-hidden="true">…</svg>
</button>