Summary

Ensure the information a user needs to understand from an image is also provided in textual form.

Techniques

Examples

Example — Significant simple image (no description required)
<img
    src="covers/9781449328030_lrg.jpg"
    alt="Accessible EPUB 3 - First Edition" />
Example — 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.

<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 — Extended description via hyperlink

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

<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 — 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 — Image with label and caption on opposite sides

The following example shows a figure with its label above 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

Why link to visible descriptions?

Even though a description is a visible part of the current page, linking to it provides a programmatic means for users of assistive technologies to rapidly access the description without having to hunt through the page content.

Why not longdesc?

The longdesc attribute is now considered an obsolete feature of HTML.

Although published as a separate extension of HTML by W3C, it is not supported in EPUB.

Why aria-details?

Although similar in purpose to the aria-describedby attribute, the aria-details attribute does not result in stringified content (i.e., the user will be able to navigate the description as structured HTML). The aria-details attribute allows a user to navigate to the content of a details element, for example.

When is a figure tag needed?

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. See the Figures page for more information.

Should I use img or picture?

The picture element is only needed if you provide more than one version of the image (e.g., different resolutions or different formats targeted for different devices). The picture element otherwise does not have any accessibility advantages over the img element if only a single image format is available. Both allow for alternative text and extended descriptions.

Writing Descriptions

Alternative Text

Images that are central to the understanding of a publication must always include a text alternative in their alt attribute.

Note

If an image is purely decorative, the alt attribute should be left empty. See the Decorative Images page for more information.

The alternative text representation of an image is not designed to be a full description of the image. A common mistake authors make is to use the alt attribute to provide a paragraph or longer explanation of an image. Users, however, only want a very brief description of an image in its alternative text, as they often have to listen to the entire text before they can continue reading. The alternative text should allow the user to decide if they want to read the extended description without bogging down their reading experience.

One of the best ways to think about writing the alternative text for an image is to consider why it is there for visual readers. The goal is not completeness of detail. It is also not to add detail that cannot be determined from the image itself (i.e., that visual readers will not have access to).

Writing short and concise alternative text is something of an art, as the information needed from each image is never exactly the same. A useful technique, though, is to try and answer the most relevant "who, what, where, when, why and how" questions about the image in as few words as possible.

For example, consider this battle scene. Asking each question:

  • What is the picture? A painting by William Sadler II. The painter is not named in the painting, so the alternative text should not introduce this information.
  • Who is in the picture? The French and English armies.
  • What are they doing? Engaging in a battle.
  • Where is this happening? Waterloo.
  • When is this happening? Not mentioned in the picture so should not be introduced in the alternative text.
  • Why are they fighting? Too complicated to answer and not pertinent to the painting itself.
  • How are they fighting? Again, too complicated for alternative text.

Combining the most relevant answers might net alternative text: "Painting of the English and French armies at Battle of Waterloo".

The context of the picture also plays an important role in how to describe it, though. If this painting were in a book on British history, for example, the user may already know the participants and dates, and the painter may not be relevant. In this case, the alternative text could be further reduced to: "Painting of the Battle of Waterloo."

If the painting were used in an anti-war book, on the other hand, its alternative text might highlight the barbarity of the battle: "Painting depicting the slaughter of troops at the Battle of Waterloo."

So long as the alternative text accurately conveys the purpose of the image within the publication, there are many ways you can frame the text.

Extended Descriptions

Writing the extended description for an image tends to cause less confusion as these descriptions are not as restrictive about length as alternative text. But, like alternative text, the goal when authoring extended descriptions is still to explain the purpose of the image as succinctly as possible. It is not to describe every minute detail, but to convey the essential information.

So, the first step in writing an extended description is to determine if an extended description is even necessary. Sometimes an image does not need a lot of description, especially if its context is already provided in the surrounding text. Ask yourself if the description you intend to write will add pertinent information that aids in the understanding, or is it detail for details sake?

For example, consider an image of two world leaders smiling and shaking hands. If the image is only included to show their cordial relationship, an alternative text that indicates who is in the picture and what they are doing is probably sufficient. Adding an extended description of the room they are, the clothes they are wearing, the people around them, etc. is not helpful to the reader.

Once you establish that an extended description is necessary, the process of writing the description is like writing the alternative text. The same "who, what, where, when, why, and how" questions need to be looked at, only this time with the goal being to fully capture the essential information.

The context of the picture will once again influence what information is essential to the publication. Using the battle scene from the alternative text section, for example, a book on military strategy might focus on explaining the apparent disarray of the attack. It would not be necessary to explain the actions of everyone in the painting, only to give a general sense of the surging nature of the battle.

The extended description should not introduce facts that are not discernible from the visual depiction of the image. It is not the place, for example, to describe the generals, their battle plans, etc. This information should be in a caption for the image if not described in the surrounding text, as it is not apparent from the image alone.

For additional help writing extended descriptions, the DIAGRAM Center's interactive examples show how to approach describing various types of images.

Description Methods

The following sections explain some of the better supported methods for adding extended descriptions to images. Other methods are possible, but support in reading systems is often not as robust as in browsers. For testing information, refer to the DIAGRAM Center's Best Practices for Authoring Extended Descriptions in EPUB.

The details element

The details element provides a collapsible means of including a description for an image. The advantage of this element is that it allows both sighted and non-sighted readers access to the description at their discretion (i.e., sighted readers can choose whether to expand and read the description just as assistive technologies users can decide whether to have the text read out).

Support for this element is not yet universal in EPUB, however. The element text may always be open by default, and expanding the element when initially closed can cause problems with the pagination produced by user agents (e.g., opening the element pushes content at the bottom of the page out of view).

To use the element in EPUB publications, it is also recommended to put the element immediately after a closing figure tag when the description is for a figure. The element often does not work when included inside a figure.

Despite these shortcomings, this element is still one of the more reliable techniques currently supported in EPUB.

Related Links