Introduction
While the alt attribute offers a way to describe simple images in a concise manner, there are some instances where a longer description is needed to convey the details of an image or figure in an ebook. This article discusses the different ways in which extended descriptions (also referred to as long descriptions) can be added in an EPUB. Types of complex images requiring longer descriptions include maps, graphs, charts, diagrams, and demonstrative illustrations.
Long descriptions can be written by editorial staff, authors, subject matter experts, or third-party vendors. It is recommended that authors and subject matter experts should create image descriptions as they are most familiar with the text. However, anyone can create these descriptions keeping the context in mind and using image description best practices. For tips on writing image descriptions, check out this APLN article.
If a complex image is described in the surrounding text, then only a short alt description is needed. If the image is not described in the surrounding text, then both a short alt description and a long description are needed. The short alt-text should still describe the image in general terms and give enough information for the reader to decide whether they would like to proceed with reading the longer description or not.
Extended Description Coding Methods
There are several methods for adding extended descriptions in an EPUB. Some are more reliable than others, with better support across reading systems and assistive technology. A few commonly used methods are detailed below.
Details Element
The HTML details element is used to create a collapsible description of an image or figure, giving access to the extended description to sighted and non-sighted users. It is recommended to put the details element after the closing figure tag when describing a figure, as it might not work when nested inside the figure tag.
In the example code below, the aria-details attribute associates the image with the description.
<figure id="fig-01">
<figcaption>
Mitosis stages.
</figcaption>
<img
src="graphics/mitosis.jpg"
aria-details="fig-01-desc"
alt="The five stages of mitosis, illustrating cell
division from one cell to two identical cells."/>
</figure>
<details id="fig-01-desc">
<summary>Description</summary>
<p> The figure shows five numbered stages of
mitosis: interphase, prophase, metaphase,
anaphase and telophase. During interphase…
</p>
</details>
Hyperlinks
Another popular method for adding long descriptions in EPUBs is to add hyperlinks below an image to direct the reader to a description stored in a separate xhtml file or a specific location within the EPUB. In this case, aside from a brief description of the image, it is recommended to mention in the alt-text that a link to the long description can be found below the image.
Similar to endnotes, hyperlinks can also lead the reader to the end of the same document; they do not always have to be stored in a separate file. Each long description in an EPUB can be stored in individual files, or they can all be stored in a single file located at the end of the EPUB. It is important in all cases to provide the user with a link back to their original location in the text.
In the example below, the hyperlink is placed between the image and the figure caption. If there is no caption, the link can simply be placed after the image.
<figure id="fig-01">
<img
src="graphics/mitosis.jpg"
alt=" The five stages of mitosis, illustrating cell
division from one cell to two identical cells. See the link below
the image for an extended description."/>
<p><a href="LongDescriptions.xhtml#fig-01">Long Description of Figure 1</a></p>
<figcaption><p> Figure 1.1. Mitosis stages. </p></figcaption>
</figure>
In the separate file for long descriptions, add a level-one heading such as “Long Descriptions” and below it, add level-two headings for each long description from the narrative. The image should be included here as well (to aid low-vision readers) but marked as decorative. Figure 1’s long description would be coded as follows:
<h2 id="fig-01">Figure 1.1</h2>
<img src="graphics/mitosis.jpg" alt="" role="presentation" />
<p> The figure shows five numbered stages of
mitosis: interphase, prophase, metaphase,
anaphase and telophase. During interphase… </p>
<p><a href="Chapter1.xhtml#fig-01">Return to Figure 1.1</a></p>
Hidden Descriptions
The aria-describedby attribute can be used to add hidden descriptions in an EPUB. These can be read by assistive technology and do not leave visual markers in the text. However, this attribute is not widely supported across reading systems currently and should be used with caution. It is also not recommended for complex figures such as tables as it would only read out text values and hide the tables’ structural markup.
In the example below, the hidden description is included within the aside element along with the aria-describedby attribute linking it to the image.
<figure id="fig-01">
<img
src="graphics/mitosis.jpg"
alt="The five stages of mitosis, illustrating cell
division from one cell to two identical cells."/>
aria-describedby="desc01"/>
<figcaption>
Mitosis stages.
<aside id="desc01" hidden="hidden">
<p>
The figure shows five numbered stages of
mitosis: interphase, prophase, metaphase
anaphase and telophase. During interphase…
</p>
</aside>
</figcaption>
</figure>