free tool

can an ai agent find your buttons?

a label audit for the way machines see your ui. paste some html or run it on a live page, and get every unnamed, vague, duplicated or fake control, with the fix for each one. nothing leaves your browser.

paste a component, a page, or view-source

<main>
  <h1>Invoices</h1>
  <input type="search" placeholder="Search invoices">
  <label for="status">Status</label>
  <select id="status"><option>All</option><option>Overdue</option></select>

<table>
    <tr><td>#1041 Acme Co</td><td>$1,200</td><td><button>Edit</button> <button aria-label="delete"><svg viewBox="0 0 24 24"><path d="M5 7h14"/></svg></button></td></tr>
    <tr><td>#1042 Globex</td><td>$840</td><td><button>Edit</button> <button aria-label="delete"><svg viewBox="0 0 24 24"><path d="M5 7h14"/></svg></button></td></tr>
    <tr><td>#1043 Initech</td><td>$2,310</td><td><button>Edit</button> <button aria-label="delete"><svg viewBox="0 0 24 24"><path d="M5 7h14"/></svg></button></td></tr>
  </table>

<p>Payments are processed nightly. <a href="/docs/payments">Click here</a> to learn how.</p>
  <button aria-label="Create a new invoice for a customer">New invoice</button>
  <button aria-label="Export CSV file">Download</button>
  <span class="link" onclick="showMore()">More</span>
  <a href="/billing" data-testid="billing-link">Billing settings</a>
  <button id="save-draft" type="button">Save draft</button>
</main>

machines read names, not pixels

you see a magnifying glass and know it means search. a screen reader sees a button and asks the browser what it's called. if the answer is nothing, the user hears "button" and has to guess. the same thing now happens to ai agents. most of them work from the page's accessibility tree or its markup, and they pick controls the way a screen reader does, by role and name.

so the old accessibility advice has quietly become agent advice too. an icon button without a label, a div with a click handler, fourteen buttons all called "edit": each one is a control that anything without eyes has to guess at. the fixes haven't changed. they just matter to more of your users than they used to.

what the checker looks for

the most serious problem is a control with no accessible name at all (WCAG 4.1.2). close behind are clickable divs and spans, which have no role and often no keyboard support, so assistive tech and agents don't see them as controls. then come names that exist but don't help: "click here", "submit", "more", and icon buttons that rely on a title tooltip nobody can see.

it also catches a quieter one, label in name (WCAG 2.5.3). when a button says "download" but its aria-labelsays "export csv file", voice-control users and agents told to click "download" both miss it. on a live page it adds target size (WCAG 2.2, 2.5.8), including the spacing exception, and elements that look clickable because of a pointer cursor. finally, it notes controls without an id or data-testid. that isn't an accessibility failure, but it's why tests and tours end up on brittle selectors, which our selector checker is about.

what it can't tell you

it reads markup, so it can't see click handlers attached with addEventListenerunless the element also looks clickable on a live page. it computes names the way browsers mostly do, not with every edge case of the accessible name spec. and a good score doesn't mean a good experience. a control can be perfectly named and still be in a confusing place. treat it like a linter: fast, useful, and not the whole story.

why we care

heytappranswers a user's question by pointing at the real control on the page and talking them through it. like every assistant and agent, it depends on your ui being findable. unlabeled controls are invisible to all of them. this checker is the first thing we'd run on any product before writing a single guide.

questions

What is an accessible name?

The text a browser exposes for a control to assistive technology, and in practice to AI agents too. It comes from aria-labelledby, aria-label, a label element, the control's text content, alt text on an image inside it, or as a last resort the title attribute.

How do AI agents find buttons on a page?

Most browser agents read the page through the accessibility tree or the DOM and pick controls by role and name, sometimes combined with a screenshot. A button with no name, or twelve buttons all named "Edit", leaves the agent guessing, the same way it leaves a screen reader user guessing.

What does WCAG 2.5.3 Label in Name require?

When a control has a visible text label, its accessible name should contain that text, ideally at the start. If a button shows "Download" but its aria-label is "Export CSV file", a voice-control user who says "click download" gets nothing.

What is the WCAG 2.2 minimum target size?

Success criterion 2.5.8 (level AA) asks for targets of at least 24 by 24 CSS pixels, with exceptions, including when a 24 px circle centred on a smaller target doesn't overlap any other target or its circle, and for links inline in a sentence. The bookmarklet checks size and that spacing exception on a live page.

Is anything sent to a server?

No. Pasted HTML is parsed in your browser and never uploaded; share links carry the HTML inside the URL fragment, which browsers don't send to servers. The bookmarklet runs on the page you're looking at and reports back to you only.