SiteLint documentation and guidelines

Missing alternative description that describes the image button’s function

Description

This accessibility issue occurs when an image button lacks an alternative description that clearly communicates its purpose or function to users who cannot see or interact with visual elements. Image buttons are graphical representations used instead of traditional text-based buttons, often containing icons or images that convey meaning.

The absence of alternative descriptions makes it difficult for assistive technologies like screen readers to convey the button’s purpose to users who rely on these tools. This oversight can lead to confusion and hinder navigation for individuals with various disabilities.

Disabilities impacted

Visual impairments: users with visual impairments, including those who are blind or have low vision, heavily rely on assistive technologies like screen readers. Without proper alternative descriptions, these users may encounter difficulties when trying to understand the purpose of an image button.
- Screen reader users won’t receive meaningful information about the button’s function.
- Users relying on braille displays won’t have access to descriptive text.
- Those using magnification software may struggle to understand the button’s purpose due to limited visual context.
Cognitive disabilities: individuals with cognitive disabilities often benefit from clear and consistent labeling of interactive elements.
- Users with learning disabilities may find it challenging to associate images with specific functions.
- Those with memory impairments might struggle to recall the purpose of unlabeled image buttons.
- Individuals with attention deficits may become frustrated when unable to quickly identify button purposes.
Motor impairments: while motor impairments don’t directly relate to the lack of alternative descriptions, they can indirectly impact the user experience.
- Users who rely on keyboard navigation may encounter difficulties when trying to understand the purpose of image buttons during sequential navigation.
- Those using mouth-operated devices or eye-tracking technology may face challenges in identifying the correct button to activate.

Why it matters

Providing proper alternative descriptions for image buttons is crucial for ensuring equal access to digital content. It matters for several reasons:

Enhances usability for users with disabilities.
Improves overall user experience for everyone.
Complies with accessibility standards and regulations (e.g., WCAG 2.2).
Supports SEO efforts by providing additional context for search engines.

Coding problems and solutions

Common coding problems

Missing alt attribute

Missing alt attribute example

<button type="button"><img src="search-icon.png"></button>

Missing alt description

<button type="button"><img src="search-icon.png" alt=""></button>

Alt text describing appearance instead of function

<button type="button"><img src="search-icon.png" alt="Blue magnifying glass icon"></button>

Using title attribute instead of alt

<button type="button"><img src="search-icon.png" title="Search"></button>

How to Fix It

To properly address this issue, follow these steps:

Add an appropriate alt attribute to the img element within the button:
Correct example
```
<button type="button"><img src="search-icon.png" alt="Search"></button>
```
Ensure the alt text describes the function, not just the appearance:
Correct example
```
<button type="button"><img src="save-icon.png" alt="Save changes"></button>
```

For complex images or icons, consider using aria-label on the button itself:

Correct example

<button type="button" aria-label="Open menu">
  <img src="menu-icon.png" alt="">
</button>