Functional Images

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should 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”.

Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image filename, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initated by the image.

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. The next example, “Logo image within link text” example, discusses what to do when there is other text in the link to identify the destination:

Example:

W3C home

Code snippet: 
<a href="http://www.w3.org/">
	<img src="w3c.png" alt="W3C home">
</a>

Note 1: In this situation the logo is also an image of the text “W3C” but in this case its primary function is to link 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 requirements that apply to other images of text, for instance there are no minimum color contrast and text size requirements.

Logo image within link text

In this example the W3C logo is used to supplement text within a link that leads to the W3C homepage. The image does not represent different functionality or convey other information than that already provided by in the link text, so a null (empty) value is applied, (alt=""), to avoid redundancy and repetition. In effect the image is a decorative adjunct or visual cue to the link text:

Example:

W3C Home

Code snippet: 
<a href="http://www.w3.org/">
	<img src="w3c.png" alt=""> W3C Home
</a>

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:

Example:

W3C Homepage new window

Code snippet: 
<a href="http://www.w3.org/" target="_blank">
	W3C Homepage <img src="new-window.png" alt="new window">
</a>

Note: This technique is often used with icons 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, see Informative Images.

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:

Example:

Print this page

Code snippet: 
<a href="javascript:print()">
	<img src="print.png" alt="Print this page">
</a>

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” to convey the purpose of the button:

Example:

Code snippet: 
<input type="image" src="searchbutton.png" alt="Search">

Techniques: