Skip to main content

Functional images

When an image is used as a link or button, the text alternative must describe the functionality of the link or button rather than the visual image. Examples of functional images include the following:

  • A printer icon to represent the print function.
  • A magnifying lens icon to indicate a search feature.
  • A header logo used to link to a website's homepage.
important

If an image is fully described in the body text, then you don't need to include the same information in the alt text. For information about how to add blank alt attributes, refer to Decorative images.

For help with writing alt text for a particular image, post in the #talk-accessibility Slack channel.

Example functional images​

The following sections provide example images along with their suggested alt text and code examples.

Example 1: Toolbar icon​

The following image is a dropdown menu icon in a webpage toolbar, located between the icons for search and customer account login. The dropdown menu contains links to other Unity websites.

Dropdown menu icon in a toolbar

Source: Featured products (Unity).

Suggested alt text: Unity resources.

note

This guidance only applies to icons that perform a function when the user interacts with them. If the icon instead appears in UI reference content that describes the toolbar, then it's an informational image.

The following image is the Unity logo in the header of the Unity Manual. The logo links to the Unity Manual homepage.

Unity Documentation logo as link to homepage.

Source: Unity User Manual 2021.3 (LTS) (Unity Manual).

Suggested alt text: Unity Documentation home.

note

In this example, the logo is also an image of the text "Unity Documentation." However, because the image's primary function is to link to the homepage, the word "home" is added to the alt text.