Buttons must have discernible text

Rule ID: button-name
Ruleset: axe-core 3.2
User Impact: Critical
WCAG: 4.1.2

What if your accessibility tools could do more?

Axe can catch a lot of accessibility issues, but what if accessibility tools could do more? Join our axe Pro beta program for a new tool that takes an exciting new approach to accessibility testing.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind

Requirement(s)

  • Section 508: MUST

WCAG Success Criteria

  • 4.1.2 Name, Role, Value

Section 508 Guidelines

  • 1194.22 (a) Text equivalent for non-text elements

How to Fix the Problem

Correct markup solutions

The button-name rule has five markup patterns that pass test criteria:

<button id="text">Name</button>

<button id="al" aria-label="Name"></button>

<button id="alb" aria-labelledby="labeldiv"></button>

<button id="combo" aria-label="Aria Name">Name</button>

<button id="buttonTitle" title="Title"></button>
  1. Ensure that each button element and elements with role="button" have one of the following characteristics:

    • Inner text that is discernible to screen reader users.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true".
    • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1").
  2. Ensure that <input type="button">s have one of the following characteristics:

    • Non-empty value attribute.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true".
  3. Ensure that <input type="submit">, <input type="reset"> have one of the following characteristics:

    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users (i.e. not display: none; or aria-hidden="true".
    • Non-empty or unspecified value attribute. Browsers will give reset and submit buttons a default value so long as the value attribute is not specified.

Incorrect markup solutions

The button-name rule has six markup patterns that fail testing criteria:

<button id="empty"></button>

<button id="val" value="Button Name"></button>

<button id="alempty" aria-label=""></button>

<button id="albmissing" aria-labelledby="nonexistent"></button>

<button id="albempty" aria-labelledby="emptydiv"></button>
<div id="labeldiv">Button label</div>
<div id="emptydiv"></div>

<button id="buttonvalue" value="foo" tabindex="-1"></button>

Why it Matters

Screen reader users are not able to discern the purpose of button that has no accessible name.

Screen reader users cannot understand the purpose of an image without a discernable and accessible textual name. A title for an image may provide only advisory information about the image itself. Unnamed actionable graphic images such as buttons have no clear description of the destination, purpose, function or action for the non-text content when it is intended to be used as a control.

Rule Description

Buttons must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.

The input-button-name rule separates functionality from the button-name rule to ensure that input buttons have discernible text; advise relevant to input button names was incorrect for button elements.

The Algorithm (in simple terms)

Checks all buttons to ensure that they have a discernable, accessible name.

Resources

Refer to the complete list of axe 3.2 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: