Image Accessibility 101: Functional Images

alhasenzahl

Amanda Hasenzahl

Posted on September 20, 2019

Image Accessibility 101: Functional Images

A functional image is an image that initiates an action rather than shares information. These images can enhance buttons, links, and other functional elements.

Tips for writing the alt text:

1) It should describe the action that will happen when you click the image, rather than what the image is.

2) It is crucial for understanding the functionality of the content being displayed.

Examples:

The Netflix logo

<a href="https://www.netflix.com">
    <img src="img/Netflix-Logo.png" alt="Netflix Home" />
</a>
Enter fullscreen mode Exit fullscreen mode

The above image is considered a functional image because the logo is being used as a link to redirect the user back to the site's homepage. Therefore, you want to include the word Home in the alt text to indicate to the users that this link brings you back to the home page when clicked.

If the logo was just being used as a stand alone image without also being a link, then the alt text would just read alt="Netflix".

A printer icon

<button onclick="window.print();">
    <img src="img/printer-icon-in-flat-style-vector-19244045.jpg" alt="Print this page." />
</button>
Enter fullscreen mode Exit fullscreen mode

This image would also be considered functional because it is an image inside a button that prints the current page's content when clicked. The image of the printer indicates to sighted users that the button is for printing. However, for those who can't visually see the printer, the alt text needs to convey this action to them.

Summary

An image that is being used to initiate an action or enhance a functional element on the page is a functional image. It is so important that the alt text reflect the action that will occur, rather than describe what the image is.

💖 💪 🙅 🚩
alhasenzahl
Amanda Hasenzahl

Posted on September 20, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Accessibility on web
a11y Accessibility on web

November 21, 2024

Accessibility (a11y) Rules - 3
web Accessibility (a11y) Rules - 3

November 16, 2024

Accessibility (a11y) Rules - 4
web Accessibility (a11y) Rules - 4

November 16, 2024

Accessibility (a11y) Rules - 5
web Accessibility (a11y) Rules - 5

November 16, 2024

Accessibility (a11y) Rules - 2
web Accessibility (a11y) Rules - 2

November 16, 2024