Buttons need accessible text

ZMD011

Every <button> must include visible text or an aria-label to provide its accessible name.

✅ Good

<button>Submit</button>
<button aria-label="Close modal"></button>

❌ Bad

<button></button>

When: A button has no text or aria-label

Warning: <button> missing accessible text

Solution: Provide visible text or an aria-label

Why it matters

Accessibility: Unlabeled buttons are announced as ‘button’ only, offering no context to screen-reader users.

SEO: Buttons aren’t indexed by search engines when they lack descriptive names.

In brief

  • Goal: Ensure each button has an accessible name via content or ARIA.
  • What to do: Add text or aria-label to every <button> element.
  • Why: Screen readers announce only ‘button’ when no name is provided.

Intent

Prevent buttons without names to guarantee assistive-tech users understand control purpose.

Benefits

  • Clear announcements for screen-reader users.
  • Improved keyboard focus and navigation.
  • Early detection of missing names via linters.

Techniques

  • G208: Accessible Name Computation for button content.
  • ARIA6: Using aria-label to provide labels for button elements.

HTML Semantics

The <button> element’s label is its accessible name; aria-label can override when no visible text exists.

References

Tips & edge cases

  • Use linters (eslint-plugin-jsx-a11y) to catch empty buttons automatically.
  • Prefer visible text over aria-label when possible for broader support.

See also