Skip to main content
All website issues
Ease of Use

Some buttons have no readable label

What this means for your business

Buttons on your page have no text label. Screen reader users hear "button" with no context about what it does — like a door with no sign.

How to fix it
Easy
15–30 minutes

  1. 1Find buttons with no accessible name — usually icon-only buttons (hamburger menus, close buttons, search icons) or <button> elements with only an SVG icon inside.
  2. 2Add an aria-label to describe what the button does: <button aria-label="Open navigation menu"><svg>...</svg></button>
  3. 3Or add visible text (which also helps sighted users): <button><svg aria-hidden="true">...</svg> Open menu</button>
  4. 4For submit buttons, make sure the button text describes the action: "Submit" is fine, but "Send message" or "Create account" is better.
  5. 5Never use an empty <button></button> — every button must have either visible text, an aria-label, or an aria-labelledby attribute.

On WordPress

Common culprits are hamburger menus in themes and social sharing icon buttons. Edit your theme's header template to add aria-label to the mobile menu toggle button.

On Shopify

Check theme.liquid and header.liquid for icon-only buttons. Add aria-label to the cart button, search button, and mobile menu toggle. Shopify's Dawn and other official themes now include these by default.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free