Images and diagrams are essential for careers in the fields of science, technology, engineering, and mathematics. However, these crucial sources of information are not accessible to people with visual disabilities. The alt text attribute is frequently used to provide a summary of an image. However, it is not sufficient for describing complex images. Examples include a diagram of a hydraulic valve or parts of the body such as the kidneys.
While this document primarily focuses on images, extended descriptions can also be used for other complex content, including tables, explanatory videos, and other media. Such content often requires additional context for full understanding.
At this point in time, the most appropriate and cost-effective solution for making complex content accessible is the use of extended descriptions. This enables authors and publishers to provide longer descriptions in well-structured text. The HTML and ARIA specifications already include features that support extended descriptions. However, there are implementation challenges in current web browsers, EPUB 3 reading systems, and assistive technologies. Therefore, we initiated an activity in a DAISY working group for evaluating the implementation shortcomings of different reading environments, and developing the best practices for authoring extended descriptions. These practices enable users to understand images across a wider range of EPUB reading environments.
The recommendations for EPUB 3 environments in this report may differ slightly from those for the web environment. Most EPUB 3 reading systems use components from web browsers. However, reading systems often change or override browser functionality. This results in a different reading experience.
Note
2. Recommendations
After thorough evaluation, we are able to propose two techniques at this point of time. These techniques worked in a majority of the reading environments. This does not guarantee full support, but these provide a way forward while the web browsers, EPUB reading systems and assistive technologies catch up.
2.1 Recommended technique: Extended description in a separate HTML file with hyperlink
This technique provides extended descriptions in separate HTML file(s) (e.g. an appendix at the end of the e-book, a file containing extended descriptions for each chapter of the publication or even a file for each image). A hyperlink placed below the image in the main content links to the description in the separate file. And a back link placed in the description returns the user to the original reading position in the main content.
Note
This technique is recommended over the use of HTML details element (see Deprecated technique) as it provides better support across reading systems.
Advantages:
Simple technique, authors and publishers are already familiar with it.
Well supported by EPUB reading systems, avoiding the technical limitations associated with collapsing and expanding elements.
Including a copy of the original image marked as presentational (role="presentation") can help users with understanding the extended description in context with the image.
Multiple extended descriptions can be placed in the same HTML file, organized with section elements.
The extended description file can be excluded from the reading order by setting linear="no" in the EPUB spine.
Disadvantages:
Results in branching from the reading flow and sometimes the reading position may be lost when returning.
Accuracy of linking back to original reading position matters, and some reading systems may fail to provide this accuracy.
2.1.1 Setting up the main content
By "main content" we refer to the primary content of your EPUB publication (chapters, sections, etc.) where the images that need extended descriptions appear.
Key requirements:
The image must have a brief alt text that describes what the image is (e.g., "Bar chart showing quarterly website visitors").
After the image (or group of images), there must be a link pointing to its (their) extended description.
The content of the link to the extended description can be textual (for example, "Extended description", or more specific, localized in the language of the text), or it can be an icon whose accessible name (alt or aria-label) must include the term Extended description (in the language of the text).
The link must have a unique id attribute.
The image must have an aria-details attribute pointing to that link's ID.
This establishes a programmatic relationship that allows assistive technologies to indicate that additional details are available.
The general pattern is:
2.1.1.1 Examples
In this section, we provide some examples, which are not exhaustive, of how the code relating to the link to the extended description can be structured in different cases.
2.1.2 Setting up the external file with extended descriptions
Extended descriptions should be placed in separate HTML file(s) that is referenced from the extended description link and with a backlink to the main content. These file(s) can be inserted at the end of the e-book and/or marked as non-linear, meaning that it does not appear when browsing through the e-book. A single HTML file can contain multiple extended descriptions. The content creator can decide whether to collect all the extended descriptions of the publication in a single file, or create one for each chapter or section of the book, or even create a single file for each description.
Each extended description must:
Be wrapped in a section element with an ID that matches the fragment identifier in the link
Include a heading that describes the content
Include a copy of the image marked as presentational (role="presentation" and alt="") to prevent screen readers from announcing it twice, but for for visual reference
Contain the detailed description
Include a backlink with role="doc-backlink" that returns to the anchor of the link to the extended description.
The backlink text must clearly identify which image the user is returning to, especially when the file contains multiple extended descriptions.
Note
To avoid external files with many extended descriptions becoming too large and creating long load times, multiple files can be used (for example, one per chapter of the publication). These files must be identified in the spine as described below.
Note
When a file contains many extended descriptions – for example in an end-of-book appendix – consider using one file per extended description, each with a single back link. This removes ambiguity: with only one back link in the file, the user cannot accidentally navigate to the wrong location in the main content. While this results in more files to manage, it provides the clearest and safest navigation experience.
2.1.2.1 EPUB spine configuration
The extended description file can be marked as linear="no" in the EPUB spine (inside the OPF file) to exclude it from the normal reading order.
2.1.2.2 Example
2.2 Alternate technique: Extended description placed just below the image
This technique provides extended descriptions in the same HTML file of the main content, just below the image.
Advantages:
The extended description is provided just below the image, the next item in the reading order. This means that the user does not need to change from the reading flow, and lose their reading position.
It is a good approach for content creators who don't want to manage external files and back and forward links (from the image to the description and back to the main content).
The description is always visible to all users, which can be a good solution for having text-to-speech engines read the description text.
Disadvantages:
The description is always visible, which may clutter the page for users who do not need extended descriptions.
2.2.1 Setting up the main content with extended description
In this technique the extended description is placed below the image.
Key requirements:
The image must have a brief alt text that describes what the image is (e.g., "Bar chart showing quarterly website visitors").
After the image (or group of images), there must be the aside element containing the extended description.
The aside element must have a unique id attribute.
The image must have an aria-details attribute pointing to that aside's ID.
This establishes a programmatic relationship that allows assistive technologies to indicate that additional details are available.
The general pattern is:
Note
In this example, the heading levels used inside the aside element follow the surrounding document structure. However, you can choose not to use a heading or use a heading structure that is suitable for your readers and your workflow.
2.2.1.1 Example
Note
Code patterns from the Recommended technique examples can also be applied to this technique by replacing the link element with the aside element. However, when images are wrapped in a figure element, the aside cannot be placed inside the figure (as it would conflict with the required placement of figcaption); in this case, the aside should be placed immediately after the closing figure tag.
2.3 Deprecated technique: Extended description in a details element below the image
This technique provides extended descriptions in the same HTML file of the main content, using a details element just below the image. The description is hidden by default and can be expanded by the user.
Advantages:
The extended description is provided just below the image, the next item in the reading order. This means that the user does not need to change from the reading flow, and lose their reading position.
The details element does not show the description by default, the user needs to expand it to show the description, therefore it does not clutter the page for users who do not need extended descriptions.
It is a good approach for content creators who don't want to manage external files and back and forward links (from the image to the description and back to the main content).
Disadvantages:
If a publication has a large number of images and extended descriptions, the task of locating and expanding each details element to read the description may be cumbersome.
There are EPUB reading systems which do not support HTML details properly, or the expansion of the element may cause pagination issues.
This is one of the rare cases in which the content creator of the EPUB attempts to force a particular user experience (show/hide content); the world of EPUBs is normally declarative, identifying semantic structures and leaving it up to reading solutions to interpret them and show the user the best interface (think of footnotes managed in pop-ups or similar).
If the extended description inside the details element is huge, expanding it may disorient the user, especially when the reading system has paginated view.
2.3.1 Setting up the main content with extended description
In this technique the extended description is placed below the image in a details element.
Key requirements:
The image must have a brief alt text that describes what the image is (e.g., "Bar chart showing quarterly website visitors").
After the image (or group of images), there must be the details element containing the extended description.
The details element must have a unique id attribute.
The image must have an aria-details attribute pointing to that details's ID.
This establishes a programmatic relationship that allows assistive technologies to indicate that additional details are available.
The general pattern is:
A. Acknowledgments
The following people contributed to the development of this document:
Avneesh Singh (DAISY Consortium)
Charles LaPierre (Benetech)
Cody Care (EBSCO)
Gautier Chomel (EDRLab)
George Kerscher (DAISY Consortium)
Gregorio Pellegrino (Fondazione LIA)
Ibrahim Siddo (Oxford University Press)
James Yanchak (Taylor and Francis)
Jonas Lillqvist (Accessibility Library Celia, National Archives of Finland)
