What makes a button icon-only and inaccessible?

A button or link whose only meaningful content is an SVG or img element, with no text, no aria-label, no aria-labelledby, and no title. Screen readers have nothing to announce, so the control is read as 'button' or 'link' with no purpose.

Which WCAG criteria does this address?

It targets 1.1.1 Non-text Content (the icon needs a text alternative) and 4.1.2 Name, Role, Value (interactive controls must expose an accessible name). Both are Level A, the minimum conformance level.

Does an img with alt text count as labelled?

Yes. An img with non-empty alt text gives the button an accessible name, so it passes. An img with empty alt (alt="") is treated as decorative and does not provide a name, so the button is flagged.

How should I label an icon-only button?

Add aria-label describing the action ('Close dialog'), or include visually hidden text inside the button, or set a title attribute as a last resort. For SVGs, a child or role="img" with aria-label also works.

No. The markup is parsed with the browser's built-in DOMParser entirely on your device. Nothing is transmitted, so you can safely check internal or unreleased markup.

Icon-Only Button Accessible-Name Checker

The Icon-Only Button Accessible-Name Checker parses your HTML and flags every button or a whose only content is an icon — an svg or img — with no accessible name. These controls are a top cause of screen-reader failures: a close button that is just an X icon announces as “button” with no hint of what it does. The checker enforces WCAG 1.1.1 (Non-text Content) and 4.1.2 (Name, Role, Value), both Level A.

How it works

The tool parses your markup with the browser’s DOMParser and inspects each button and a element.

It computes whether the control has any accessible name from these sources, in priority order: aria-labelledby, aria-label, visible text content (a non-empty text node), an img child with non-empty alt, an svg child containing a <title>, or a title attribute.
It then checks whether the control’s only meaningful content is an icon (svg or img) with no text.
A control is flagged when it is icon-only and has none of the accessible-name sources above. Each flagged element is reported with its source snippet so you can find it in your codebase.

Tips and notes

The simplest fix is aria-label: <button aria-label="Close dialog">…</button>.
An <img> inside a button should carry descriptive alt text; an empty alt="" marks the image decorative and leaves the button nameless.
For inline SVGs, add a <title> child or role="img" with aria-label, and set aria-hidden="true" on the SVG only when separate visible text already names the button.
This catches missing names, not wrong ones — always confirm the label describes the action, not the icon (“Close”, not “X icon”).