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:

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

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".

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

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.