This document provides information about the Acquia Web Governance accessibility check:
Do image buttons have alt text?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
What
Image buttons must have accessible names that clearly describe their 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.
Who
This check affects individuals with:
Visual impairments: Who 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.
How
This section provides information on how to review and fix the issue.
This document provides information about the Acquia Web Governance accessibility check:
Do image buttons have alt text?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
What
Image buttons must have accessible names that clearly describe their 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.
Who
This check affects individuals with:
Visual impairments: Who 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.
How
This section provides information on how to review and fix the issue.
Web Governance