Alt Text: Why It's Important For Accessibility & SEO - Moz

Skip to content Moz logo Menu open Menu close Search
  • Products
    • Moz Pro
    • Moz Pro Home
    • Moz Local
    • Moz Local Home
    • STAT
    • Moz API
    • Moz API Home
    • Compare SEO Products
    • Moz Data
  • Free SEO Tools
    • Domain Analysis
    • Keyword Explorer
    • Link Explorer
    • Competitive Research
    • MozBar
    • More Free SEO Tools
  • Learn SEO
    • Beginner's Guide to SEO
    • SEO Learning Center
    • Moz Academy
    • SEO Q&A
    • Webinars, Whitepapers, & Guides
  • Blog
  • Why Moz
    • Agency Solutions
    • Enterprise Solutions
    • Small Business Solutions
    • Case Studies
    • The Moz Story
    • New Releases
  • Log in
  • Log out
  • Products
    • Moz Pro

      Your all-in-one suite of SEO essentials.

    • Moz Local

      Raise your local SEO visibility with complete local SEO management.

    • STAT

      SERP tracking and analytics for enterprise SEO experts.

    • Moz API

      Power your SEO with our index of over 44 trillion links.

    • Compare SEO Products

      See which Moz SEO solution best meets your business needs.

    • Moz Data

      Power your SEO strategy & AI models with custom data solutions.

    Save big on Moz Pro! Limited time offer

    Save big on Moz Pro!

    See pricing
  • Free SEO Tools
    • Domain Analysis

      Get top competitive SEO metrics like DA, top pages and more.

    • Keyword Explorer

      Find traffic-driving keywords with our 1.25 billion+ keyword index.

    • Link Explorer

      Explore over 40 trillion links for powerful backlink data.

    • Competitive Research

      Uncover valuable insights on your organic search competitors.

    • MozBar

      See top SEO metrics for free as you browse the web.

    • More Free SEO Tools

      Explore all the free SEO tools Moz has to offer.

    Access the Moz API for less Save on Moz Data

    Access the Moz API for less

    Hurry - ends Dec 6th!
  • Learn SEO
    • Beginner's Guide to SEO

      The #1 most popular introduction to SEO, trusted by millions.

    • SEO Learning Center

      Broaden your knowledge with SEO resources for all skill levels.

    • On-Demand Webinars

      Learn modern SEO best practices from industry experts.

    • How-To Guides

      Step-by-step guides to search success from the authority on SEO.

    • Moz Academy

      Upskill and get certified with on-demand courses & certifications.

    • SEO Q&A

      Insights & discussions from an SEO community of 500,000+.

    Save 20% on all Moz Academy courses Limited time offer

    Save 20% on all Moz Academy courses

    Level up your SEO
  • Blog
  • Why Moz
    • Small Business Solutions

      Uncover insights to make smarter marketing decisions in less time.

    • Agency Solutions

      Earn & keep valuable clients with unparalleled data & insights.

    • Enterprise Solutions

      Gain a competitive edge in the ever-changing world of search.

    • The Moz Story

      Moz was the first & remains the most trusted SEO company.

    • Case Studies

      Explore how Moz drives ROI with a proven track record of success.

    • New Releases

      Get the scoop on the latest and greatest from Moz.

    Explore Moz updates & save up to 40% Big Savings!

    Explore Moz updates & save up to 40%

    See the latest
  • Log in
    • Moz Pro
    • Moz Local
    • Moz Local Dashboard
    • Moz API
    • Moz API Dashboard
    • Moz Academy
  • Avatar
    • Moz Home
    • Notifications
    • Account & Billing
    • Manage Users
    • Community Profile
    • My Q&A
    • My Videos
    • Log Out

Cyber Sale: Save big on Moz Pro! Sign up by Dec. 6, 2024

  1. SEO Learning Center
  2. On-Site SEO
  3. Alt Text SEO: Why is Alt Text Important?
Categories
  • Analytics & Reporting
  • Competitive Research
  • Content Marketing
  • Crawling & Site Audits
  • International SEO
  • Keyword Research
  • Link Building
  • Local SEO
  • Mobile SEO
  • Ranking & Visibility
  • Social Media Marketing
Moz Tools
  • Domain Analysis
  • Keyword Explorer
  • Link Explorer
  • Competitive Research
  • Free SEO Tools
Additional Resources
  • Beginner's Guide to SEO
  • Google Algorithm Change History
  • Workshops & Training
Alt Text SEO: Why is Alt Text Important?

Updated by Chima Mmeje — November 11, 2024.

Alt text (alternative text) describes the appearance or function of an image on a webpage, and is often referred to as image alt text. 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.

The primary purpose of alt text is to provide a clear and concise description of an image, allowing screen reader users to grasp the content and context of the image. This is essential for creating a better user experience for all visitors, ensuring that everyone can access and understand the information presented on the website. 

Alt text example

<img src="pancakestack.jpg" alt="alt=Syrup being poured over a stack of pancakes">

This example demonstrates the importance of writing concise alt text that is descriptive yet brief, ensuring it is effectively conveyed through assistive technologies.

Why is alt text important for screen readers?

Alt text provides context and improves accessibility 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.

For decorative images, it is recommended to use an empty alt attribute to indicate to screen readers that the image can be ignored, thereby enhancing the user experience for individuals with visual impairments.

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 website, 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.

Screenshot of image pack in Google's results returning more than a dozen images of pancakes

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.

Screenshot of Google SERP showing the images tab at the top of the page

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:
screenshot of guidelines reading, Google uses text along with computer vision algorithms and the contents of the page to understand the subject matter of the image. Also, alt text in images is useful as anchor text if you decide to use an image as a link.

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:

Google's Cloud Vision API assigns recognition percentages to uploaded images

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.

Google's John Mueller says the following about alt text - I suspect due to the nature of alt text (being descriptive of something visually-oriented), it would be useful for these visually-oriented tasks.

User experience and image traffic

Alt text not only promotes accessibility but also enhances the overall user experience for all visitors. For instance, a user with a low bandwidth connection can still understand the content of an image through its alt text if the image fails to load. 

Moreover, optimized alt text can significantly increase your website’s visibility in search results, driving more traffic to your site. By surfacing images in search results, whether in Google Images or as image packs, you can attract thousands of additional visitors. Therefore, writing optimized alt text is a win-win for both accessibility and SEO.

What does alt text look like in the alt attribute in HTML code?

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.

screenshot of the menu that shows up when right clicking on an image to open chrome devtools screenshot of raw html code containing alt text

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

<img src="pupdanceparty.gif" alt="Puppies dancing">

How to add alt text to images

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.

screenshot of CMS with the Alt Text field content creators can use to enter alt text copy

What is the optimal alt text format?

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:

Stack of blueberry pancakes with powdered sugar

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.

What does good alt text look like?

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

red-crested rooster crowing

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:

man wearing backpack walking down 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:

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.

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.  

How long can alt text be and is there a limit for decorative images?

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.

Is alt text a ranking factor?

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.

7 smart tips for writing optimized alt text

How to write alt text in seven steps

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.

Additional Articles on On-Site SEO

What Are On-Page SEO Factors? Title Tag What Are Meta Descriptions and How to Write Them Show More What Is A Robots.txt File? Best Practices For Robot.txt Syntax Core Web Vitals Performance Metrics: Opportunities & Diagnostics H1 Tags Image SEO: The Ultimate Guide to Optimizing Your Images Show Less

Từ khóa » Html Button Alt Text