Accessible images guide

So you’ve always wanted to make your website accessible for people who use screen readers, but have no idea how? Well, that’s where Represent Me was a short while ago. Two months and almost 2,000 images later, and we’re finally feeling confident about writing alt text, and we’d like to use this opportunity to share what we've learnt with you!

Disclaimer: While we hope this guide will help demystify alt text and help you get started, please keep in mind we are still learning and are not experts in this specific field of accessibility.

What is alt text?

Alt text refers to a text-based description of non-text-based content on your website.

Non-text-based content might include:

Images
Slides (especially when uploaded as images)
Graphs (especially when uploaded as images)
Tables (especially when uploaded as images)
Buttons

Where does alt text go?

Alt text usually goes within an <img> tag. For example:

Why is alt text important anyway?

Alt text allows a person who is blind or vision impaired to access the content and functionality of images and other non-text-based content on your website.

The first guideline of the Web Content Accessibility Guidelines 2. talks about including text alternatives for non-text-based content.

In particular, WebAim talks here about how alt text should aim to convey the function and content of an image or non-text element to the user.

Content means what information a user gains from viewing the image. This might include anything from the mood and tone of an organisation or image to statistical information from a graph or table. We’ll get into this more as we go.

Function means whether the image does something aside from being an image. Taking a user to another page when clicked, opening a menu, or returning to a previous page are all examples of the function of images. This is described further in our section What counts as a functional image? below.

Do I always need to put an alt tag, even if there’s no function or content to be described?

Yes!

Every <img> tag needs to include an alt tag.

Otherwise, a screen reader will read out the source of the image and this will likely be a pile of nonsense for the person accessing the image.

For images that have no function or content to be described, WebAIM recommends using alt="". This will allow no text to be read aloud for the image.

What counts as a functional image?

A image with a function will generally refer to an image that is also a clickable hyperlink to somewhere else.

If there is no text within the same hyperlink tag that the image is in, then you will need to add alt text describing what the function of the image is (e.g. click to move to contact page).

If there is text within the same hyperlink tag that the image is in, Daniel Goransson explains here there’s no need to add the function of the image.

Do all images have content in them? How do I know which ones do?

Excellent question! This is covered more thoroughly below in How can I do alt text effectively for an image?, but we’ll mention it here as well.

Some images will communicate something to the viewer. This might be about the content of the article, website, or story. The content deemed relevant will depend a lot on context.

Sometimes, an image might be adequately described or explained in the text of the web page itself. In these cases, adding the content again in alt text would not be needed (so, an alt="" would suffice, provided there was no functionality to the image).

There may also be some images that do not add any further content to your webpage. These are known as decorative images, and do not need to be described in alt text. Again, make sure to add an alt="" and describe any functionality!

What are the formatting conventions for alt text?

Because each screen reader operates slightly differently, conventions for alt text may vary.

Here are some common things of note, using Daniel Goransson’s guide to alt text:

DO NOT state the image is an image. The <img> tag has already performed that role.
Ending alt text with a period means the screen reader will pause before continuing.
Including periods between segments of alt text may help break up the reading.
Use single quotation marks rather than double quotation marks. This will make sure the alt text string stays intact.

Some punctuation may not be read out by a screen reader, depending on the software settings. There are some symbols that are read out by most screen reader software on default settings, as identified by Paul Bohman in this article:


@ (the at symbol)
& (ampersand, written either as & or &amp; in the markup)
/ (slash)
© (copyright, written as &copy;)
® (registered, written as &reg;)
™ (trademark, written as &trade;)
¶ (paragraph, written as &para;)
• (bullet, written as &#8226;)
$ (dollar)
€ (Euro, written as &#8364;)
£ (British pound, written as &pound;)
¥ (Yen, written as &yen;)
% (percent)
½ (one half, written as &frac12;)
¼ (one fourth, written as &frac14;)
¾ (three fourths, written as &frac34;)
° (degrees, written as &deg;)

Other punctuation and symbols may be read out by particular screen readers. Paul covers this extensively in this article.

Email addresses:

Spell out each symbol, such as "at" for @ and "dot" for periods
Make sure you spell out each abbreviation as individual letters (QRM would become Q R M)

How much should I write?

Less is more. This helpful guide from Moz, a company specialising in Search Engine Optimisation, tells us that many screen readers will stop reading after approximately 125 characters. That’s less than the old Twitter character limit!

Flowery language and poetic expression are not needed here. Short descriptions of content and function will do the job just fine.

How can I do alt text effectively for an image?

Remember, an image is a form of communication. Catherine McNally, Associate Product Manager from Phase 2, talks here about considering the context of your image, what you are trying to communicate with your image, and who you are trying to communicate this to, when writing alt text. This is also covered by Daniel Goransson, a web developer and screen reader user, here.

The following four questions may help guide conversations around this:

Who are the people likely to be accessing the image?

This is your target audience, and will be determined by the design and purpose of your website.

What message or impression do you hope people who access the image will receive?

This may not be a straightforward ‘message’ in a statement, but rather a mood, tone or element of culture. These are a lot harder to describe in words than a straightforward statement, but are super useful and important to ensuring all people can access your website.

If you’re not sure what you’re intending to communicate from your image, you may need to rethink why you have included it and perhaps even whether the image is needed.

Is this message or impression conveyed elsewhere in the main content of the web page?

If yes, then there is no need to repeat this within the alt text of the image.

However, you still need to add alt text if the image has a function. If the image is linked with a text element that explains the functionality of the image (e.g. a text element reading "Click this button to continue"), then the functionality does not need to be explained in the alt tag.

How can that message or impression be conveyed in words rather than images?

Writing alt text involves considering images in a different way. The following sections will help you grow more comfortable with this process. Think about what the image conveys to a sighted person. This may include:

The time of day (morning, evening, night)
Whether it is indoors or outdoors

If the image includes a location or part of a location, think about:

What mood or feeling the location conveys (e.g. do the shadows create a mysterious mood, do the bright colours create a welcoming and friendly mood)
Whether you are making assumptions about where the location is (e.g. if you see a table with food on it, but no sign it is in a coffee shop, don’t say it’s a coffee shop)

If there are people in the image, think about:

What actions they appear to be doing, in relation to each other or other things in the environment
What expressions are on their faces (e.g. smiling, smirking, frowning, confused-looking, scared-looking)
Where they are situated within the environment
How their gender identity appears (use masculine, feminine, and gender ambiguous to avoid making assumptions)

If there is a group of people in the image, think about:

Diversity / lack of diversity within the group (e.g. do all the people appear of the same ethnicity, same gender, etc)
The expressions on their faces
How they are positioned in relation to each other (e.g. are they close together, far apart, with their arms around each other?)

Think about the concepts which may be difficult for a blind, vision-impaired or non-sighted person to comprehend from the description. This may include:

Colours. Try to only mention relevant colours (e.g. colours which differ considerably from the norm, or which have particular relevance beyond a visual sense).
Lighting. Often this can be incorporated as a time of day, location, or mood.

Instead, think about what concepts, moods or feelings the image is trying to convey.

If the image is of a well-known character, it would be appropriate to use their name - but make sure you always add a description too! Not everyone knows who that character is, and not everyone has a visual reference for what that character looks like.
If the character within the image is not well-known, just a description is fine.

But what if I have to do captions or dialogue?

Wherever possible, take these out of your alt text and have them as separate text within your webpage.

If the text required is excessive and may not be relevant to all who access the website, consider using a summary below the image and having a link to a separate webpage with a full description.

For pages with multiple images where this may be the case, consider creating a "screen reader friendly" version of these pages with full descriptions of each image. This works particularly well for PowerPoint slides uploaded as images, or diagrams.

NOTE: If creating a new page, make sure you use heading tags <h1> <h2> etc. to designate areas of information. Screen readers will navigate through these headings to access information.

How do I create alt text for a graph or table?

You should provide a summary of what the graph or table is communicating first.

It is then necessary to provide a description of each element on the graph or table. This may not be something every person who accesses your site wishes to access, so it might be best to have a link to a page with a full description of the graph or table.

Graphs

Make sure you have access to the raw data to put accurate numbers into your alt text.
Highlight the segment of the graph, what it is representative of, and what value it holds (e.g. Column 1. Mobile games, 51.).

Tables

Highlight the row being described, and the value it has for each heading (e.g. Row 3. Number of players, 6. Enjoyment level, 4. Likeliness to recommend, 6.).
Resources

Alt-texts: The Ultimate Guide: an article by Daniel Goransson, a screen reader user, about what to consider when writing alt text

WebAIM: Alternative Text: an article covering what alt text is, what is conveys, and how context can influence this, as well as edge cases

How to Meet WCAG2: a quick reference guide for the Web Content Accessibility Guideline regarding alt text

Character Counter Online: an online character counting tool.

No More Excuses - The Definitive Guide to the Alt Text field: a blog post by Catherine McNally of Phase 2 about how to do alt text effectively

What is Alt Text: an article by Moz with examples of what is effective and ineffective alt text

Why Don’t Screen Readers Always Read What’s on the Screen?: an article by Paul Bohman about which symbols and characters are read by screen readers