Skip to main content

Empty buttons

Icon-only buttons need visible text or `aria-label`.

See this on your site

Step-by-step fixes by platform

Programmatic guides combine the issue explanation with stack-specific notes and examples where we have them.

Causes

Designers remove visible text assuming icons are universal. SVG or `<img>` icons without alt contribute empty names.

Fixes

Add visually hidden text or `aria-label` that matches the action: “Close dialog”, “Submit order”.

Examples

  • Icon-only close button with no text and no aria-label.
  • SVG heart “favorite” without title or aria-label.

How to fix

Add visible text or aria-label that states the action: “Close dialog”, “Add to favorites”.

Ensure disabled state is communicated to assistive tech, not only styled gray.

Platform notes

React
Radix/shadcn primitives often expose label props—wire them in consistently.
Shopify
Quick-buy and cart icons in themes frequently ship unnamed.

Related: 4.1.2 Name, Role, Value.