What is alt text?
Alt-text, the shortened name for alternate text (sometimes called alt tags), is a text description of an image that appears online. It is located in the <img> HTML tag, and is generally not visible on a web page unless the image is otherwise unable to load. Its purpose is to convey the information of the image to users who cannot see it. This may include blind or low vision users and users with poor internet connection when images cannot be loaded, and also includes search engine bots. This means that appropriately implementing alt text is important for both web accessibility and SEO.
When do you use alt text?
First and foremost, every image should have alt text unless the image is purely decorative, or the information in the image is in the body of the page nearby.
What makes an image decorative? Think about the information it provides. If it’s just there to make a page look nicer and doesn’t add any information, it is decorative and the alt text should be left empty.
For example, as delightful as this stock photo of a tabby cat lying on their back is, it probably doesn’t add much information to the type of page it would likely be found on, perhaps a veterinary blog or pet food site. Many header images and featured photos fall into this category: for instance, a photo of assorted fruits and vegetables in a blog post about general healthy eating could be considered decorative. On the other hand, an image that adds to the meaning you’re trying to convey is informational.
Imagine that the image below accompanies an article titled “You Still Store Condiments in the Fridge Door? Try This Genius Kitchen Hack:”
Without alt text, the user would have to go read the whole article to get the crucial information the image conveys: in this case, that the “hack” in question is moving your condiments to the crisper drawer and storing your produce in the fridge door. This is a less egregious example- the information could be found elsewhere, albeit with much more time and effort. But for standalone informational images, alt text is imperative.
Alt text for images containing text
Images that contain text, like event flyers, are almost always informational. All of the text should be included in the image’s alt text. Infographics, charts, graphs, and other complex images are also informational. They will always require alt text unless the information in the image is on the page in text form nearby. Images that are links are also always considered informational and require alt text.
If an image contains too much information to be put into alt text, that information must be located close by in an accessible format. If adding it directly to the page isn’t possible, consider adding a .doc file with the information as an alternative, as these can be read by screen readers. Make sure the link to the file is clearly labeled on the page as the alternative for the image. Some PDF files are also accessible, but they have to be formatted and processed correctly. If you don’t know if a PDF is accessible or not, try highlighting it with your cursor. If you can select and copy/paste the text, it works.
When in doubt, add alt text. It’s not always easy to know what information people get from images, but it’s better to let people find their own meaning than potentially miss out on your content. Plus, it’s always an opportunity to boost your SEO performance.
Why is alt text important?
For accessibility
Alt-text is one of the easiest accessibility measures anyone can implement on their site. Images are some of the most efficient and appealing ways of sharing information on the internet! So, making sure that plethora of images can be understood by all significantly improves both your site’s user experience and the reach of your content. As well, in web accessibility lawsuits a lack of alt-text is the most commonly cited accessibility issue, so ensuring your images are described correctly could save you a big legal headache down the road.
For SEO
Screen readers and search engine crawl bots both read your site’s HTML to get an idea of the structure and content of the page. While screen readers convey that information to a human being navigating a webpage, search engine spiders are analyzing that information to understand what your site is about and how it works. Search engines are constantly striving to train their algorithms to search just like a human, and are now commonly considering a site’s user experience as a ranking factor. In short, the more understandable a website is to a human, the more understandable it is to a spider.
In Google’s own SEO guidelines, they recommend adding alt text for multiple reasons:
“Why use this attribute? If a user is viewing your site using assistive technologies, such as a screen reader, the contents of the alt attribute provide information about the picture.
Another reason is that if you’re using an image as a link, the alt text for that image will be treated similarly to the anchor text of a text link. (…) Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Images to better understand your images.”
So, appropriate and descriptive alt text helps your search rankings in two ways:
- It contributes to your site’s perceived subject matter expertise if the alt text is relevant to your site subject.
- It allows your images to show up more (and more accurately) in image search results.
While alt text is only one of many SEO strategies that improve web accessibility, it’s a great place to start.
How to write good alt text for images
Now that you have a better idea of why alt text is important, you may be wondering how to implement it. To determine if an image needs alt text, you have already asked “what information does this image provide?” and that will help you write the best alt text for the occasion. While the exact length of proper alt text is debated, most recommendations are under 140 characters to encourage writers to be concise, so ask yourself what parts of this image are necessary and which are extraneous. If a detail is not important to the meaning of the image in context, it’s not necessary to include it in the alt text.
Writing alt text for different uses
An image may have wildly different alt text depending on the context. For example, our logo:
On our site, this image is a link to our homepage. The alt text reads “Pilot Logo,” which is sufficient. It’s a common site feature for a company’s header logo to be a link to the homepage, so that alt text explains exactly what a user will get from the image. However, if this image were on, say, a logo design blog, you’d probably want to be much more specific.
Many stock images come with incredibly robust descriptions to make searching for the content in them easier, but those are often too much information.
For this stock photo:
This is the provided description: “Full multi ethnic family with adorable daughters gathered in modern kitchen cooking pancakes together. Cake mix preparation, make yummy home-made dessert, enjoy communication and cookery hobby concept.”
That’s too much! It would also likely be considered keyword stuffing for SEO purposes. There are a few ways you could write better alt text depending on the context. Here are a few examples:
For a family-friendly online cooking class event page: “A family with two young children cooking together in a home kitchen.”
For an article about helping young children develop motor skills: “Two adults are helping two young children in the kitchen. One child is watching the other pour a small pitcher of water into a bowl.”
For an interior design company advertisement: “A family with two young children are in a bright kitchen with white glass-doored cabinets, a light wood countertop, and an exposed brick wall painted white.”
Alt Text Quick Tips:
- All images should have alt text, unless they’re purely decorative and don’t add information to the page, or are already described in the page text.
- Alt text for any images with text in them should include all of the text in the image.
- Logos can just be described with the company’s name.
- Don’t include “Image of…” or “Picture of…”
- Try to keep alt text under 150 characters.
- Be descriptive and specific.
Alt text benefits everyone
Images are one of the most effective ways to transmit ideas on the web, so it’s no wonder they’re everywhere. But for users who cannot see these images, adding alt text removes barriers to a massive amount of information. And we’ve long known that Google and other search engines are making user experience a part of their ranking factors in the continuing work of aligning their algorithms to how human beings search and use the web. So when you make sure to add alt text to your images, you’re helping your site attract more users and provide a better experience while they’re there.
To learn more about alt text guidelines, check out this tutorial from w3.org.
