Button accessible name is missing
| Field | Value |
|---|---|
| Rule code | Button_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
A button was found to be missing an accessible name. Button text explains what the purpose of the button is. Without a name, it is unclear what action or interaction the button has. The button element can be accessibly named with a text-value or text-content. A button can also contain a nested image with appropriate text added in the image's alt attribute.
How to fix
Give each button a descriptive name. The name can be text, or a properly labelled image.
<button type="button">
Search
</button>
<button type="button">
<img src="search-icon.png" alt="Search">
</button>
If you use an image, make sure that your alt text is accurate and clear. Describe what the button is doing, not the appearance of the image.