[DRAFT] Functional images

Functional images are those that carry out an action, such as button images or images within links. In this case, the text alternative for the image needs to convey the action that will be initiated, rather than a description of the image. For example the text alternative should be "print" rather than "image of a printer" and "search" rather than "magnifying lens".

Example 1: Image used as a linked logo

The following image is in a link that leads to the W3C homepage. It has the text alternative "W3C home" to indicate where the link will take the user, especially since there is no other text in the link:

Code snippet

Note 1: In this situation the logo is also an image of the text "W3C" but in this case it is primarily a functional image linked to the home page, so the word "home" was added to the text alternative.

Note 2: Images used as logos are exempt from some of the accessibility guidance that applies to other images of text, for instance there are no minimum color contrast and text size requirements.

Example 2: Icon image that has a function

The following image is an icon representing a printer to denote print functionality. It has the text alternative "Print" because its purpose is to activate the print dialog when it is selected:

Code snippet

Note: The same text alternative is applicable when such an icon is used in a button instead of in a link. A later example on this page explains how to code text alternative in buttons.

Example 3: Icon image within link text

In this example the image follows text within a link to indicate that the link will open in a new window. It has the text alternative "opens in new window" to reflect the representation on the image:

W3C Homepage

Code snippet

Note: This type of icon is often used to indicate different file formats such as AVI, ODF, MP3, PDF, Word, and many more. In this case the text alternative should equally convey the format represented by each icon.

Example 4: Image used in a button

The following image is used to give the button a distinct style. In this case it is the button to initiate a search request and is an icon representing a magnifying lens. The text alternative for the image is "search":

Search

Code snippet