How to write better alt-text for images

“The drawing shows me at one glance what might be spread over ten pages of a book.”

The words of Anna Sergeyevna, from Turgenev’s 1862 novel Father and Sons, echo across the ages and apply more than ever in our own time.

With an estimated 1.4 trillion photographs forecast to be taken globally in 2020, the digital world is becoming an ever more visual place.

A picture can indeed tell a thousand words, but how can images be conveyed to those who cannot see them?

What is alt-text?

Alternative text, or alt-text, is a short description of an image that explains the content of an image to a user or a search engine.

Alt-text is housed in the alt-tag within the HTML coding of an e-book or web page. It consists of the original image source and the alt-attribute:

<img src=“image_file.jpeg” alt=“this is an image description”>

When a screen reader or search engine encounters the image, they will interpret the image using the alt-text. If the alt-text is missing, the image is not accessible to users or discoverable by search engines. It is effectively silent.

What is bad alt-text?

Using this photograph of WW1 fighter ace, Baron von Richthofen, we can identify examples of bad alt-text usage.

Filename as alt-text.

<img src=“image1917.jpeg” alt=“image1917”>

Random name as alt-text.

<img src=“image1917.jpeg” alt=“image1”>

Keywords as alt-text.

<img src=“image1917.jpeg” alt=“Red Baron Richthofen Plane Pilot”>

It is always necessary to have an alt-attribute, but the alt-attribute does not always have to be completed. An empty alt-attribute tells the screen reader or search engine that the image is decorative and not integral to understanding the content.

<img src=“image1917.jpeg” alt=“”>

Why is alt-text important?

As alt-text is hidden within the e-book or web page code its inclusion is often overlooked by content providers. What is unseen is forgotten. The WebAIM Million survey of the top 1,000,000 homepages discovered that 68% were missing relevant alt-text.

The dataset was 38,426,701 images, giving an indication of the scale of the issue. Half of the images on the top million websites are silent: inaccessible and undiscoverable.

In addition, academic teaching has witnessed a visual turn in recent years. The silence of the image within textbook and reference content negatively impacts the user’s learning outcomes. The provision of alt-text therefore allows content providers to tell the whole story of their content to their whole audience. Human or not.

The benefits of alt-text.

• SALES. Increase sales with quality content and design.
• LEGAL. Comply with international accessibility laws.
• COMMERCIAL. Create a competitive edge.
• EDUCATION. Improve learning outcomes.
• INCLUSION. Promote equal access to information.
• CORPORATE. Tell a positive social responsibility story.
• AUTHORS. Help authors tell their whole story.
• CUSTOMERS. Reach new audiences.
• USABILITY. Enhance the user reading experience.
• DISCOVERABILITY. Improve content discoverability.

The challenge of writing alt-text.

It is a challenge to write useful alt-text, so textBOX have developed the focus|LOCUS method to simplify the creation of meaningful alt-text. Our 10 rules for writing useful alt-text are:

1. FOCUS

Select the main subject of the image, the focus, and build the description around this element using the additional details within the image (locus elements).

2. STRUCTURE

Enable the user to visualise the image.

3. CONTEXT

The context of the image is critical and determines the focus of the description.

4. STYLE

Alt-text must be written with a simple sentence structure. Avoid complex punctuation, characters or organisational elements like bullet pointed lists as screen readers will not recognise them.

5. DETAIL

Include all relevant details to encourage user understanding.

6. USE DESCRIPTIVE LANGUAGE

Use precise and evocative language to convey meaning and encourage immersion.

7. DESCRIBE, DO NOT INTERPRET

Be impartial and convey the same information available to a sighted user.

8. BREVITY

It is good practice to limit the alt-text to 1-3 sentences for e-books and 16 words for website content.

9. PUT YOURSELF IN USER’S SHOES

Think about what information the reader needs from the image.

10. ACCURACY

Test accuracy by trying to visualise the image from the completed description.

Writing for academic content: Accessibility

When writing alt-text for academic content the aim is to provide a brief overview of the content. With complex content the alt-text acts as an introduction to the image and, depending on context, a detailed description is provided within a linked long description.

For example, the description of the two images below provides enough critical information about the images for the user to decide whether they require more information from a long description.

A side-by-side comparison of a photograph of Baron Richthofen’s Flying Circus air squadron during World War and the 1969 album cover of Led Zeppelin 2. The Red Baron sits in the cockpit of his Fokker fighter plane surrounded by his squadron. The album cover adapts the photograph to integrate members of the band into the image.

Writing for website content: Discoverability

When writing alt-text for website content it is important to avoid the temptation to try to game the search engine algorithm by “keyword stuffing.” A balance is achieved by using a keyphrase—a keyword-optimised, natural sentence that tells the story of the image that is relevant to both a reader and search engine.

This Discover method embeds accessibility and discoverability within the alt-text.

alt="The Led Zeppelin 2 album cover is adapted from a photograph of the Red Baron Richthofen."

Conclusion

Writing alt-text can be a challenge, but it offers content providers a significant opportunity to engage with their audience whilst simultaneously providing a powerful marketing tool. Due to its hidden nature alt-text is often forgotten, but the coding underworld is a rich environment and enables the translation of the visual into the textual.

A picture can tell a thousand words and this article is a thousand words long. Precisely.

Image sources:

• Red Baron: Wikimedia Commons
• Led Zeppelin: Wikimedia Commons