Alt Text

Updated by Miriam Ellis on 27 Nov, 2023.

Alt text (alternative text) describes the appearance or function of an image on a web page. Alt text is read aloud by programs called screen readers which are used by people with visual impairments and low vision. Alt text displays in place of an image if it fails to load, and is indexed by search engine bots to better understand image and page content. Also known as "alt attributes," “alt descriptions," or technically incorrectly as "alt tags,” alt text is typically implemented either within HTML code or in the appropriate field provided by a content management system.

Alt text uses:

1. Adding alternative text to images on your site is a principle of web accessibility.

2. Alt attributes enable screen readers to read the information about on-page images for the benefit of a person with complete lack of sight, visually impaired, or who is otherwise unable to view the images on the page.

3. Alt text will be displayed in place of an image if an image file cannot load.

4. Alt text provides better image context/descriptions to search engine crawlers, helping them to index and rank an image properly in image search. It also provides search engines with contextual information about the content on the page.

Alt text provides context for humans

There are many excellent reasons for investing the time in writing alt text for the images on your website, but the primary goal is to ensure that visitors with different abilities are being served well. Alt attributes enable screen readers to read the information about on-page images for the benefit of a person with visual impairments, low vision, different learning abilities, and for people who cannot otherwise view an image online.

The necessity of this becomes very apparent when you consider the following statistics shared by respected SEO conference speaker, Miracle Inameti-Archibong in a presentation at MozCon:

• 12 million Internet users have a visual impairment or low vision

• People with a visual impairment or low vision consistently report having advanced internet proficiency.

• Working-age people with disabilities cumulatively possess $490 billion in after-tax disposable income.

• 83% of people with accessibility needs shop on sites with high accessibility standards, even if prices are higher.

• 97.4% of homepages have accessibility errors.

• Missing alt text accounts for 61% of all homepage accessibility errors.

• In 2021, there were 10 lawsuits per day in the US related to accessibility issues.

People with a visual impairment, low vision, or different learning abilities are part of your audience, and like all Internet users, may turn to the web for vital needs such as managing finances, seeking medical help, navigating towns and cities, shopping, and countless day-to-day tasks. By investing in the implementation of alt text for all the most important images on your web site, you’ll be ensuring that no visitor is excluded from interacting with your organization. You’ll also be maximizing your potential for transactions and protecting your brand from litigation.

Alt text provides context for image search

Another excellent reason is that it can help search engines like Google better understand and rank your photos in the image-based results which have become so prevalent.

You’ll see image packs show up in the search search when Google interprets the query to be best supported by visual accompaniment. Visual search makes it easier when you don't know what you're looking for or when you’re seeking visual guidance for inspiration or to refine your search further.

And if the image pack proves to be particularly tempting you can always click on the “Image” pill button under your search to witness a full page of lovely pancake options.

While accessibility is the primary reason for including alt text, providing search engines with context clues is a close second. When optimizing for image search you should prioritize helping images to surface when users enter text based queries.

To do this, follow image SEO best practices like:

• Modern file formats

• Alt text

• Relevant file names

• Schema markup

In recent years, Google has become remarkably good at “reading” image content with computer vision technology and algorithms. They can read text inside of images, like a logo on a wall at the back of a conference hall. They can identify multiple entities within images, such as a person vs. a lamp vs. a tree. In fact, they have become so skilled at this that you might wonder if you even need to write alt text at this point as part of your SEO. There’s a two part answer to this question:

1. Remember that image recognition technology isn’t really seeing the same way as sighted people see. Alt text gives you the chance to fill in details about the elements in a photo that you want to emphasize.

2. Google’s documentation states that they use both computer vision and alt text (as well as contextual page content) to understand imagery, as captured in this screenshot:

A pro tip to ensure you’re getting your images and accompanying alt text right is to run your images through the CloudVision API to see if Google is correctly understanding your image content, as in this upload of a picture of johnny cakes being cooked in a cast iron frying pan:

The labels section lets you know if Google is mainly seeing this as a photo of food, of a pan, or something else. If the subject in your image isn’t 100% obvious,, your alt text could fill in the missing details.

Meanwhile, when asked whether alt text plays a role in the emergent Visual Search and Multi Search scenarios which enable people to search via images or via a combination of images and text, Google’s John Mueller suggests that it might have some use because of its descriptive qualities.

It’s easy to see what alt text looks like in the HTML code of a website. You can right click any image and “inspect” to open up Chrome DevTool and look, or search, for the img alt.

The highlighted text shows the alt text within HTML code. When written within the code that governs images, alt text looks like this example:

You don’t need to be a developer or wade through HTML page source code to add and mange alt text on a page. Many content management systems will have options to add and edit alt text when you’re uploading your content.

The best format for alt text is sufficiently descriptive but doesn't contain any spammy attempts at keyword stuffing. If you close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you're on the right track.

Let's look at a few examples of alt text for this image of a delicious-looking stack of blueberry pancakes:

Okay:

<img src="pancakes.png" alt="pancakes"> 

