This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: email@example.com.
[DRAFT] Functional images
Functional images are those that allow user interaction , such as when used as buttons or within links. In this case, the text alternative for the image needs to convey the action that will be initiated (the purpose of the image), rather than a description of the image. For instance, as shown in examples below, the text alternative should be "print this page" rather than "image of a printer", "search" rather than "magnifying lens" or "Example.com homepage" rather than "Example.com logo".
Note: It's vital that images that act as stand alone links have the appropriate text value in their alt attributes. Missing or empty alt values for stand alone linked images create real problems for screen reader users as the reader cannot ignore links, and if no text alternative is provided they will announce the image filepath or the URI for the destination page, neither of which will let users know where the link leads.
Example 1: Image used alone as a linked logo
The following image is the only content of a link that leads to the W3C homepage. It has the text alternative "W3C home" to indicate where the link will take the user, (see example 2 if there is other text in the link to identify the destination):
<img src="../img/w3c.png" ...
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: Logo image within link text
In this example the W3C logo is contained within a text link that leads to the W3C homepage. The image has the same function as the text within the link (to identify where the link will take the user). As the link text already provides this information, it acts as the text alternative. The image must still contain an alt attribute though, so a null (empty) value is applied, (alt=""), to avoid redundancy or repetition. In effect the image is a decorative adjunct to the link text:
<img src="../img/w3c.png" alt="">
Note: Where an image and text are both contained in a single link anchor, the image should be treated as decorative, although it functions as part of the link, unless it contains additional information that is pertinent to the link (see example 3). Another example of this technique can be found under decorative images.
Example 3: Icon image conveying information within link text
In this example the image follows text within a link to inform users that the link will open in a new window. It has the text alternative "new window" to reflect the representation on the image:
<img src="../img/new-win.gif" ...
alt=" new window">
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: Stand-alone 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 this page" because its purpose is to activate the print dialog when it is selected:
<img src="../img/print.png" ...
alt="Print this page">
Note: The same text alternative is applicable when such an icon is used in a button instead of in a link. the next example on this page explains how to code the text alternative for buttons.
Example 5: 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":
<input type="image" ...
Related WCAG2.0 Techniques
The following WCAG 2.0 techniques were used in the examples above: