CATEGORY: AccessibilityBest practice

Writing effective alt text

Inconsistent use of alt text, or misunderstanding of what is required, is one of the most common problems we find when reviewing our customers’ emails. These 5 golden rules make your alt tags more useful to your email recipients and equally apply to other forms of digital content, including websites (which will also help make your website more likely to be legally compliant).

What is "alt text"?

Alt text is a text alternative defined for images. The typical image is coded in HTML in the following form: 

<img alt="text alternative">

You might never actually see the code of the page when you are editing your web site or email when you are adding new content, instead you will probably use a CMS (Content Management System) of some kind or an email design/editing tool for example, e-shot’s Smart Editor.

In either of these scenarios, when you add an image you should get asked for "alt text" or a text alternative (it may be named slightly differently, but you should be asked for some kind of name for the image, chances are this is the alt text).

What is the main purpose of alt-text?

Not all users can see the images. Visitors to your site or recipients of your emails may be using assistive technology, like screen readers or other text to speech software, which reads the page out loud. This software will read the alt text instead of the image.

• Dyslexia software such as BrowseAloud or TextHelp speak pictures as text

• Screen reading software such as Jaws of VoiceOver describe images for blind or visually impaired users

There are other situations when the alt text is used too, if a user has images turned off e.g. because that is the default for their email client or because they use a very slow internet connection, then they will see the alt text instead of the image. 

What a missing alt attribute means for the reader/technology:

• Users struggle to read text embedded within images

• Valuable information is missing

• Assistive technology, like screen readers, would read the filename instead which causes “verbal clutter” and detracts from clarity and understanding.

Are you using alt text properly?

These rules, devised by AbilityNet, are aimed at content editors but may also be useful for anyone producing digital content.

1. Every <img> must have an alt= attribute more commonly referred to as “alt text”

2. Describe the information, not the picture.

3. Functional images require descriptive alt text.

4. Images that contain information require descriptive alt text.

5. Decorative images should have empty alt text.

So, what do you need to do?

Remember rule 1: Every image must have the alt attribute included

There is no exception to this. The <img> element must always contain the alt= attribute. It doesn't matter what the image is used for, or what it shows, or even how small it is.

What text you should use for the alt attribute depends on the type of image and is explained below, but you always include either alt="" (empty alt text) or alt="descriptive text" (descriptive alt text).

Remember rule 2: Describe the information, not the picture 

In other words, you almost never describe what the picture looks like, instead you explain the information the picture contains.

Sounds obvious? We have frequently seen this happen, where the content author did not really comprehend what the alt text is there to do, usually on sites that had made an effort to improve accessibility but misunderstood the requirement.

The alt text for this image should be alt="twitter" or similar, depending on the context and how the image is being used - it should not be "blue bird".

Types of images

So, what exactly should the alt text be? Well, it depends on the image… 

Luckily, there are only three real classifications of images you need to consider:

1.     ‘Functional Images’, that perform an action (links, buttons etc)

2.     ‘Informative Images’, that contain information.

3.     ‘Decorative Images’, that are purely for aesthetic effect.

When deciding how to make an image accessible, first you need to choose which type of image it is from the above list.

What is a Functional image?

A "functional" image is an image that performs an action or has some functionality. So it should be relatively easy to check if an image is active or not:

They are used in buttons, links and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo”.

Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content.

Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.

Related WCAG resources:

WCAG success criteria and techniques from different conformance levels:

• H36: Using alt attributes on images used as submit buttons

• H37: Using alt attributes on img elements

Remember rule 3: Functional images require descriptive alt text.

What is an Informative image?

If the image is not an active image (type 1 above), then you need to check if it contains information or not.

Sometimes this is easy, e.g. a chart or graph will contain some information, or an image of text contains information.

Unfortunately this is not always straightforward. In some cases you will need to use your judgment to decide if an image contains information or not.

The essential question is, would the user miss something if you remove the image?

If the user would miss out on some information without the image, then it is a "type 2" image.

If the image is just for decoration, or if the same information is already in the text somewhere, then it is a decorative image.

In the words of W3C,

“Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image.

In some situations, a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information. Whether to treat an image as informative or decorative is a judgment that authors make, based on the reason for including the image on the page.”

If an image contains information, then you need to offer this information to the user in an alternative format. If the user can't see the image, they need to get the information in another way. The alt text should be a brief description of the information.

Text within images:

Avoid using images of text, or text within images, as although you can put the text as alt text, this can still make the information less accessible to readers using adaptive techniques, for example; Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colours can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized.

That said, if you really do need to show text within an image, then in almost all cases the alt text will be the text shown in the image. After all, that's usually the information the image contains!

Complex images

For more complex images, like charts and graphs, there is likely too much to include as part of the alt text, as the alt text should be kept very brief. In this case; a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.

More information about complex images can be found in the W3C Guidance – Tutorials: Complex Images

Groups of images

Sometimes groups of images are used together to represent one piece of information. For example, a collection of star icons that together represent a rating. In this case, only one of the images needs a text alternative to describe the entire collection, while the other images have a null (empty) alt attribute so that they are ignored by assistive technology.

In other cases, a group of images may represent a collection of related images. For example, showing a collection of art impressions that are thematically related. In this case, each image needs its text alternative that describes it individually, as well as its relationship within the group.

Related WCAG resources:

WCAG success criteria and techniques from different conformance levels:

• G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

• H37: Using alt attributes on img elements

• G196: Using a text alternative on one item within a group of images that describes all items in the group

• H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Remember rule 4: Informative images require descriptive alt text.

Decorative images

If the image is not a functional image (type 1), and if it doesn’t contain information (type 2), then it is a decorative image.

Images that are only for decoration should not have any (descriptive) alt text, instead you should use the empty string as alt text.

Remember rule 5: Decorative images should have empty alt text.

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the content more visually attractive.

 

The alt text should be the empty (null) string, i.e. alt="". The code for your image should look like this:

<img alt="">

Even if the image is for decoration, it still must have the alt attribute (remember rule 1!), but it doesn't contain any text.

If you read somewhere that certain images should have no alt text, what is meant is that the alt text should be empty. To repeat: Never define any <img> without the alt= attribute!

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

 

Related WCAG resources:

WCAG success criteria and techniques from different conformance levels:

• H2: Combining adjacent image and text links for the same resource

• H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Tips and Tricks to help you

These are a selection of tips provided by W3C – for their full resource take a look at their tutorial – but these are some that the team here found most helpful:

• Choosing appropriate text alternatives:
  Imagine that you’re reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it’s probably safe to treat them as decorative.

• Length of the text alternative:
  The alt text should be the most concise description possible of the image’s purpose. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed in complex images.

• Superfluous information in the text alternative:
  Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text. People who can see will know this already, and screen readers announce the presence of an image. In some situations, it may be important to distinguish between paintings, photographs, or illustrations, etc., but it’s best to avoid the more generic use of the terms.

Other W3C Resources

• Background information on providing text alternatives for non-text content in How People with Disabilities Use the Web.

• Test the accessibility of images on your site: Quick Checks Image text alternatives.

• Examples of good and bad practice in selecting text alternatives can be found in the Before and After Demonstration (BAD).

 

 

Download our email accessibility checklist