---
title: Ensure buttons have discernible text | Accessibility Rule
description: Buttons must have discernible text
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/button-name
  md: https://testingbot.com/support/accessibility/web/rules/button-name/index.md
---
# Ensure buttons have discernible text

Rule ID: button-nameUser Impact: criticalGuidelines: 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

    <!-- 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

    <!-- 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)