This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.

🔙 WCAG 3.0 (Silver) Guidelines (Text alternatives)

Method: Functional Images

Platform

All platforms that support HTML

Technology

HTML

Summary

It makes label (name) conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

How it solves user need

People using screen readers: The text alternative can be read aloud or rendered as Braille
People using speech input software: Users can put the focus onto a button or linked image with a single voice command
People browsing speech-enabled websites: The text alternative can be read aloud
Mobile web users: Images can be turned off, especially for data-roaming
Search engine optimization: Images become indexable by search engines

Outcome

This method supports the outcome Text alternatives available.

Detailed description

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, 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 file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.
When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.

from WAI Tutorials - Images - Functional Images.

Dependencies

None

The examples 1-6 come from the WAI Tutorials - Images.

Image used alone as a linked logo
Logo image within link text
Icon image conveying information within link text
Stand-alone icon image that has a function
Image used in a button
An editor interface
Image of text used as a linked logo (1)
Image of text used as a linked logo (2)
A print preview icon
A search icon
A submit button

Image used alone as a linked logo

The following image is the only content of a link that leads to the W3C home page. 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 more text in the link to identify the destination. This example is from the WAI Tutorials Images.

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

Note: 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 homepage, so the word “home” was added to the text alternative.

Logo image within link text

In this example, the W3C logo is used to supplement text within a link that leads to the W3C home page. The image does not represent different functionality or convey other information than that already provided 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. This example is from the WAI Tutorials Images.

<a href="https://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 convey the meaning of the icon. This example is from the WAI Tutorials Images.

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

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.

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

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

An editor interface

In this example, a portion of an editor interface is displayed. Each button has an icon representing an action a user can take on content they are editing. For users who cannot view the images, the action names are included within the alt attributes of the images.

<ul>
  <li><button><img src="b.png" alt="Bold"></button></li>
  <li><button><img src="i.png" alt="Italics"></button></li>
  <li><button><img src="strike.png" alt="Strike through"></button></li>
  <li><button><img src="blist.png" alt="Bulleted list"></button></li>
  <li><button><img src="nlist.png" alt="Numbered list"></button></li>
</ul>

Image of text used as a linked logo (1)

In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is a brief description of the link target. This example is from EXAMPLE 24 of HTML 5.3.

Example of image of text linked from external site: W3C web site

<a href="https://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>

Image of text used as a linked logo (2)

This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is a brief description of the link target. This example is from EXAMPLE 25 of HTML 5.3.

Example of image of text linked internally: W3C home

<a href="https://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
</a>

NOTE: Depending on the context in which an image of a logo is used it could be appropriate to provide an indication, as part of the text alternative, that the image is a logo. Refer to HTML 5.3 section §4.7.5.1.19 Logos, insignia, flags, or emblems.

A print preview icon

In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target. This example is from EXAMPLE 26 of HTML 5.3.

<a href="preview.html">
  <img src="images/preview.png" width="32" height="30" alt="Print preview.">
</a>

A search icon

In this example, a button contains a search icon. The button submits a search form. The text alternative is a brief description of what the button does. This example is from EXAMPLE 27 of HTML 5.3.

<button>
  <img src="images/search.png" width="74" height="29" alt="Search">
</button>

A submit button

<form action="http://example.com/prog/text-read" method="post">
  <input type="image" name="submit" src="button.gif" alt="Submit" />
</form>

Atomic Tests

Automated test for all images

Unit Tested: All Images

Measurement: Percentage (# passed/total # of img elements for all images)

This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
The percentage test result is the number passed divided by the total number of img elements or images.

Procedure for HTML

Run an automated test that displays the text alternative (or accessible name) for images.
Check that functional, informative, and images of text have alternative text that serves an equivalent purpose of the image
- Functional images describe the function
- Informative images describe the image
- Images of text repeat the text or the equivalent purpose of the text.
Check that decorative images are appropriately coded (see “Decorative Images” method) so they are hidden to assistive technology.

Expected Results

Check #2 and #3 are true.

Procedure for Technology Agnostic

Examine each image in the content.
Check that each image that conveys meaning has its text alternative.
If the image contains text that is not purely decorative, the text alternative contains the same text.
If it is within a link together with text, check that it is implemented to be ignored by assistive technology or the text alternative describes the image and supplements the link text.
If it is a button, check that the text alternative indicates the button's function.

Expected Results

Checks #2 and #3, or #2 and #4, or #2 and #5 are true.

Manual Test of Functional Images

Unit Tested:This test is measured by the number of the following elements only for “Functional Images” in the HTML document
- img elements
- input elements with type=”image”
Measurement:Percentage (# passed/total # of img elements for “Functional Images”)

Procedure [for HTML]

Examine each img element in the content
Check that each img element which conveys meaning contains an alt attribute.
If the image contains text that is not purely decorative, the value of the alt attribute is the same as the text.
If it is within a link together with text, check that an img element within an a element has either a null alt attribute value or a value that supplements the link text and describes the image
If it is a button, check that the text alternative indicates the button's function.

Expected Results

Checks #1 and #2 are true

If a functional image is not purely decorative and CSS is used instead of an img or input (type=”image”) element, that does not pass.
If a functional image is not purely decorative and the img or input (type=”image”) element doesn’t have an alt attribute, that does not pass.
If a functional image is not purely decorative and the value of the alt attribute of the img or input (type=”image”) element is not the equivalent of the image, that does not pass.

Procedure [Technology Agnostic]

Examine each functional image in the content.
Check that each functional image that conveys meaning has its text alternative.
If the image contains text that is not purely decorative, the text alternative contains the same text.
If it is within a link together with text, check that it is implemented to be ignored by assistive technology or the text alternative describes the image and supplements the link text.
If it is a button, check that the text alternative indicates the button's function.

Expected Results

Checks #2 and #3, or #2 and #4, or #2 and #5 are true.

Holistic Tests

Still to be developed. We will include this in a future working draft.

W3C Resources

Non-W3C Resources

None

Status

First draft

Change Log

{list of non-editorial changes by date}

WCAG 3 JSON