Buttons and links with no accessible name

The element's own text content, for a `<button>Save</button>` or `<a href="/pricing">Pricing</a>`. This is the default and the best case: the name is visible and announced.

The `alt` attribute of an image inside the control. `<a href="/"><img src="logo.svg" alt="Acme home"></a>` is named by the alt text — and an empty `alt` on that image leaves the link with no name at all.

`aria-label`, which supplies a string for assistive technology only. Correct for an icon button where no visible text belongs.

`aria-labelledby`, which points at existing visible text elsewhere on the page.

A `<title>` element inside an inline `<svg>`, which names the graphic and therefore the control containing it.

What does not name a control: a `title` attribute alone, a CSS pseudo-element, a class name, or nearby text that is not associated in markup.

Icon-only buttons: a close cross, a hamburger menu, a search magnifier, a basket. Each is a glyph in a font or an SVG with no text, and each needs a name added explicitly.

Social media links, usually an icon per network. `aria-label="Acme on X"` names the destination; the icon alone names nothing.

The logo link. A very common case: an `<img>` with `alt=""` inside the home link, which is correct for a decorative image and wrong here because the image is the link's only content.

Card layouts where the whole card is a link and its content is an image plus a heading. If the image has empty alt and the heading is inside the same link, the name comes from the heading — which is usually right, and worth confirming.

Buttons whose text is injected after load. The name exists once scripts have run, and not in the document a crawler reads.

Give the control an `aria-label` describing the action, not the icon. `aria-label="Close dialog"`, never `aria-label="cross"`.

Mark the icon itself as decorative with `aria-hidden="true"` so it is not announced twice, once as an image and once as the label.

For inline SVG, `<svg role="img"><title>Close</title>…</svg>` names the graphic. Either mechanism works; using both on the same control produces a duplicated announcement.

Where the control has visible text beside the icon, the text is the name and the icon should be hidden. Adding an `aria-label` in that case overrides the visible text, which breaks voice-control users who say what they see.

That last point is the one that catches people: an `aria-label` that differs from the visible text means someone saying 'click Submit' does not activate a button labelled 'Send form' in markup.

The browser's accessibility pane shows the computed accessible name for the selected element. That is the authoritative answer, because it applies the same resolution order assistive technology does.

Tab through the page with a screen reader running and listen. A control announced as 'button' with nothing after it is the defect.

In the console, a rough sweep: `[...document.querySelectorAll('button,a')].filter(el => !el.textContent.trim() && !el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby'))`. It misses names coming from image alt text and SVG titles, so treat it as a first pass rather than an audit.

Check controls that appear only after interaction — modal close buttons, carousel arrows, expanded menus — which a static pass never opens.

Prefer visible text. An icon with a short label beside it is clearer for everyone, and it removes the whole class of problem.

Where the design requires icon-only, add `aria-label` with the action, and `aria-hidden="true"` on the glyph.

Give the logo link a name — the company name plus a word like 'home' — rather than leaving the image alt empty.

Never use a `title` attribute as the name. It is unreliable across assistive technology and invisible on touch devices.

Where an `aria-label` is used on a control that also has visible text, make the label start with the visible text so voice control still matches.

`accessibility.interactive_elements` examines the buttons and links on each crawled page, resolves the accessible name through the mechanisms above, and reports the controls that end up with none — with the element and the page it appears on.

`accessibility.aria_hidden` covers the adjacent failure of an interactive element hidden from assistive technology entirely, which produces a control a keyboard can reach and a screen reader cannot describe.

The check establishes whether a name exists. Whether it describes the action well is a review: a button named `Button 2` passes and tells the user nothing.