An image button has a name that describes its purpose
1.1.1 Non-Text Content
Introduction
This document provides information about the related accessibility check:
An image button has a name that describes its purpose.
What
An image button must have an accessible name that clearly describes its purpose.
Note
Image buttons are html input elements with the type attribute set to "image."
The accessible name is the name that assistive technologies, such as screen readers, convey to the user for the element.
Why
Users who cannot see the image on a button or icon rely on its accessible name to understand its purpose. The accessible name is conveyed through assistive technologies, such as screen readers, which may read the name aloud to users. Without clear labels like "Search" or "Add to Wishlist," users can become confused, make mistakes, or fail to complete tasks.
This check affects individuals with:
Visual impairments: These users rely on screen readers to understand the purpose of buttons and interactive elements.
User story
Fatima is a 33-year-old woman from Morocco who lost her sight at the age of 12 due to a degenerative eye condition. She works as a radio presenter for a local station in Casablanca, focusing on social and cultural issues.
"It really annoys me when I use music websites and the features meant to make things easier just make it harder for me. I was trying to organize my playlist, but the buttons just said 'Move' without telling me if I was moving the song up or down. These tools are supposed to help us customize and enjoy the platform, but when they do not work for me, it feels like I am being left out. It is such a small thing to fix, but it would save me so much time and frustration."
Examples
This section provides some examples of the issue.
Example: Non-descriptive accessible names for image buttons
On some image buttons, the accessible names describe the visual content of the image but fail to communicate the function:
Button
Accessible Name
Magnifying glass
"Magnification glass"
Floppy disk
"Floppy disk"
Pencil
"Pencil"
Envelope
"Envelope"
While these names reflect the images, they do not provide information about the actions the buttons perform, such as "Search," "Save," "Edit," or "Send." This can create barriers for website visitors who use assistive technologies.
Example: Descriptive accessible names for image buttons
On some image buttons, the accessible names are crafted to clearly describe their function. This ensures that visitors can easily understand the actions that the buttons perform.
Button
Accessible Name
Magnifying glass
"Search"
Floppy disk
"Save"
Pencil
"Edit"
Envelope
"Send"
These accessible names provide users, including those relying on assistive technologies, with meaningful descriptions of the button functions. This helps users interact and navigate effectively and improves the overall accessibility of the page.
An image button has a name that describes its purpose
1.1.1 Non-Text Content
Introduction
This document provides information about the related accessibility check:
An image button has a name that describes its purpose.
What
An image button must have an accessible name that clearly describes its purpose.
Note
Image buttons are html input elements with the type attribute set to "image."
The accessible name is the name that assistive technologies, such as screen readers, convey to the user for the element.
Why
Users who cannot see the image on a button or icon rely on its accessible name to understand its purpose. The accessible name is conveyed through assistive technologies, such as screen readers, which may read the name aloud to users. Without clear labels like "Search" or "Add to Wishlist," users can become confused, make mistakes, or fail to complete tasks.
This check affects individuals with:
Visual impairments: These users rely on screen readers to understand the purpose of buttons and interactive elements.
User story
Fatima is a 33-year-old woman from Morocco who lost her sight at the age of 12 due to a degenerative eye condition. She works as a radio presenter for a local station in Casablanca, focusing on social and cultural issues.
"It really annoys me when I use music websites and the features meant to make things easier just make it harder for me. I was trying to organize my playlist, but the buttons just said 'Move' without telling me if I was moving the song up or down. These tools are supposed to help us customize and enjoy the platform, but when they do not work for me, it feels like I am being left out. It is such a small thing to fix, but it would save me so much time and frustration."
Examples
This section provides some examples of the issue.
Example: Non-descriptive accessible names for image buttons
On some image buttons, the accessible names describe the visual content of the image but fail to communicate the function:
Button
Accessible Name
Magnifying glass
"Magnification glass"
Floppy disk
"Floppy disk"
Pencil
"Pencil"
Envelope
"Envelope"
While these names reflect the images, they do not provide information about the actions the buttons perform, such as "Search," "Save," "Edit," or "Send." This can create barriers for website visitors who use assistive technologies.
Example: Descriptive accessible names for image buttons
On some image buttons, the accessible names are crafted to clearly describe their function. This ensures that visitors can easily understand the actions that the buttons perform.
Button
Accessible Name
Magnifying glass
"Search"
Floppy disk
"Save"
Pencil
"Edit"
Envelope
"Send"
These accessible names provide users, including those relying on assistive technologies, with meaningful descriptions of the button functions. This helps users interact and navigate effectively and improves the overall accessibility of the page.
Web Governance