Skip to Content
OpportunitiesTechnicalIssue ReferenceAccessibilityButtons without an accessible name

Buttons without an accessible name

What it is

One or more buttons on the page have no name, so assistive technology cannot say what they do. A button gets its name from its visible text, an aria-label, alt text on an image inside it, or a <title> inside its SVG icon; an image button (<input type="image">) gets it from its alt text. Icon-only buttons, such as menu, search and close buttons, are the usual cause: an icon font or an SVG without a title gives no name.

Why it matters

Screen readers announce such a button as just “button”, so people who rely on them cannot use it, and voice control cannot target it. AI agents that act on pages read the same labels: OpenAI asks sites  to label buttons with ARIA so its agent can use them. Unnamed buttons fail WCAG success criterion 4.1.2 (Level A), and since June 2025 the European Accessibility Act requires many businesses selling to consumers online in the EU to meet it.

How Asky checks it

In the page’s raw HTML, Asky checks every <button>, <input type="button"> and <input type="image">, not submit or reset inputs, which browsers name. A button is named by aria-label, resolved aria-labelledby, text, image alt or SVG <title> inside it, title, or an input value; an image button by alt, aria-label, aria-labelledby or title. Content marked aria-hidden or hidden is ignored. Skipped: role="none" or "presentation", and buttons inside aria-hidden="true", hidden, <noscript> or <template>, or inline display: none or visibility: hidden. One issue per page gives the count and up to 20 examples.

Reported as an error with high severity.

How to fix it

  1. Find the buttons listed in the issue. They are usually icon buttons for a menu, search, close or carousel arrow.
  2. Give each one visible text where the design allows it.
  3. Where a button shows only an icon, give it an aria-label describing the action (“Open menu”), not the picture (“hamburger”).
  4. Hide the decorative icon itself from screen readers with aria-hidden="true".
  5. In a site builder, look for an accessibility or ARIA label field in the button or icon settings.

Example

A menu button on https://example.com that contains only an icon:

<!-- Before: announced as "button" -->
<button class="menu-toggle"><svg>...</svg></button>
 
<!-- After: announced as "Open menu" -->
<button class="menu-toggle" aria-label="Open menu"><svg aria-hidden="true">...</svg></button>

← Back to Accessibility

Last updated on
OverviewEmbedded frames without a title