</>
ValidateHTML

Button With No Accessible Text

Like links, buttons are announced by their content. An icon-only button (a close cross, a hamburger, a magnifying glass) contains no text, so a screen reader announces "button" and stops. The user knows something is actionable but not what it does, which is worse than not having the control at all.

Find this error in your own code. Paste your HTML or enter a URL, free and instant.Open the checker
22.2%
of sites tested

How common is this error?

We ran this validator over the home page of the Tranco top 5,000 websites in August 2026. 589 of the 2,655 sites we could reach hit it. That makes it the 5th most common accessibility problem we found, across 3,791 occurrences. See the full study.

Most frequent wording: <button> must have accessible text

Why It Matters

Unlabelled buttons block the most critical interactions on a page: closing a modal, opening navigation, submitting a search. This fails WCAG 4.1.2 (Name, Role, Value) at Level A. Automated audits catch it reliably, so it also drags down Lighthouse accessibility scores.

Common Causes

  • Icon fonts or inline SVGs used as the only child of the button.
  • A character entity such as the hamburger glyph used as the label, which conveys no meaning when read aloud.
  • Text injected from CSS with content: in a pseudo-element rather than living in the markup.
  • A button whose label is set by JavaScript after mount, leaving it empty in the delivered HTML.

Code Examples

Inaccessible
<!-- Announced as just "button" -->
<button class="close"><svg class="icon-x"></svg></button>
<button class="menu">&#9776;</button>
<button><i class="fa fa-search"></i></button>
Accessible
<!-- Visually hidden label -->
<button class="close"><svg class="icon-x" aria-hidden="true"></svg><span class="sr-only">Close dialog</span></button>

<!-- aria-label where markup cannot hold text -->
<button class="menu" aria-label="Open navigation menu" aria-expanded="false">&#9776;</button>

<!-- Icon font: hide the glyph, label the control -->
<button aria-label="Search"><i class="fa fa-search" aria-hidden="true"></i></button>

How to Fix

  • 1Add visually hidden text inside the button, or an aria-label when no text node can exist.
  • 2Set aria-hidden="true" on the icon so it is not announced next to the label.
  • 3Name the action and its object: "Close dialog" rather than "Close", "Open navigation menu" rather than "Menu".
  • 4For a toggle, add aria-expanded so the state is announced along with the name, and keep the label stable as the state changes.
  • 5Beware of a button whose only text comes from a CSS ::before pseudo-element: that content is not reliably exposed to assistive technology.

Frequently Asked Questions

Does a title attribute count as an accessible name?
It is used as a last resort by most screen readers, but it is not reliable: it does not appear on touch devices, is inconsistently announced, and is invisible to keyboard users. Use visually hidden text or aria-label instead.
What is the difference between aria-label and aria-labelledby?
aria-label holds the string directly on the element. aria-labelledby points at the id of another element whose text becomes the name, which is useful when a visible heading already describes the control and you want the two to stay in sync.
My button has an SVG with a <title> element. Is that enough?
Sometimes, but support varies between browser and screen reader combinations. A visually hidden span inside the button is announced consistently everywhere, so it is the safer choice for anything important.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker

Related Accessibility Errors

Missing ARIA Labels on Interactive Elements

Without an aria-label, icon buttons and image links are invisible to screen readers. Learn when and how to use aria-label and aria-labelledby correctly.

Link With No Accessible Text

Icon-only links and empty anchors announce as "link" and nothing else. Learn the four ways to give a link accessible text without changing your design.

Missing Button Type Attribute

A missing button type attribute defaults to submit, causing accidental form submissions and data loss. Learn how to set the right button type every time.

View all accessibility errors