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.
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.
Recommended technique: Extended description in a separate HTML file with hyperlink
This technique provides extended descriptions in separate HTML file(s) (e.g. and 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.
This technique is recommended over the use of HTML details element (see Deprecated technique) as it provides better support across reading systems and reduces cognitive load for users.
Advantages:
Simple technique, authors and publishers are already familiar with it.
Complexities and technical limitations in some EPUB reading systems due to collapsing and expanding are avoided, and fidelity of the page is maintained to a great extent.
Almost all EPUB reading systems support hyperlinks.
Including a copy of the original image marked as presentational (role="presentation") can help cognitive 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.
The navigation process (clicking the link, reading the description, then clicking the back link to return) may increase cognitive load for some users.
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 creates a programmatic relationship that assistive technologies can use to announce the availability of an extended description.
The general pattern is:
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.
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 back link with role="doc-backlink" to return to the original image
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.
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.
Example
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.
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 creates a programmatic relationship that assistive technologies can use to announce the availability of an extended description.
The general pattern is:
Example
The code patterns shown in the Recommended technique examples (such as images in figure with link in figcaption, multiple images, using an icon) can also be applied to this technique by replacing the link element with the aside element containing the extended description.
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 the details, and expanding it to read descriptions puts considerable cognitive load, especially on the people with cognitive disabilities.
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.
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 creates a programmatic relationship that assistive technologies can use to announce the availability of an extended description.