Table of Contents
The internet offers endless information, but accessing it can be taken for granted. Visuals like images are intended to enhance engagement and create a more exciting user experience (UX). But for people with visual impairments using screen readers, online insights could pose accessibility barriers. Image alt text is by default designed to mitigate accessibility barriers by providing context for online web users with visual impairments who depend on assistive technologies, like screen readers or braille displays.
Screen readers help site visitors with visual disabilities interact with websites by audibly reading out the written content and alternative text of images on a page. The key to enabling a frictionless user experience with assistive technologies is to ensure website content, structure, and alt text best practices are implemented with consistency throughout.
Adding alt text to images and visual elements of your websites with appropriate descriptions provides the critical context required for a screen reader to scan, identify, and explain its relevance and contribution to online content. Without alternative text, screen readers can skip images, and simply read out file names. Users may never know the visual exists, or could miss out on valuable information and insights that could be potentially critical to understanding concepts or key messages.
What is Alt Text in HTML?
Alt text is the commonly used abbreviated form of the term “alternative text.” This is the descriptive text included in a website’s foundational Hypertext Markup Language (HTML) code (the code that builds your entire website structure and navigation), describing an image on a webpage.
Alt text can also be referred to as “img alt attributes” or “img alt tags.” You might be wondering, “so what exactly is an img alt attribute or an img alt tag?” This is text that provides context for people who use screen readers and other assistive technology, accurately, concisely, and clearly defining what is in an image and its purpose within the text. It also factors into search engine optimization (SEO) to generate traffic, interest, leads, and engagement through image searches and increase keyword density on your webpage.
What is Alt Text for Images, and Why is it Important?
Image alt tags allow anyone using a screen reader to know and understand what is happening on a webpage beyond the written content. Adding alt text to images is designed to clearly articulate any important or interesting information that is being presented in an image or visual format. For some websites or other digital assets, images may be the key source of instructions given – in the form of screenshots, infographics, and step by step visuals. Alt text accessibility ensures user inclusion for navigation and use of a site, app or platform, especially if it’s rich with visual buttons, or image-based screens.
Visuals and images can also provide more insights or data about the topic of focus. For example, a data display such as a bar chart, a topographical map of a country, or a photo of traffic flow in a city may all be critical to understanding content. Alt text accessibility allows people with visual impairments to access the insights with screen readers or braille displays.
Alt Text in SEO
Go online and search “examples of pie charts” in Google.
These are the results you’ll see:
Google’s initial response to the keyword search generates a collection of thumbnail images you can click, even prior to presenting any organic content related to the search. The thumbnail images are visible as the first option on the Google SERP (Search Engine Results Page) before any organic text in search results by strategically adding alt text to images. Sources indicate that image thumbnails show up in about 40% of desktop SERPs and 65% of mobile SERPs. That’s a heavy load of traffic that could come to your website, and it could lead to measurable developments, like conversions, leads, and increased engagement.
What’s the point? Well, your SEO will directly benefit from alternative text for images. Google crawlers scan the web searching for keywords in queries. Always consider what your online users might be looking for online. If for example, your user is looking at “examples of pie charts,” maybe the actual visual and image thumbnail will be a better indicator of what would be ideal and expected. And if someone was to inquire about “how to make a pie chart,” likely they would want to see a screenshot or something visually instructional to guide them through the process. This is when adding alt text to images directly nurtures and engages site users with better SEO.
Alternative text for images directly benefits search engine optimization. When Google crawlers scans img alt tags to get a better understanding of their context in a webpage and what the image offers and contributes to site visitors, and it ranks images and pages accordingly in the search results. This means that a website that uses these tags could rank higher up on Google SERP, extending the potential for growth with increased traffic with alt text accessibility.
Do’s & Don’ts: When To Use Image Alt Text & When Not
Alt text for images should be used for visual elements on websites such as:
Informative Images
- Typically convey information in images and illustrations that’s critical for the context and understanding of the overall content. The text alternative for these images should hold the image’s essential information, and it can convey emotional implications.
Alt text examples:
If you’re writing an article about hearing impairments or deafness, and there is a section explaining how individuals with hearing impairments learn to communicate through sign language, including an image of the hand positions or gestures that spell out the word “hello” could provide additional value in understanding what signing a word looks like. Informative alt text for this image will ensure individuals who may have visual or cognitive impairments can acquire the same contextual value of the image and what using sign language looks like.
Important note: pay close attention to the information and insight the image provides in a short amount of words. One of the key alt text best practices is ensuring the length of alternative text is under 125 characters when possible, spaces included.
Decorative Images
- Don’t convey information, but rather only provide visual decoration to a webpage. This type of image is best to be skipped by screen readers because it doesn’t contribute to understanding the accompanying text or information. A good example of a decorative image would be a flower or flourish in the corner of a page, or a background image.
Alt Text Examples:
Not Good: including any form of description at all in the alt text and alt text html other than null.
Good: Decorative image alt text should be written as “null” in the alt text
<img alt=””>
(Screen readers won’t waste users’ time by announcing it).
Functional Images
- Used as a button or link, icon or image to indicate a form of functionality, like “save,” “page down,” and other functions when interacting with a web page.
Alt Text Examples:
Alternative text accessibility in this case ensures a user can engage and navigate online spaces with the same functionality as anyone else. Adding alternative text in this case should be a description of the functionality of clicking the image, rather than what the image is. For example, an image of a floppy disk representing the “save” function should be given an alt text including the word “Save” rather than “floppy disk icon”.
Not good: A floppy disc.
Good: Save button.
Images of Text
- Should be avoided if at all possible, except when included in a logo. When used, the image alt text should include the same words as the image.
Alt Text Examples
Not Good: Including this type of image at all. But if it has to be in the content, then poor practice would be alternative text that reads, “this image has text that reads {text here]”
Good: Replicating the exact written content of the words in the image – “Mud is brown, apples are red, grass is green.”
Complex Images
- Infographics or diagrams that should have alt text describing the information provided in the images.
Alt Text Examples:
In this case, an educational resource or presentation could be using an infographic or diagram to demonstrate an idea and make it visually engaging. It’s important to provide the key points that provide insights in the infographic or diagram that helps develop the understanding of their importance within the context of the overall resource and content. If there is text included in the infographic, it must be included in the alt text. Where possible, best practice is to keep alt text at a maximum of 125 characters, but this does not override the need to replicate the exact text featured in the infographic itself.
Not Good: infographic including tips for content
Good: Reaching website content goals and measuring success requires research and time management.
Research: investigating your topic before creating the content is important to provide accurate information and insights. Then you can start planning your timeline in a calendar.
Time: Create tasks and block out dates in a calendar, with every step of the process that’s required to create the right content you need.
Goal: Once you have a plan in place, follow your schedule, and add content into the right areas of your website. You can research your goals and start measuring success rates.
Groups of Images
- Conveying one message together, there should be alt text that describes the overall information for the group of images, not just a single image.
Alt Text Examples
If we are looking at a series of images about bears in the wild, their survival skills, the relationship between mother and cub, and how they hunt, creating a brief, precise description of what the images convey overall in adding alt text to images is what’s required.
Not Good: Bears in the wild
Good: A mother bear protects her cubs walking in the forest, hunting for food, and crawling on trees in their natural habitat.
Image Maps
- With multiple clickable areas, image maps should be described with a group alt text that gives the overall context of the map. Any clickable area should also have its own individual alternative text that describes the destination of the link and its purpose.
If you’re unsure whether an image falls into one of these categories, check out W3C’s Alt Decision Tree to help you decide.
Not Good: map of (city/location)
Good: a map of Paris marking various landmarks and vendors, including The Arc de Triomphe and Eiffel Tower.
Alt text for Arc De Triomphe: The Arc De Triomphe in Paris, France honors French veterans and perished soldiers of the French Revolution & Napoleonic Wars.
Alt test for Eiffel Tower: The Eiffel Tower honored the French Revolution centennial, embodying industrial mastery of Franc at the 1889 World’s Fair.
6 Best Practices to Write Image Alt Text
Adding image alt attributes to pictures doesn’t have to be intimidating. There are even some apps and services that will help you go through your website, alerting you when there is an image that should be tagged to some effort out of the process. This is especially useful for websites with many pages.
Some alt-text best practices by Microsoft and the W3C include:
1. Adding Alt Text to Images That Prioritizes Information
Determine what function or information an image is trying to convey to ensure that you are choosing the appropriate text alternatives with the most important information.
Don’t assign a random, vague, or ambiguous alternative text description to an image simply to avoid scanner alerts or to increase your accessibility score. This could lead to confusion and frustration for a screen reader user. Alt text accessibility is rooted in providing meaningful and functional alternative means of usability. Poor or random alt text descriptions can be arguably worse than having no alt text at all.
2. Write Concise Image Alternative Text Within Character Count
Try to ensure that your alt text is concise and maximum 125 characters or less when possible, spaces included. A simple short phrase or sentence is all that’s needed here, unless it is a complex image that requires more explanation.
3. Implement Engaging Design for Alternative Text Images
Icons with text often lose their text when viewed on smaller screens. Prevent this by ensuring that icons are understandable without text, but also have text descriptions.
4. Use Keywords Appropriately when Adding Alt Text to Images
Make sure that the inclusion of keywords into alternative text descriptions feels natural and is appropriate for understanding the message and key ideas the image should convey to online users. Google algorithms are intelligent enough to distinguish relevance of keywords included versus simple keyword stuffing in attempts to boost SEO. Think of alternative text like any content you write, and make sure keywords are there to serve a purpose.
5. Use Proper Punctuation, Spelling, & Grammar for Alternative Text
Using proper punctuation makes information easier to understand. You should particularly look out for word spacing to avoid words running together when read by a screen reader or replicated by braille displays.
When hiding decorative images, you should also be aware of your spacing when using a null (empty) alt text (alt=”“). If a space is used between the quotes, assistive technologies may still pick it up as alt text and it may become confusing.
6. Don’t Use Unnecessary Words or Information
To describe an object or image, be sure to outline the subject in detail within the setting, point out any actions or interactions, and other relevant information. There is no need to include words like “image” or “icon” because it is announced by screen readers.
Don’t use file names or URLs in the alt text. This can become confusing to a person using a screen reader or braille, and doesn’t provide useful information that provides context.
Improve Your Websites Overall Accessibility
If you haven’t addressed the importance of image alt text on your website it’s never too late. Increasing web accessibility by adding alt text to images is simple and acceptable any time.
UserWay’s AI-powered accessibility solution can help by scanning your website for alt text missing or violations that require remediation with guidelines for fixes, while also providing an overall indication of how your website conforms to WCAG and ADA guidelines.
UserWay’s Widget 4.0 can also be implemented and installed seamlessly on your site to allow your users the freedom to customize their view of your site to suit their unique accessibility needs.
To get started, request a UserWay demo or start your free trial of our widget today!
FAQ
What is an image alt attribute and why is it important?
An image alt attribute provides the context for an image within a digital asset or webpage, providing context for how it relates to the text or enhances information. This text is read aloud to users using screen readers and appears on braille displays, and image alt text is also indexed by search engines like Google. Not only is alt text important for your users to be able to access your website’s content, it also improves your site’s Search Engine Optimization (SEO).
When should you not be adding alt text to images?
Alt text should not be used for decorative images that exist purely for design purposes, such as stock images included for visual effect. These images don’t provide any context or content and may be confusing when read aloud with a screen reader. Decorative images should have the text alt=”” so that screen readers know to skip an image.
What is the difference between alt text and image description?
Although they may sound similar, alt text and image descriptions are not the same thing. Image descriptions are more detailed than alt text, and tend to be longer. Whereas alt text should be kept to 125 characters or less, image descriptions can be as long as about 280 characters.
Alt text provides a brief context for an average image, but an image description will provide more information when necessary, such as when there is a detailed chart, graph, map, or other image that requires more than the usual short text. For example, a map of the United States listing each state and some related data would not fit into an alt text tag. Image descriptions are sometimes linked, rather than set in the image tag itself. It’s an excellent idea to simply add a real text description that’s visible to everyone in the main text, or as a caption near the image, whenever possible.