---
title: "Empty button (a11y/button-name)"
description: "A <button> with no content and no label is announced as just \"button\" (Lighthouse: buttons do not have an accessible name)."
url: http://localhost:4173/rules/a11y/button-name
updated: 2026-11-11
---

# Empty button

> `a11y/button-name` is a vetd rule. It flags: Empty button. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `a11y/button-name` |
| Severity | error |
| Group | Accessibility |
| Tags | accessibility, lighthouse |

## Why it matters

A <button> with no content and no label is announced as just "button" (Lighthouse: buttons do not have an accessible name).

## How to fix it

Give it text or an aria-label.

## Credit

Based on work by:

- [Deque](https://www.deque.com): The axe rule button-name requires buttons to have discernible text.
- [W3C Web Accessibility Initiative](https://www.w3.org/WAI/): WCAG 4.1.2 requires every control to expose a name.

## References

- [Buttons must have discernible text](https://dequeuniversity.com/rules/axe/4.10/button-name), Deque University
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), W3C
- [<button> HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button), MDN Web Docs

## See it

Demos in the vetd Lab:

- [Name every control](http://localhost:4173/lab/web-guidelines/accessible-names)

## Related rules

- [`ui/icon-button-label`](http://localhost:4173/rules/ui/icon-button-label.md)
- [`a11y/link-name`](http://localhost:4173/rules/a11y/link-name.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "a11y/button-name" }`. CLI: `npx vetd explain a11y/button-name`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`a11y/link-name`](http://localhost:4173/rules/a11y/link-name.md) · Next: [`a11y/form-label`](http://localhost:4173/rules/a11y/form-label.md)