Alt Text: What Is It & Why It Matters for Accessibility & SEO


What Is Alt Text?

Alt text (alternative text) is a written description of an online image that provides an alternative when the image is inaccessible to the user. 

Alt text gives screen readers something to read aloud to users with visual impairments, helps search engine bots understand image contents, and may appear on a webpage when the image fails to load.

(This is in contrast to an image caption. Which always appears on the page.)

The alt text "Coolife Spinner Carry On Luggage, best carry on luggage" appears alongside a broken image icon in a blog post.

Alt text is typically added via the alt attribute in an image’s HTML code. 

Like so:

<img src=“image-file-example.jpg” alt=“Alt text goes here”>

That’s why it’s sometimes known as the “alt attribute” or “alt tag.”

Most content management systems (CMSs) have a dedicated field for alt text. So you don’t need to edit the HTML directly.

Here’s an example from WordPress:

The "Alt Text (Alternative Text)" dialog box in the WordPress CMS.

You can also use image alt text on social media platforms like Twitter. 

Here’s an example from Dogs Trust:

An image tweet from @DogsTrust. The "Alt" label on the image has been clicked, revealing an "Image description" dialog box.

Why Is Alt Text Important?

Alt text is important because it makes images more accessible to people and search engines. Even when they cannot be displayed.

If you don’t provide appropriate alt text, people using screen readers can’t get information from images. This unfairly excludes users with visual impairments. Which can harm your brand reputation, traffic, and conversion rate.

Plus, web accessibility is good for SEO.

Google and other search engines use alt text to determine what images portray (or link to). This can enhance their understanding of your content and therefore lead to higher rankings.

Alt text is particularly helpful for image SEO—i.e., ranking high in Google Images and other image results. 

This type of exposure can drive valuable traffic to your site.

For example, the search engine results page (SERP) for “corgi puppies” is dominated by images. Which link through to the owners’ sites.

Google search results for "corgi puppies." There are multiple photos of corgi puppies at the top.

Many of these images use the keyword “corgi puppy” or “corgi puppies” in their alt text.

A photo of a corgi on a webpage, alongside its HTML code. You can see the "Baby the Corgi Puppy" alt text in the code.

Because alt text is important in on-page optimization, it’s sometimes referred to as “SEO alt text.”

How to Write Alt Text (Best Practices)

Learn how to write alt text that improves your site’s accessibility and SEO.

We’ve rounded up three alt text best practices to help you write perfect alt text:

1. Add Alt Text to the Right Kinds of Images

Don’t write alt text for purely decorative images (like the one below). These descriptions can cause distraction and confusion for users with visual impairments, rather than adding useful context.

A "Semrush Features" heading is accompanied by a decorative illustration of a woman alongside a pie chart, webpage, etc.

Instead, provide a null (empty) alt attribute. Like so:

<img src=”decorative-image-title.jpg” alt=””>

This tells screen readers to ignore the image.

If you leave out the alt attribute altogether (as below), assistive technologies may read out the image file name instead. Creating a poor user experience.

<img src=”decorative-image-title.jpg”>

Do write alt text for all other images—images that provide additional meaning to the reader.

For example:

  • Images of useful text (e.g., screenshots of social media posts)
  • Icons that denote functionality (e.g., shopping cart icons)
  • Photos that provide supplementary information (e.g., a smartphone size comparison)
  • Charts that illustrate otherwise unmentioned data
  • Graphics that demonstrate processes (e.g., how to hold chopsticks)

Tip: If you draft content in Semrush’s SEO Writing Assistant, the tool will remind you to add image alt text. It also provides readability, SEO, originality, and tone of voice suggestions.

The "Add alt attributes to your images." suggestion in Semrush's SEO Writing Assistant.

2. Be Descriptive Yet Concise

Alt text should be “the most concise description possible of the image’s purpose,” according to the Web Accessibility Initiative (WAI). 

What’s important about an image depends on context. So take the surrounding content and audience into account when writing alt text.

Consider the photo below. The alt text “Woman doing yoga” would be appropriate in many contexts. 

But in a workout guide, a detailed description of the woman’s pose could be necessary.

Woman doing yoga.

When writing alt text, think about how you’d describe an image to someone in a phone conversation.

Don’t include the following details in your alt text:

  • Photo credits and copyright information—include in the image caption instead
  • Redundant phrases like “image of” or “photo of” (unless the format is particularly relevant)
  • Information that all your readers need—add this to the caption or body content instead
  • Information that’s already provided via the image caption or body content

Tip: Some people recommend sticking to a maximum of 125 characters when writing alt text for images. That’s because many assistive technologies stop reading alt text at 125 characters. But it’s not a strict limit. If you need to write much more, see the WAI’s advice on complex images.

3. Include a Keyword

