Long descriptions for images - part 1

What are long descriptions?

Long descriptions are text versions of the information provided in a detailed or complex image.

Most web writers are familiar with short descriptions for images, often called text alternatives or ALT text. We use them when an image conveys a brief message or acts as a link.

However, when we use diagrams, maps or graphs, the ALT text is not usually enough to provide an adequate text alternative. To present a long description, we might need to use headings, dot points or data tables. While ALT text can be long (there's no technical limit), long text usually needs structure. And ALT text can only be text.

Benefits of long descriptions

Long descriptions are important for people with vision impairments. If someone can't see an image, or can't see the detail in it, they can't access the information it provides.

Long descriptions sometimes help people with learning disabilities. If someone can't interpret the image or listens to web pages with a voice browser because they have problems reading, the text version can help.

Another benefit of long descriptions is discovery. Search engines can only index information contained in an image if there is text that identifies and describes it.

Adding long descriptions to a website or document

We can provide long descriptions on the same page as the image, or on a different page.

Same page methods

Image is a supplement

If you've added an image to provide a visual supplement to the information you've written about, you may already have a suitable long description. In this case, you need to add a short text alternative to label the image and mention that the long description is in the text above or below:

<img alt="Chart showing sales figures for 2014, discussed above">.

Check if the image provides useful detail or shows a trend that isn't mentioned in the existing text. If you need more text, add it to the page or the text alternative, making sure whichever method you use reads well.

Image is the main content

If the image is the main way you're communicating information, you can add the long description:

• immediately below the image. Use a short text alternative to label the image and refer to the long description: <img alt="Chart showing sales figures for 2014, text version below">
• using a closed accordion immediately below the image: <img alt="Chart showing sales figures for 2014, expand text version below"> followed by your accordion link: <a class="accordion" href="#sales2014">Text version of 2014 sales figures</a>
• at the end of the page and link to it: <img alt="Chart showing sales figures for 2014, text version linked below"> followed by a jump link: <a href="#sales2014">Text version of 2014 sales figures</a>

The second and third methods are handy when you have several charts that need a long description. You can keep all the content on a single page, but avoid making sighted users scroll.

For the third method, create a section at the end of the page labelled "Description of charts on this page". Add each long description beneath this, labelling each with a suitable sub-heading: for instance, "Text version of 2014 sales figures chart". Link to the relevant sub-headings from beneath each chart. It's a good idea to let users know when they reach the end of a description by including the text "[end of description]".

Figcaption, aria-describedby and longdesc

If you can edit HTML or work with a web developer who can help you, you can add long descriptions to the same page using either:

• figcaption element in HTML5
• aria-describedby property
• longdesc attribute (with a jump link to a section at the end of the page)

These methods might not work well with all screen readers, and only figcaption is visible to people using a screen magnifier or voice browser.

Different page methods

Where the long description for an image looks like repetition, you might want to use a different page for long descriptions.

Longdesc attribute

Longdesc lets you add link to a long description on another page within the image tag:

<img alt="Sales figures for 2014" longdesc="chart-descriptions.html#sales2014">

However, longdesc attributes are not usually displayed by web browsers—only people using screen readers will know they are there. This may change in the future, but for the time being using a visible link is a better option.

Visible links

On the web, create a page (or series of topical pages) for your long descriptions. In a document, create an appendix (or series of topical appendixes).

Add a visible link immediately below the image and label it "Text version of [image name]" or "Long description of [image name]", linking it to the start of the relevant long description. You can add a link to a long description above the image, but that forces people to move back up the page to activate it.

Mention the location of the link in the short text alternative:

<img alt="Sales figures for 2014, text version linked below">

It's also useful to add a link back to the page where the image appeared, especially in documents where there's no back navigation method like there is in web browsers.

Related articles

• Part 2 on this topic discusses what to write in a long description and provides some examples.
• Text alternatives for images: a decision tree
• Writing text alternatives for maps
• Text alternatives for images: some examples