1.1.1 Non-Text Content

Introduction¶

This document provides information about the related Acquia Optimize 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.

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.

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:

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. 

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 instructions on how to review the issue.

The Acquia Optimize platform identifies image buttons on your site that have an accessible name defined in the code.

Evaluate the accessible name to determine if it accurately describes the function of the button. 

Tip: Use the web browser developer tools to see the accessible name that is assigned to an image button.

In Chrome, follow these steps:

1. Right-click on the image button and select Inspect from the context menu. This opens the Developer Tools panel.
2. In the Developer Tools panel, go to the Accessibility tab (you may need to enable it under "More tools" if it is not visible).
3. In the Accessibility Tree, find the selected image button and check the Accessible Name property.
4. 
5. Determine if the accessible name is descriptive enough for a user to understand the function of the button based on the name alone.

• If the answer is yes, mark this issue as reviewed.
• If the answer is no, revise the accessible name to make it sufficiently descriptive of the image button.

For instructions, see the user guide article:

How to review an accessibility issue.

Additional resources¶

WCAG success criteria

• 1.1.1 Non-Text Content