No products in the cart.
For website owners and SEO professionals, alt text makes image content accessible and tells search engines what an image shows. Pay attention to it when publishing product photos, screenshots, illustrations, and image-based controls.
This guide covers what alt text is, how to write it, and how to check it on your website. Examples show how descriptions change with context, while browser tools and SEO software help you find images that need review.
What Is Alt Text?
Alt text, short for alternative text, describes an image’s information or purpose in writing. On websites, it usually appears in the HTML alt attribute, allowing screen readers to communicate that information to people who cannot see the image. Browsers may also display it when an image fails to load.
For a product photo, alt="Blue ceramic mug with a large handle" describes features a shopper would otherwise need to see.
How Alt Text Helps Accessibility and SEO
For someone using a screen reader, an image without a useful text alternative can leave a gap in the page. Missing descriptions can prevent someone from understanding product details, following instructions, or identifying a button’s purpose.
Alt text also helps search engines understand images. Google uses it alongside the surrounding page content and image analysis to identify what an image shows. Its image SEO guidance recommends useful, descriptive wording and warns against keyword stuffing.
Write for the person who needs the description first. If a relevant keyword accurately identifies the subject, include it naturally. Adding service names, locations, or unrelated search terms makes the description less useful and does not guarantee better rankings.
What Alt Text Looks Like in HTML
Alt text goes inside the alt attribute of an image element:
<img src="mountain-sunset.jpg" alt="Orange sunset behind snow-covered mountain peaks">The src attribute identifies the image file. The alt attribute provides its text alternative.
For a purely ornamental divider that conveys no information and performs no action, use an empty alt attribute:
<img src="divider.jpg" alt="">An empty attribute and a missing attribute are different. Using alt="" deliberately marks an image as having no text alternative; omitting the attribute can cause some screen readers to announce the filename instead.
How to Write Effective Alt Text
Start with the question: What would someone miss if they could not see this image? Describe that information in plain language, using the surrounding content to decide which details matter.
Keep the wording concise, but do not cut information just to meet an arbitrary character count. There is no universal 125-character limit for HTML alt text. Usually, a short phrase or sentence is enough; a complicated diagram needs an explanation elsewhere on the page.
Avoid starting every description with “image of” or “picture of”. Screen readers generally identify images already. Mention the format when it matters, such as a screenshot, illustration, or historical photograph. W3C’s writing tips provide more guidance on length and wording.
Describe Relevant Details
Start by identifying why the image is on the page. What does it show that the surrounding text does not explain? Describe the subject and the details someone needs to understand its role, such as an action, location, appearance, or relationship between objects.
Choose details based on what matters to the reader. Color and material may help someone compare products, while position and direction may help someone follow an instruction. Leave out background objects and other visual details unless they affect the meaning.
Here are examples for different page contexts:
| Image context | Weak alt text | More useful alt text |
|---|---|---|
| Product photo | Backpack close-up | Padded backpack shoulder strap with an adjustable buckle |
| Business article | Office image | Small desk beside a window with a monitor on an adjustable arm |
| WordPress tutorial | Screenshot | Image block settings with the Alternative text field selected |
Notice how each description gives the reader something they need: a product’s appearance, a part’s location, an entrance to recognize, or a link’s destination. Use that same approach when deciding which details to include in your own alt text.
Give Informative Images and Controls Useful Labels
Write alt text for images that communicate information, including product photos, instructional screenshots, and illustrations that explain a concept. Describe what matters in the page’s context rather than assuming an image is decorative because it looks simple.
Icons can also communicate essential information or let users complete an action. A user icon linking to an account page needs an accessible label such as “My account”. A magnifying-glass button needs “Search”. These labels explain what the controls do, which is more useful than describing their shapes.
For an image-only link or button, alt text can provide that label. If the control already has an accessible name through visible text or another labeling method, its icon may use an empty alternative to avoid repeating the same information. SVG and icon-font controls require appropriate labeling rather than an HTML image’s alt attribute.
Reserve alt="" for images that add no information or functionality, such as a purely ornamental flourish. Do not classify an image as decorative solely because it is an icon, stock photo, or blog illustration. W3C’s image guidance bases that decision on the image’s purpose and context.
Explain Charts and Diagrams in the Page Content
A chart usually contains more information than a short alt description can communicate. Use the alt text to identify the chart, then provide its findings and important data in nearby text or an accessible table.
For example, “Monthly newsletter sign-ups from January through June; data table follows” identifies the graphic and points to its equivalent. The table should then contain the actual values. W3C’s complex image guidance explains how short alternatives and detailed descriptions work together.
Before publishing, read each description alongside the surrounding text. Check that it communicates the image’s relevant information or action, avoids unnecessary repetition, and describes only what is actually shown. If the image adds no information or functionality, use an empty alternative.
How to Check Alt Text on a Website
Check alt text on the published page, where you can review both the description and the image’s context. You can inspect individual images in your browser or use an auditing tool to find potential issues across multiple pages.
Inspect an Image in Your Browser
In Chrome, Edge, or Firefox, right-click an image and choose Inspect. In the developer tools panel, locate the image’s <img> element and look for its alt attribute. You may need to expand the selected element or a nearby container to find it. Chrome’s developer tools instructions explain how to open the inspector.
You will usually find one of three situations:
- Descriptive alt text, such as
alt="Blue ceramic mug with a large handle". Read it against the image and surrounding content to judge whether it is useful. - An empty alternative, written as
alt="". This can be appropriate for a decorative image or an image whose information is already fully provided within the same link. - A missing alt attribute. Review the image’s purpose and add an appropriate description or an intentionally empty alternative.
Changes made in developer tools only affect your local view temporarily. To save a correction, update the image in your website editor or underlying code, publish the change, and check the page again.
Use Tools to Review More Images
A browser extension helps when you’re checking one page without inspecting each image separately. For example, the Ahrefs SEO Toolbar includes an on-page report with image information and alt text, so you can review the page’s image descriptions in a simple interface.
For larger websites, Screaming Frog SEO Spider can crawl pages and identify images missing alt text or alt attributes. Its image details help you locate the pages where those images appear, so you can identify which pages need changes.
SEO platforms can also surface these issues during a site audit. For example, Semrush, Moz, and Ahrefs can automatically check for missing alt attributes.
Treat automated findings as a review list. An empty alternative may be intentional, while a populated field can still contain an inaccurate or unhelpful description. Check the image’s purpose before changing it, then rerun the inspection or audit after publishing your fixes.
Image SEO Checklist
Alt text is one part of preparing images for the web. Before publishing, check that your images are relevant, clear, and sized to load efficiently.
- Use descriptive filenames. Choose
blue-ceramic-mug.webpinstead ofIMG_4821.webp. Keep names short and avoid stuffing in keywords. - Resize and compress files. Export images at dimensions suited to their placement, and reduce file size without blurring details.
- Choose an appropriate format. WebP and AVIF often reduce photo file sizes. SVG suits logos and simple graphics.
- Serve responsive images. Configure your website to deliver smaller versions on smaller screens.
- Write relevant alt text. Describe the information an image contributes, and make sure image-based controls have clear labels.
- Place images near related text. Add captions when they provide context the reader needs.
- Check that images are discoverable. Important content images should use HTML image elements and be accessible to search crawlers.
- Test the published page. Check image clarity on mobile and desktop, look for broken images, and use PageSpeed Insights to identify loading issues.
Google’s image SEO guidance explains how image quality, page context, and technical setup support discovery in search.
FAQs About Alt Text
Images that communicate information need a useful text alternative, and image-based links or buttons need an accessible label explaining their purpose. Use an empty alt attribute (alt="") only for genuinely decorative images or images whose role is already fully communicated by an appropriately labeled control.
Use the shortest description that communicates the image’s relevant information or purpose. A short phrase or sentence is usually enough. If a chart or diagram needs a longer explanation, provide that information in the page content.
Include a keyword when it accurately describes the image and fits the page’s context. Do not add keywords that have little to do with what the image shows. Include a keyword when it accurately describes the image and fits the page’s context. Leave out unrelated services, locations, and repeated search terms.
Alt text provides a text alternative for an image, while a caption appears visibly beneath or beside it. A caption might add context, identify a person, or credit a photographer. Having a caption does not automatically remove the need for alt text.
AI can suggest a starting description, but review it before publishing. Check for invented details, unnecessary wording, and information that does not matter in context. You still need to decide whether the image conveys information, performs an action, or is decorative.
Summary
Describe the information an image conveys, and label image-based controls so people know what they do. When checking an existing website, start with product photos, instructions, charts, and navigation icons. Review each image in context before deciding whether it needs a description or an empty alternative.
Work With TCB Studio
Need help reviewing your website’s images and on-page SEO? TCB Studio provides SEO site audits to identify issues and prioritize improvements, along with WordPress services for implementation and ongoing website work. Contact TCB Studio to discuss your website and the improvements you want to make.
