---
title: Ensure buttons have discernible text | Accessibility Rule
description: Buttons must have discernible text. Why the button-name rule fails (WCAG
  2.0, critical impact), how to fix it and how to catch it with TestingBot.
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/button-name
  md: https://testingbot.com/support/accessibility/web/rules/button-name.md
---

# Ensure buttons have discernible text

Rule ID: button-name User Impact: critical Guidelines: WCAG 2.0

Buttons should have clear and descriptive text to ensure they are accessible to all users, including those using assistive technologies.

## About This Rule

This rule checks that all buttons have discernible text that clearly describes their purpose, function, or action for screen reader users.

## Why It Matters

Screen reader users rely on button labels to understand their purpose. Without discernible text, users may be unable to interact with buttons effectively, leading to a poor user experience.

## How to Fix

Ensure that each `<button>` element or element with `role="button"` has one of the following:

- Inner text that is discernible to screen reader users.
- A non-empty `aria-label` attribute.
- An `aria-labelledby` attribute pointing to an element with discernible text.
- `role="presentation"` or `role="none"` (ARIA 1.1) and is not in the tab order (`tabindex="-1"`).

### Correct Examples

```html
<!-- Button with inner text -->
<button>Submit</button>

<!-- Button with aria-label -->
<button aria-label="Close"></button>

<!-- Button with aria-labelledby -->
<button aria-labelledby="saveLabel"></button>
<div id="saveLabel">Save</div>

<!-- Button with title attribute -->
<button title="Help"></button>
```

### Incorrect Examples

```html
<!-- Button without discernible text -->
<button></button>

<!-- Button with empty aria-label -->
<button aria-label=""></button>

<!-- Button with non-existent aria-labelledby reference -->
<button aria-labelledby="nonexistent"></button>

<!-- Button with aria-labelledby pointing to empty element -->
<button aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>
```

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [bypass](https://testingbot.com/support/accessibility/web/rules/bypass)
- [color-contrast](https://testingbot.com/support/accessibility/web/rules/color-contrast)
- [definition-list](https://testingbot.com/support/accessibility/web/rules/definition-list)
- [dlitem](https://testingbot.com/support/accessibility/web/rules/dlitem)
- [document-title](https://testingbot.com/support/accessibility/web/rules/document-title)