Looking to make your designs, documents or web pages more accessible, inclusive and user-friendly? If so, you need to get familiar with image alt text. Image alt text helps make visual content accessible to all users, particularly those with disabilities.
In this guide, I’ll break down everything image alt text, including what it is and where / how you can apply alt text to a variety of visuals. Plus, writing tips and best practices to help you keep accessibility top of mind, and examples, templates and tools to use too.
Click to jump ahead:
- What is image alt text?
- Why is image alt text important?
- How to write good image alt text (best practices & tips)
- Do you need alt text for all images?
- Image alt text FAQ
What is image alt text?
Image alt text, also known as alternative text, alt tags, alt descriptions or alt attributes, is descriptive text that’s attached to visual elements (like icons, graphics and photos) in your designs, web pages or documents.
A key component of accessible design, alt text allows those with visual disabilities (or different access needs) to understand the appearance and function of non-text content using screen readers or other accessibility tools.
These descriptions also appear in place of an image should it fail to load properly.
Create a logical experience for those using screen readers by adding alt and text tags and editing the reading order of your designs with Venngage’s accessibility tool.
Why Is image alt text important?
Image alt text improves accessibility and usability
Think of all the critical info visuals communicate in everyday life. Now, think of what it would be like to try to understand or learn something with no visual clues to help you out.
Image alt text is important because it provides an alternative to visual experiences, allowing those with disabilities to glean information from all elements on a page. This provides important context that those of us with normal vision take for granted — which is why the Web Content Accessibility Guidelines (WCAG) 2.1 AA mandate their use.
Did you know? The WCAG 2.1 is a document that defines accessibility standards and provides instructions for making digital content — such as colors and fonts — accessible to people with sensory impairments.
Without alt text, around 50 million individuals with blindness would lose out on the contextual and descriptive information images provide. And that’s not counting the millions more who benefit from more accessible design choices!
So to ensure your content is inclusively designed, accessible and capable of communicating meaning effectively to all, you need to include alt image text.
Related: ADA Standards for Accessible Design: How to Be Compliant
Image alt text creates better user experiences overall
Even for those with normal vision, including image alt text is vital for improving the overall user experience (UX) of your designs or web pages.
For example, if someone has poor internet connection and an image fails to load, attaching alt img tags ensures they’ll still be able to understand what it conveys.
Image alt text is also useful for those with sensory/cognitive processing issues or learning disabilities. It’s not uncommon for folks to use accessibility tools, or turn off image loading, to minimize distractions. So by keeping accessibility top of mind, you’ll ensure your designs can effectively reach everyone.
Image alt text improves image SEO
Looking to drive organic traffic to a website? If so, you need image alt text. Google’s search engine algorithms use alt tags to understand, index and rank page content.
Think this only applies to Image Searches? Not quite. Since Google knows how engaging visuals are, its search engine prioritizes them by frequently displaying image packs (i.e. horizontal rows of linked images) on the first page.
For example, if I search email newsletter template on Google, various Venngage templates show up directly below the blog post — an enticing visual display made possible by image alt text.
By adding alt tags, you’ll be doing yourself, your site and the search engines a solid.
How to write good image alt text (best practices & tips)
The easiest way to write helpful image alt text is to imagine you are describing an image to someone over the phone. Ask yourself: what would they need to know about the visual? And what context is relevant that could aid their understanding?
In other words, your alt text should provide information that’s
- functional`
- informative
- contextual
- focused
Remember that your primary job is to reflect the 1) content and 2) context of the image in a concise manner. This means your alt description —and the amount of details included therein — will change based on where it shows up and the image’s purpose in your design.
Consider the following image:
Depending on the image’s purpose in the context of where it appears, the image should be described differently. For example, if this image was used…
- On a webpage with a recipe for this dish, you should identify the dish by name, describe its components and how it looks (e.g. “A stack of three pancakes drizzled with maple syrup, topped with a whole strawberry, two blueberries and a dollop of whipped cream on a round blue plate”)
- In an ad for a diner, you’d need to include information about the restaurant, the dish name, and details about its appearance and components (e.g. Egg & Co’s Pancake Special featuring a stack of three griddle pancakes drizzled with maple syrup and topped with fresh blueberries, strawberries and a dollop of whipped cream on a round blue plate.)
- On a branded website advertising artisanal flour, you should include a more focused description of the product for sale (e.g. “A stack of pancakes made with stone-ground cracked wheat flour are drizzled with maple syrup and topped with fresh fruit and whipped cream.”)
So far, so good? Let’s get into the particulars…
Writing image alt text for pure text images
Because images of text represent a potential barrier for users with different access needs, it’s always better to use actual text (rather than an image of text) when including 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.
For example, the above image of an “informational” block of text should be described with alt text that reflects exactly what’s written:
“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.“
Writing alt text for charts, infographics & more
Some images include visual elements that contain large amounts of data, which the WCAG defines as complex images. These elements include infographics and data visualizations like graphs, tables, charts and maps.
Here’s one such example of a complex image:
For a lot of people getting comfortable with alt text, these kinds of visuals can be confusing to navigate. But the key once again is to let the context determine the depth of detail required.
Image alt text for charts and graphs
Wondering whether you have to explain every word on this flowchart to create accessible alt text?
Not necessarily. In the context of this article, this graphic is meant to present an example of a complex image — so it’s not necessary to have the alt text describe everything.
This is called short alt text. Short alt text provides a simple description of visual elements that display complex information.
Use short alt text when you want the reader to understand what content is within a visual element without needing the finer details.
Here, short alt text for the above image might read: “A flowchart titled ‘Should You Rent or Buy?'”
However, if this image was in an article about the pros and cons of owning properties, describing the content in detail would be necessary to facilitate full understanding.
This kind of alt text description is known as long alt text. Long alt text provides all the detail necessary for a visually impaired reader to understand the total information communicated in an image.
Good 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.”
As you can see (err, read), these descriptions can get…well… long. But try to be as succinct as possible anyways.
Let’s take a look at another example.
In this bar chart comparing the frequency with which marketers create data visualizations, the long alt text description should include the data and any meaningful context relating to what the chart represents.
A good long alt text description might read something 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.”
Writing image alt text for infographics
Infographics are the perfect example of a complex image, because they can include all of the above. But what does that mean when it comes to alt text?
Again, it all depends on context. Let’s use the infographic below as an example.
To write infographic alt text, the first step is to define the context. Here, it serves the purpose of showing an example of how to write alt text, so we can get away with using short alt text (i.e. “Infographic template titled ‘How the Heart Works'”).
However, if this image was a PNG file in a blog about cardiovascular disease, you’d need to write long alt text that describes every component.
“Infographic titled ‘How the Heart Works’. In order for the heart to function properly, the four chambers of the heart and valves must operate in a highly-organized manner. Highly organized contractions of the four valves allow the heart to pump blood in a regular way. The circulatory system of the human body is attached to the heart and color-coded in red and blue. The Right side of the heart is blue and contains the Right Atrium above the Right Ventricle, and between them is the Tricuspid Valve. The left side of the heart is in red and contains the Left Atrium above the Left Ventricle…” etc.
Note that the long alt text description includes the text content in this scenario because its shown an image file within a blog. If your infographic is a PDF or HTML file, you don’t have to re-write text!
Still, it’s tedious. I get it. But…there’s a solution!
With Venngage’s Accessible editor (available for paid plans currently), you can create your own accessible infographics (or any other visual, for that matter) in minutes, and streamline the image alt tagging process to boot.
All images within your design get an alt text description field, so you don’t need to worry about adding them manually. The editor also automatically labels icons as decorative to save you time, and a built-in accessibility checker ensures everything — from your color palettes, to your title tags — are up to code.
Accessibility, check!
Related: Learn how to tag and add alt text to elements in your design
Quick tips for writing alt image text
DO be concise, and use plain language.
This is not the time for long-winded sentences and flowery descriptions! Be as straightforward as possible to accurately describe what you’re seeing.
For example, the alt text for this social media graphic does not need to specify the kinds of masks in the picture. Since its purpose is to show gratitude for those who’ve taken preventative measures (and it would presumably be posted on a branded account), good alt text might say something like:
“Cartoon illustrations of face masks next to text that reads ‘Thank you for doing your part!’”
DO be mindful of grammar and spelling.
You can enhance the screen reader experience by writing in complete sentences and using proper grammar. That means…
- capitalizing the first letter in a sentence
- ending sentences with a period
- avoiding abbreviations
- using correct spelling
DO test things out when in doubt.
Unsure whether your image alt text is sufficient? Use a screen reader (or another accessibility application, such as ChromeVox) to test your alt text and make sure it’s an accurate, succinct description.
DON’T start alt text with redundant phrases.
Adding descriptions like “ Image/Picture of ___” is unnecessary (read: annoying), as screen readers will automatically announce an image as such.
DON’T make assumptions.
Describe, don’t editorialize. Unless it’s necessary to add helpful context, making assumptions and inferences is unhelpful. Avoid guessing things like ethnicity, gender or what’s happening out-of-shot.
DON’T go keyword crazy.
While alt text can help search engines content and designs, using keywords unnecessarily will cost you. “Keyword stuffing” is an accessibility / SEO no-no that hinders the experience of those using screen readers, and search engines could penalize you as a result.
Do you need alt text for all images?
You should only add alt text to visual elements that convey important information in your design. For example…
Decorative images
If your design features graphic elements purely for aesthetic value, it’s not necessary to add alt text. Doing so runs the risk of confusing the reader or cluttering the screen reader experience.
Dividers and background images are common examples of decorative images. Take this modern hiring flyer template:
The poster background and geometric shapes in this flyer design do not add context or convey meaning — so don’t bother wasting words!
(Most) icons
Being redundant is another faux-pas when it comes to alt text. While icons can add visual interest, they’re not used to communicate anything new for the most part.
For the above comparison infographic, it wouldn’t be necessary to add alt text to the various icons, since the meaning is described by the text labels. That tends to be the case for most logos too.
Note: there are a few exceptions to this rule.
When an icon is a button or linked, you should add alt text if you need to convey functionality.
For example, the alt text for a linked Facebook icon in this email newsletter footer should read “Visit the Ignite Facebook page.”
It’s also a good idea to add alt text to an icon if it contains descriptive information not written elsewhere (e.g. a poster with a Twitter icon followed by a brand’s username should clarify which accounts. Try adding alt text that says something like “Find [Company] on Twitter”.
Images described by nearby text
Again, do your best to avoid redundancies. There’s no need to repeat what’s already been said.
Image alt text FAQ
How do I add alt text to JPG?
You can add alt text to a JPG image file different ways depending on your document type and platform. To add alt text to a JPG in Microsoft Office/Windows, right-click the image, select Format Picture > Layout & Properties >Alt Text.
To add alt text to a JPG in a Google Workspace, right-click the image and select the “Alt Text.
To add alt text to a JPG in WordPress, click on the Image block to open the Image settings in the Block tab on the sidebar and fill in the alt text and title attribute space.
Finally, you can add alt text by editing the HTML code directly. To do so, implement the alt text as an attribute to the IMG tag by adding “alt=”[your alt text]”.
How do I get alt text from an image?
The easiest way to check an image for alt text is to right-click an image and select the “Inspect” option on Google Chrome. A pane displaying the page’s HTML will appear, and all you have to do is look for the “alt=” tag. What follows will be the image’s alt text description.
Alternatively, you can enable a screen reader (Window’s built-in Narrator can be accessed via the Start Menu’s search function; Mac’s VoiceOver Utility can be accessed via Finder) and hear the image’s alt description read aloud.
When you provide alt text for an image, you put audiences first
Designing for accessibility isn’t just good practice — it’s the right thing to do. It guarantees all users, regardless of their physical or cognitive abilities, can understand your content and not be excluded by the design choices you make. And image alt text is an essential part of that effort.
I hope these tips have helped you create your own amazing, inclusive communications. Be sure to give Venngage’s accessible editor a try, and put your new alt image tag knowledge to good use. Our easy-to-edit templates are ready for you!