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 via hyperlink

The following example uses simple hyperlinks to link to a note at the end of the chapter.

The descriptions could also be located in a separate file, but this might have a performance impact for users (i.e., it will require the reading system to unload and reload each document each time the user follows a link).

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

<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 role="doc-noteref" 
        href="#desc-01">Description</a>
   </figcaption>
</figure>
…
<h2>Image Descriptions</h2>
<aside role="doc-footnote" id="desc-01">
   <p><a role="doc-backlink" 
      href="#fig-01">Figure 1.</a> — The diagram shows 
      the processes of evaporation, condensation, 
      evapotranspiration, water storage in ice and snow, and
      precipitation. A large body of water …
  </p>
</aside>
Example 3 — Extended description via hyperlink / EPUB footnote

The following example is effectively the same as example 2, but adds the EPUB semantics noteref and footnote to the elements so that EPUB reading systems can create pop-up notes out of the descriptions. User agents not aware of EPUB footnotes will still treat these as simple hyperlinks.

Note that the use of images for the note reference is not well supported, so a text label is used. iBooks, for example, requires the CSS pointer-events: none on HTML elements within a note reference to prevent the publication from crashing the application, but this breaks the notes on any device where a mouse is used. Targeting devices is possible with media queries, but unreliable.

CSS can instead be used to style the note reference to make it less intrusive. For example, it could be reduced in size, italicized and positioned near the image, similar to photo credits.

<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 epub:type="noteref" role="doc-noteref" 
        href="#desc-01">Description</a>
   </figcaption>
</figure>
…
<aside epub:type="footnote" role="doc-footnote" id="desc-01">
   <p><a epub:type="backlink" role="doc-backlink" 
      href="#fig-01">Figure 1.</a> — The diagram shows 
      the processes of evaporation, condensation, 
      evapotranspiration, water storage in ice and snow, and
      precipitation. A large body of water …
  </p>
</aside>
Example 4 — Extended description in details

The following example uses the HTML details element to create a description that is hidden by default.

Note that support for this element is not yet universal, and it is not valid in EPUB 3.0.

<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.
     <details>
        <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>
   </figcaption>
</figure>
Example 5 — Hidden description

The following example uses the aria-describedBy element 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, 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.

It is also a bad choice 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>
     </details>
   </figcaption>
</figure>
Example 6 — 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 7 — 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!"/>

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.

EPUB 3

Although the details element is now a part of HTML 5.1, it is not available for use in content that conforms to EPUB 3.0.1 or earlier versions of the standard. Only EPUB 3.1 and its successors allow this element.

References

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 (none is preferred as of ARIA 1.1), but it is not required for conformance with WCAG.

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.