Buttons must have discernible text

Rule ID: button-name
Ruleset: axe-core 4.11
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

WCAG Success Criteria [WCAG 2.1 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.0 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.2 (A)]

  • 4.1.2: MUST: Name, Role, Value

Section 508 Guidelines

  • 1194.22: MUST: Web based intranet and Internet Information & Applications
  • 1194.22 (a): MUST: A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Trusted Tester Guidelines

  • 6.A: MUST: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 Guidelines

  • 9.4.1.2: MUST: Name, Role, Value

    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>
<div id="labeldiv">Button label</div>

<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.
      • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1").

    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="emptydiv"></div>

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

    Why it Matters

    Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.

    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

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Refer to the complete list of axe 4.11 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: