Ensure the information a user needs to understand from an image is also provided in textual form.
Provide alternative text in the
altattribute if the image is not described in the surrounding text. [WCAG 1.1.1]
- Using alt attributes on img elements
- Using alt attributes on images used as submit buttons
- Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
Provide an extended description for complex images. [WCAG 1.1.1]
- Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
- Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
- Providing long description for non-text content that serves the same purpose and presents the same information
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
longdescattribute 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 not
aria-detailsattribute is currently under development and not well supported by assistive technologies. It will allow an association to be made with a description in a
detailselement. Although like
aria-detailsattribute will not result in stringified content (i.e., the user will be able to navigate the description as structured HTML).
- When is a
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
figuretag to enclose it. See the Figures page for more information.
- Should I use
pictureelement 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
pictureelement otherwise does not have any accessibility advantages over the
imgelement if only a single image format is available. Both allow for alternative text and extended descriptions.
Images that are central to the understanding of a publication must always include a text
alternative in their
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.
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.
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.
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
Despite these shortcomings, this element is still one of the more reliable techniques currently supported in EPUB.