Alt text is a website feature that goes by many names: alt attributes, alt descriptions, alternate text. Whatever the name, this important accessibility feature may be overlooked by web design and development teams or considered an afterthought, given less effort than content featured on screen. In other cases, the alt text may be well-written, but fails to provide context that helps the user understand why it’s been included on the page.
In this post, we’ll show you how to add alt text to your HTML or within your content management system (CMS) that improves accessibility and user experience for all, while also providing tips on how to thoughtfully address SEO considerations. This includes a how-to write alt text guide and good alt text examples.
What Is Alt Text?
Alt text, short for alternative text, is text within a web page’s HTML code that describes an image on the page. This text is not displayed on the screen unless the image fails to load. Its primary use is by screen reader users to provide people with visual impairment information about the image(s) on the page.
You might find alt text referred to as “alt tags,” but this is incorrect terminology. Technically speaking, this is not a tag, but supporting text to provide context to the images on a web page.
Is Alt Text Just for Describing Images?
When most people think of images, they envision a photograph or illustration, but this can also include infographics, maps, charts, mathematical equations, diagrams–essentially anything added to a webpage with an image file extension, such as jpeg, png, and pdf.
Alt text is also added to websites in an effort to improve search engine optimization (SEO). If the alt text of an image includes certain keywords, such as a product name or location, it increases the chances of that page showing up in the search engine results for those keywords.
For example, a page that includes image alt text, “Washington Monument in Washington, D.C.” might turn up in search results for “places to visit in Washington DC.”
Alt text was created for the specific purpose of describing images to people who are unable to see them. Search engines have leveraged this part of web design to help deliver better results to users. In turn, digital marketers incorporated alt text into SEO considerations. However, the primary purpose of alt text should always be to help people with visual impairments better understand the images on a page.
Step-by-Step Guide to How Writing Good Alt Text
Now that we’ve covered what alt text is, let’s discuss how to write alt text that’s accessible.
- Describe the image as accurately as possible. Alt text is an important element of website accessibility and should describe the image, providing the right context. For example, if you include an image of Superman, the alt text should say so, including what he is doing. In addition to the literal description, “Tall man in blue suit and red cape,” it is helpful to include any relevant cultural context, too.
- Don’t include the phrases “image of,” or “picture of.” Because it’s being read as alt text, the user already knows it’s referring to an image.
- Be succinct. Having alt text that’s short and to the point gives a better user experience.
- Don’t forget image buttons. Buttons can be presented as image files–known as graphical buttons. If the button contains an image
<img>element then the alt attribute should be used. Otherwise, developers can use the<button aria-label>. - Review for spelling errors. Avoid poor user experience with misspelled words that result in inaccurate results from screen readers. Put your alt text through the same review process you would for on-page copy.
Other Alt Text Best Practices
In addition to accessibility, alt text is also frequently used to boost search engine rankings and including alt text with related keywords is considered SEO best practice. Because the goal of alt text is to provide people with visual impairment a description of the image, plus context, here are some best practices for reaching accessibility and SEO goals.
- Keywords (used sparingly) are OK. At one point, SEO best practices called for using exact match keywords within the alt text of as many page images as possible. This sometimes led to descriptions that were awkwardly written. The “keyword stuffing” strategy, or placing keywords throughout the page in as many places as possible, is now penalized by search engines and has fallen out of practice. That said, keywords can still be useful for SEO if they naturally fit in the description.
- Include image info in the main text of the page. Designed infographics look great, but are difficult to convey in alt text due to limited space. When using complex images like charts and infographics, consider highlighting important data and details within the body of the text, such as, “As noted in graph 7 above, 55% of people fall asleep on their sides.” Or better yet, avoid having text displayed as an image altogether.
3 Examples of Great Alt Text
To get a feel for how your company can revise its alt text to be more accessible, here are three stock image examples of great alt text.
Example 1: Stock image of people working in an office
One of the most common scenes on business websites today is of people working collaboratively. For this image, a well-written alt description might be: “A diverse group of young adults working together on tablets and laptops while sitting at a conference table.”
Example 2: Woman standing in a plaza
There are so many details in this photo, so it helps to focus on the most relevant to the overall content of the webpage. For example, a blog post about people over 60 enjoying life on their terms might focus on the red glasses and hat, while a web page about traveling to Italy might focus on the plaza where she is standing. A good alt description might be, “Smiling woman with gray hair standing in a plaza wearing red glasses, checkered hat and holding a small, brown purse.”
Example 3: The fish tank
Sometimes images of specific people are used in articles, blog posts, and other web pages to discuss something newsworthy about that person. Other times, a person is featured in an article as an example of a person overcoming odds, excelling in their field, or facing challenges. In these cases, the name of the person mentioned in the article should be included in any alt-text images of them.
For example, “Maria of Santa Barbara, California standing behind a clear fish tank filled with goldfish.”
Testing to Find Bad Alt Text
Companies often perform tests to ensure your alt text makes sense, can be read by screen readers, and provides the context needed. For example, JAWS Inspect makes it easy to review image alternate text descriptions by providing you with a list of images on your page that have or may be missing the alternative text. From here, your team will then need to review the alt text to ensure it is written in a way that makes sense from a user perspective.
Test your website for alt text and other accessibility failures by scheduling a demo of TPGi’s accessibility testing software, ARC.