---
title: "Icon-only button without a label (ui/icon-button-label)"
description: "Screen readers announce \"button\" with no name."
url: http://localhost:4173/rules/ui/icon-button-label
updated: 2026-11-11
---

# Icon-only button without a label

> `ui/icon-button-label` is a vetd rule. It flags: Icon-only button without a label. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/icon-button-label` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | accessibility |

## Why it matters

Screen readers announce "button" with no name.

## How to fix it

Add aria-label (or a sr-only span) describing the action.

## Credit

Based on work by:

- [W3C Web Accessibility Initiative](https://www.w3.org/WAI/): WCAG 4.1.2 requires every control to expose a name.
- [Vercel](https://vercel.com): The Web Interface Guidelines require aria-label on icon-only buttons.

## References

- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), W3C
- [ARIA: aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), MDN Web Docs
- [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines), Vercel (vercel-labs)

## See it

Demos in the vetd Lab:

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

## Related rules

- [`ui/click-on-non-interactive`](http://localhost:4173/rules/ui/click-on-non-interactive.md)
- [`next/img-alt`](http://localhost:4173/rules/next/img-alt.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/icon-button-label" }`. CLI: `npx vetd explain ui/icon-button-label`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/click-on-non-interactive`](http://localhost:4173/rules/ui/click-on-non-interactive.md) · Next: [`ui/outline-none`](http://localhost:4173/rules/ui/outline-none.md)