button-name

Buttons must have discernible text

Who might be affected
SR
VC

Description

HTML <button> elements require an accessible name so that screen readers can accurately read and convey their meaning and purpose to the user. All of the above also applies to buttons that were defined with the role attribute (e.g. <div role="button">).

Quick Fixes

Give the <button> element an accessible name in one of the following techniques:
1<!-- Use a text node -->
2<button>Play</button>
3<button><span>Stop</span></button>
4
5<!-- Use "aria-label" -->
6<button aria-label="delete"></button>
7
8<!-- Use "aria-labelledby" -->
9<p id="remove-title">Remove Entry</p>
10<button aria-labelledby="remove-title"></button>

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields, etc.). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)

Recommended Reading