Image button has non-empty accessible name
| Field | Value |
|---|---|
| Rule code | Imagebutton_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
Each image button element should have non-empty accessible names. An accessible name allows users to understand the purpose of the image button. The accessible name can be provided through the alt, aria-label, title attributes, or by using aria-labelledby to reference another element with a name.
How to fix
Ensure that all image buttons have an accessible name using one of the following methods:
<input type="image" src="/path/to/icon.png" alt="Search" />
<input type="image" src="/path/to/icon.png" aria-label="Search" />
<input type="image" src="/path/to/icon.png" title="Search" />
<input type="image" src="/path/to/icon.png" aria-labelledby="labelId" />
<div id="labelId">Search</div>
If an image button lacks an accessible name, it is likely to be skipped or misunderstood.