Alt Text: Why It's Important For Accessibility & SEO - Moz
Có thể bạn quan tâm
- 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!
See pricing - Moz Pro
- 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
Hurry - ends Dec 6th! - Domain Analysis
- 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
Level up your SEO - Beginner's Guide to 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%
See the latest - Small Business Solutions
- 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
- SEO Learning Center
- On-Site SEO
- 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
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.
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:
- 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.
- 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.
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.
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.
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:
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:
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.
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
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 LessTừ khóa » Html Button Alt Text
-
HTML Input Alt Attribute - W3Schools
-
HTML Alt Attribute - W3Schools
-
Can The Alt Attribute Be Used For An Input Type Button - Stack Overflow
-
Image Buttons Must Have Alternate Text Axe Rules - Deque University
-
H36: Using Alt Attributes On Images Used As Submit Buttons - W3C
-
Image ALT Tag Tips For HTML - Accessibility At Penn State
-
HTML Input Alt Attribute - Dofactory
-
HTML Tag With The 'alt' Attribute
-
A Guide: The Right Way To Write Alt Text - Clique Studios
-
Alternative Text: Web Content - Accessibility - Indiana University
-
t - Web APIs | MDN
-
- HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN
-
Alternative Text - IT Accessibility - NC State University
-
HTML Img Alt Tags For SEO Best Practice - Search Engines Love ...