Summary

Ensure the information a user needs to receive from an image is provided in text form.

Techniques

Examples

Example 1 — Significant simple image (no description required)
<img
    src="covers/9781449328030_lrg.jpg"
    alt="Accessible EPUB 3 - First Edition" />
Example 2 — Extended description in details

The following example uses the HTML details element to create a description that is collapsed from view by default. The aria-details attribute is used to associate the image with the description.

Note that support for this element is not yet universal in EPUB, and is often buggy (e.g., details elements are often always opened by default).

In EPUB, reading systems the details element often does not work when included inside a figure. It is best to put the element immediately after the closing figure tag.

Despite its shortcomings, this is one of the most reliable techniques in EPUB.

<figure id="fig-01">
   <figcaption>
      The hydrologic cycle.
   </figcaption>
   <img
      src="graphics/water-cycle.jpg"
      aria-details="#fig-01-desc"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"/>
</figure>
<details id="fig-01-desc">
   <summary>Description</summary>
   <p>
      The diagram shows the processes of 
      evaporation, condensation,
      evapotranspiration, water storage
      in ice and snow, and precipitation.
      A large body of water …
   </p>
</details>
Example 3 — Extended description via hyperlink

The following example uses simple hyperlinks to link to a description in a separate file.

In EPUB, when possible (i.e., when there are not too many images), the linked description should be located in a file by itself to avoid issues reaching the description (i.e., not all reading systems are able to locate the user properly when there are multiple descriptions). When there are many images, adding each description to a separate file can bloat the spine (i.e., every description file has to be listed).

An image could also be used to minimize the appearance of the link, but in EPUB some reading systems have issues with such links.

Despite its shortcomings, this is one of the most reliable techniques in EPUB.

<figure id="fig-01">
   <img
      src="graphics/water-cycle.jpg"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"/>
   <figcaption>
     The hydrologic cycle. <a href="desc/fig-01.html">Description</a>
   </figcaption>
</figure>
Example 4 — Hidden description

The following example uses the aria-describedBy attribute to link to a hidden description, leaving no visual indication at all that a description is available.

Note that support for this attribute is poor in EPUB, particularly when referencing hidden content. While valid, it may prevent any users from reaching the description, so should be used with caution. The Open Web Platform is moving away from hidden content that can only be accessed via assistive technologies.

This technique is not recommended if the description contains structured markup like tables or lists, as all tagging is stripped and only the text content read to users.

<figure id="fig-01">
   <img
      src="graphics/water-cycle.jpg"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"
      aria-describedby="desc01"/>
   <figcaption>
     The hydrologic cycle.
     <aside id="desc01" hidden="hidden">
        <p>
           The diagram shows the processes of 
           evaporation, condensation,
           evapotranspiration, water storage
           in ice and snow, and precipitation.
           A large body of water …
        </p>
     </aside>
   </figcaption>
</figure>
Example 5 — Decorative image

An empty alt attribute is complemented by the role presentation to indicate that the image contains no information for users.

<img
    src="graphics/gothic-border.png"
    role="presentation"
    alt=""/>
Example 6 — Image input button

The alt attribute can be attached to image input elements to provide an equivalent label.

<input
    type="image"
    name="submit"
    src="enter.jpg"
    alt="Enter to Win!"/>
Example 7 — Image with label and caption on opposite sides

The following example shows a figure with its label above the the image and its caption below. The aria-labelledBy attribute is used to associate the label with the figure so that this information can still be readily presented to users.

<figure id="fig-01" aria-labelledBy="fig1-label">
   <p class="label" id="fig1-label">Figure 1. Prime Mover</p>
   <img
      src="graphics/prime_mover.jpg"
      alt="The universe in motion through its attraction to the prime mover"/>
   <figcaption>
      <p>The primer mover is shown to be a —</p>
   </figcaption>
</figure>

Frequently Asked Questions

Should I put role presentation/none on images?

It is best practice to use one of these roles if an image is purely decorative, but it is not required for conformance with WCAG.

Although the none is preferred over presentation as of ARIA 1.1, it is also not well supported. The ARIA 1.1 specification recommends using either presentation alone or as a fallback for none.

Do not use these roles in place of an empty alt attribute. Not only is this not technically conforming HTML (an alt attribute can only be omitted in very select cases), but it may not work with older assistive technologies.

Explanation

Images that are central to the understanding of a publication must always include a text alternative in their alt attribute. In the case of complex images, a detailed description should also be added.

If the image is purely decorative, the alt attribute should be left empty. For additional insurance that decorative images will not be announced, the ARIA role attribute with the property presentation can be attached.

Note

If an image is important to the publication, but not required to be read at the point of insertion (i.e., it is not part of the logical reading order), use a figure tag to enclose it.

Related Links