Adding relevant keywords to alt text can help your images rank in Google image results. 

For example, this alt text tells Google that our marketing funnel guide contains a helpful marketing funnel illustration:

An illustration of the marketing funnel alongside its HTML code. You can read the alt text in the code.

Meaning it would be a relevant Google image result for queries related to marketing funnels.

To understand which keywords to include in alt text, you’ll need to do some keyword research. 

Try conducting keyword research with Semrush’s Keyword Magic Tool.

Just enter a keyword related to your image then click “Search.”

A search for "corgi puppy" in the U.S. in Semrush's Keyword Magic Tool. There's an arrow to the "Search" button.

Go to “Advanced filters” then “SERP Features.” 

Then check “Image” and “Image pack” before clicking “Apply.”

The "Advanced filters" > "SERP Features" dropdown menu in Keyword Magic Tool. The "Image" and "Image pack" check boxes are checked.

The tool will show keywords that contain your starting keyword (or a variation) and generate image results. 

These words and phrases are great candidates for your image’s SEO alt text. As long as the image will meet searchers’ needs.

Results for "corgi puppy" in Keyword Magic Tool. Results include "corgi puppies" and "corgi puppies near me."

Alt Text Examples

Let’s look at three alt text examples that follow best practices.

Example 1: NASA

This blog post is about a photo taken by the Hubble Space Telescope. NASA provides highly descriptive alt text to ensure users with visual impairments can understand what’s in the photo.

A NASA blog post entitled "Hubble Spots a Galaxy with Tendrils" featuring a photo of the galaxy.

Alt text: Spiral galaxy with bright core, spiral arms, and a slight glow surrounds it. Below, strands made of bright blue patches trail down like tentacles. Galaxy is just touched by a second, faint galaxy on left.

Example 2: Bureau of Internet Accessibility

The Bureau of Internet Accessibility homepage features logos of the brands it’s worked with.

A subheading "Here are some of the all-stars we've worked with over the years:" above logos from various brands, such as Chipotle and Godiva.

When users don’t have access to these images, the alt tags provide a substitute.

Broken image icons alongside various brand names, such as Chipotle and Godiva. They appear below a subheading that says "Here are some all-stars we've worked with over the years:."

Example 3: The Guardian

In this product review, The Guardian uses alt attributes and image captions to give readers and search engines the information they need.

A section of an article about the Pixel 7 Pro. Alt text appears in place of the image, and a caption appears below.
  • Alt text: The back of the Pixel 7 Pro showing the aluminium camera bar.
  • Image caption: The camera bar design still divides opinion but there is no doubt it stands out against the crowd. Photograph: Samuel Gibbs/The Guardian

Notice that the alt text acts as a replacement for the image. Whereas the caption provides extra information, such as the photo credit.

How to Find & Fix Missing Alt Text

To check if there’s missing alt text for images on your site, use Semrush’s Site Audit tool.

Enter your domain and click “Start Audit.” 

A search for "www.yoursite.com" in Semrush's Site Audit tool. There's an arrow to the "Start Audit" button.

Then follow the prompts to configure the tool.

Once the audit is ready, click on the “Issues” tab.

A Site Audit in Semrush. There's an arrow to the "Issues" tab.

You’ll see a list of errors, warnings, and notices.

Search for “alt attributes.” Then see if you have the “# images don’t have alt attributes” warning.

If you do, click the “# images” link to see affected URLs.

A search for "alt attribute" within Semrush's Site Audit. There's an arrow to a "3,605 images don't have alt attributes" warning.

Click the “open link” icon beside each page title to view any page or image.

The "Page URL" column in Semrush's Site Audit tool. The "open link" icons are highlighted.

Found an image that doesn’t need alt text? Click the eye icon to hide the warning. 

The Issues report in Semrush's Site Audit tool. A column on the right-hand side, featuring buttons with eye symbols, is highlighted.

Or use the filters, check boxes, and “Hide selected” button to remove warnings in bulk.

The Issues report in Semrush's Site Audit Tool. The "Advanced filters" and "Hide" buttons are highlighted. As are the check boxes alongside each result.

Ready to work on your alt text? Use the check boxes and “Send to…” button to create tasks in the Semrush CRM, Trello, or Zapier. (You may need to set up the corresponding integration first.)

The "Send to..." button in Semrush's Site Audit tool. The options are "CRM," "Trello," and "Zapier."

Then add missing alt text via your CMS.

Make sure to rerun your Site Audit afterward. Just click on the gear button and hit “Rerun campaign.” And watch your image alt text warnings disappear.

The gear icon in Semrush's Site Audit tool brings up a menu featuring a "Rerun campaign" option.





Source link : Semrush.com

Social media & sharing icons powered by UltimatelySocial
error

Enjoy Our Website? Please share :) Thank you!