Accessible names for buttons (button-accessible-name)

Buttons must have non-empty accessible names, using visible text, aria-label, or aria-labelledby attributes.

Note: Hiding a <button> off-screen with CSS does not change the requirement for an accessible name. The value attribute is not used to compute the accessible name for <button> elements. Use aria-label, aria-labelledby, or visible text content.

Off-screen button missing name:

This <button> element has an empty ("") accessible name. Although it has a value attribute and is visually hidden, it still requires a valid accessible name.


Note: Possible to implement because it can be programmatically detected when a <button> is missing an accessible name, regardless of whether it is off-screen.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2