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, but it is not sufficient for describing complex images, like a diagram of a hydraulic valve, or parts of the body like kidneys etc.
At this point of time, the most appropriate and cost effective solution for making complex images accessible is the use of extended descriptions. It enables authors and publishers to provide longer descriptions in well-structured text. The good news is that the HTML and ARIA specifications already have some features for supporting extended descriptions, but there are implementation challenges in the current state of web browsers, EPUB 3 reading systems and assistive technologies. Therefore we initiated an activity in our working group for evaluating the implementation shortcomings of different reading environments, and developing the best practices for authoring extended descriptions, which enables the users to understand the images in a wider range of EPUB reading environments.
It is possible that the recommendations for EPUB 3 environments provided in this report are a little different from the recommendations for the web environment. Though most of EPUB 3 reading systems use components from web browsers, the reading systems tend to change and sometimes override the web browser functionality, which results in a somewhat 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.
Technique 1: 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, possibly a file containing extended descriptions for each chapter of the publication or even a file for each image) from the main content, with a hyperlink below the image to the description and a back link to return to the original reading position.
This technique is recommended over the use of HTML details element (see Technique 2) 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.
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
Technique 2: Extended description placed in HTML, 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.
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.
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 the container of the extended description.
The container of the extended description must have a unique id attribute.
The image must have an aria-details attribute pointing to that container'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, for placing the extended description just below the image.