Alternative (alt) text is descriptive text attached to visual elements, like icons, images and photos. Alt text rendered by web and PDF document accessibility tools like screen readers that can't "read" visual elements like they read text.

Why is alt text important?

Screen readers (and other assistive technologies) read out alt text as an alternative to the visual experience. Alt text allows these and other users to understand the context and content of visual elements.

Accessible alt text is required under the Web Content Accessibility Guidelines (WCAG) which many laws like Section 508 (United States), and AODA (Canada) refer to.

When should I add alt text or mark visuals as decorative?

Certain visual elements in your design are decorative and don't need to be described for screen readers.

Having trouble determining what is a decorative element and what requires alt text? Refer to the comparison chart below:

What alt text should I add to decorative images?

For decorative images, use the alt text "Decorative image" or "Decorative element" to tag the image; there is no need to describe the particulars. A screen reader will skip over elements marked "decorative".

How do I write accurate and helpful alt text?

The easiest way to write helpful alt text is to imagine you are describing an image to someone who can't see it. What do they need to know about the visual? What context is relevant, and what is too much?

Alt text should give details about non-text content that is:

• functional

• informative

• contextual

• focused

Determine whether the image is meant to convey specific information or if it is meant to evoke a feeling or emotion.

What is 'non-text content'?

Specific content might be something like:

• an image of a product that is available to purchase

• a company logo on a report

• a video of a couple on a travel page

When describing content, consider what the focus of the description should be.

Consider this image:

You can describe this image in many different ways, depending on its purpose in the context of where it appears.

• On a webpage with a recipe for this dish, identifying the dish by name and describing its components and how it appears (e.g., "A bowl of whipped yogurt dip drizzled with olive oil and sprinkled with sprigs of dill and spices appears on a light grey table next to a piece of brown, crusty bread.")

• In an ad for tableware, where the bowl is a product for sale (e.g., "A modern earthenware bowl, about 6" across, with a speckled grey finish sits on a table. The bowl contains a yogurt dip and appears next to a piece of bread.")

• On a website for a dairy product company (e.g., "A bowl of dip made with fresh, locally sourced organic dairy yogurt, appears on a table next to a slice of brown bread.")

Should I include text in the alt text describing non-text content?

An image, video, or other element of non-text content may include text or other characters that you might need to describe in alt text.

In the animated GIF above, a toddler is standing in front of an adult. The toddler is holding a box with writing on it. You may describe this image several different ways, depending on the context in which it appears:

• On a website with an article about parenting (e.g., "A 2-year-old boy stands in front of his mother, wearing a white t-shirt and jeans and a zip-up hoodie. The hood is up and two small ears on the hood make it look like the boy look like a teddy bear. His mother kneels behind him, helping him stand and hold a board game box.")

• On a website advertising children's toys and boardgames (e.g., "A toddler holds the party game 'Twister' in a box. His mother, who kneels behind him, is helping the boy stand and hold the box.")

• On a website advertising children's clothing (e.g., "A two-year old boy wears one of our plush, fuzzy Teddy Bear hoodies in the color Brown, with two bear ears on the hood. His mother kneels behind him, helping the boy stand and hold a box.")

Depending on what information is important for the reader to understand, the alt text can shift the focus to highlight or minimize details, including any visible characters like text or numbers that appear in the non-text content.

How do I write alt text for images of pure text?

It's always better to use text than images of text when you want to include important information in a document or design.

If you are using an image of text, simply write in the alt text the text as it appears in the visual element.

The above image, showing an "informational" block of text, should be described with alt text that reflect exactly what is written in the text in the image:

"Writing alt text? Ensure that any images of text are transcribed exactly as they appear. No need to include "An image of text that reads..."; a screen reader will automatically identify the element as an image."

How do I include complex data in alt text?

Some visual elements in your design may include complex data or a large amount of data; elements like graphs, tables, charts or maps.

Take the flowchart below, for example. In the context of this article, this graphic is meant to present an example of a complex image. It is not necessary to have the alt text describe the entire contents of the image.

Short alt text gives a simple description of a visual element that displays complex information.

Use short alt text when you want the reader to understand what content is in a visual element, but the fine details aren't necessary.

In this case, short alt text for the above image might read:

"A flowchart titled 'Should You Rent or Buy?'"

However, in an article about the pros and cons of renting and buying, describing the contents of the image in detail is crucial to a reader understanding the content.

Long alt text for this image should provide all the detail necessary for a visually impaired reader to understand the information the visual is trying to communicate.

Long alt text for this image might look like:

"Flowchart titled 'Should You Rent or Buy?' The starting box contains the question 'Are you planning to stay for more than 5 years?', with two subsequent boxes: 'Are you are a financially stable position?' and 'Can your budget handle mortgage, taxes, maintenance and other costs?' Possible answers to all questions are either 'yes' and 'no'; all flows end in a box either marked 'Rent' or 'Buy'. Flows ending in 'Rent': 1. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? No. 2. Are you planning to stay for more than 5 years? No; Can your budget handle mortgage, etc.? No. 3. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? Yes; Can your budget handle mortgage, etc.? No. Flows ending in 'Buy': 1. Are you planning to stay for more than 5 years? Yes; Are you at a financially stable position? Yes; Can your budget handle mortgage, etc.? Yes. 2. Are you planning to stay for more than 5 years? No; Can your budget handle mortgage, etc.? Yes."

How can I summarize data in a chart or infographic?

Long alt text descriptions can get, for lack of a better word, long.

Try to keep the information as simple and succinct as possible, as much as you can.

In the bar chart below, comparing the frequency with which marketers create data visualizations, the long alt text description should include the data and meaningful context relating to what the chart represents.

The long alt text description might read like this:

"A bar chart titled 'Marketers create data visualizations regularly'. Most (48% of) marketers create data visualizations every week. Next is 37% of marketers, creating every month. The second lowest is 10% of marketers creating every few months; and only 5% of marketers create once or twice a year."

Quick tips for writing meaningful alt text

• Be succinct and use plain language

• Use active voice

• Don’t include words like “picture of…”, “photo of…”, or “icon of…”. Screen readers announce the presence of images, so these descriptions would be redundant (except in cases where the medium is critical to the context of the visual)

• Avoid abbreviations

• Always use a period (punctuation mark) at the end of alt text

Curious about upgrading? Compare our plan features side by side.

Start designing!