This alt text is only "okay" because it's not very descriptive. Yes, this is an image of a stack of pancakes. But, there's more to be said about this image.

Good:

<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

This alt text is a better alternative because it is far more descriptive of what's in the image, while remaining concise. This isn't just a stack of "pancakes" (as the first alt text example demonstrated); it's a stack of blueberry pancakes with a dusting of powdered sugar!

Not recommended:

<img src="pancakes.png" alt="">

or

<img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

Neither of these last two examples are recommended. The first line of code actually doesn't contain any alt text at all (notice the quotes are empty), while the second example demonstrates keyword stuffing in alt text, which is a low quality and rather useless pursuit.

Let's take a look at a couple examples of alt text in action. First take a look at this photo of a rooster:

Okay alt text:

 <img src="bird.png" alt="Rooster">

Better alt text:

 <img src="bird.png" alt="Rooster crowing">

Best alt text:

<img src="bird.png" alt="Red-crested rooster crowing">

Next, consider this image of a man wearing a backpack and going down an escalator:

Okay alt text:

<img src="escalator.jpg" alt="man on escalator">

Better alt text:

<img src="escalator.jpg" alt="man walking on escalator">

Best alt text:

<img src="escalator.jpg" alt="man wearing backpack walking down escalator">

Finally, here’s a more complex image of the dashboard of an SEO tool:

Okay alt text:

<img src="kwe.png" alt="kw explorer">

Better alt text:

<img src="kwe.png" alt="keyword research in Keyword Explorer">

Best alt text:

<img src="kwe.png" alt="Screenshot of the Moz Keyword Explorer tool for SEO research showing a search volume of 10,000-20,000, a difficulty score of 52, an opportunity score of 85 and a potential score of 60.">

In evaluating the current alt text on your website, determine whether what you have written is okay, better, or best at describing image content.

If you’re studying SEO, you will run into a lot of different opinions on what the right length is for alt text. You’ll see people suggesting keeping it to 100 characters, 120 characters, 140 characters, or to specific word counts like 16 words. It’s important to know that all of these figures are speculative. Google’s John Mueller has clarified:

“...the important part here is we don’t have any guidelines with regards to how long your alt text can be. So from a Google Search point of view, you can put a lot of things in the alt text for an image, if that is relevant for that particular image.”

Because Google has no official guidelines on alt text length, it's an element that calls for common sense. Write alt text that briefly but thoroughly describes an image while being a great help, not a boring burden, to people using screen readers.

According to Google’s John Mueller, alt text is an image search ranking factor. For general organic search, Google treats alt text like any other text on the page. Obviously, since the text on your page contributes to overall rankings, alt text will be part of that big picture, but it’s good to have this confirmation from a Google representative that your investment in alt text will be of greatest assistance to your image search ranking goals.

Along with implementing image title and file naming best practices, including alt text is critically important for computer surfers with a range of abilities. It also gives context clues to bots programmed to understand your website content.

Alt text offers you another opportunity to include your target keyword. With on-page keyword usage still pulling weight as a search engine ranking factor, it's in your best interest to create alt text that both describes the image and, if possible, includes a keyword or keyword phrase you're targeting.

Additionally if traffic from image search is a key part of your SEO strategy then giving Google the right information about your images is a good way to communicate topic relevance. You can do this by correctly using modern file formats, alt text, relevant file names and schema markup

Specificity is Key: Alt text should form a clear mental image of what the content is. Describe the image as specifically as possible. If alt text forms a strong mental picture of image content, it’s likely doing its job.

Decorative Images: Use CSS for purely decorative images, not HTML. If an image truly doesn't convey any meaning/value and is just there for design purposes, also known as decorative images, it should live within the CSS of your site, rather than your HTML.

Keyword Integration: Incorporate relevant keywords from research in alt text for better search relevance.

Do include the findings of your keyword research in your alt text. Use them to reflect the language people use when talking about and searching for an image like yours while providing a strong description of image content.

Avoid Overstuffing: Keyword stuffing can detract from user experience and search engine perception and is burdensome to people who use screen readers and will not impress search engines.

Skip Redundant Phrases: No need for “image of” or “picture of”; contextually specify for screenshots or video stills if necessary. It's already assumed that alt text is describing an image or picture. However, there may be some cases in which specifying the media type can help. For example, you might want to describe that an image is a screenshot of a technical dashboard, or a video still, or a capture of a social media post.

Complex Images: For intricate visuals like maps or charts, follow W3C Web Accessibility Initiative guidelines.

When images are complex (like maps, charts, diagrams, or infographics) follow the best practices outlined by the W3C Web Accessibility Initiative .

Alt Text for Buttons: Ensure image buttons like “submit” have descriptive alt text that explains their function. Don’t neglect to write alt text for form buttons. If a form on your website uses an image as its “submit” button, give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button like "search", "apply now", “sign up”, etc

For website owners, success depends on welcoming visitors to an environment that really works for them. Web accessibility standards, including the creation of alt text, ensure that your welcome is more inclusive. Investing the time in writing helpful, optimized alt text is both a good business practice and the right thing to do.