Why Alt Text Matters More Than You Think
Alt text (short for alternative text) is a written description added to an image’s HTML code. It serves two critical purposes: it tells screen readers what an image shows so visually impaired users can understand your content, and it helps search engines interpret images they cannot “see.”
If you have ever wondered how to write alt text that actually works for both accessibility and SEO, you are in the right place. This guide breaks it down step by step, with concrete examples you can apply immediately to your website.
Whether you manage an e-commerce store, a blog, or a corporate site, writing effective alt text is one of the simplest and most impactful things you can do to improve your digital presence.
What Is Alt Text and Where Does It Go?
In HTML, alt text is added inside the image element like this:
<img src="product-photo.jpg" alt="Your description of the image here">
Most content management systems like WordPress, Shopify, and Squarespace have a dedicated field where you can type alt text without touching code. When you upload an image, simply look for the “Alt Text” or “Alternative Text” field in the media settings.
Alt text appears in three situations:
- When a screen reader reads your page aloud to a visually impaired user
- When an image fails to load and the browser displays the text instead
- When search engine crawlers index your page and try to understand the image content
How to Write Alt Text: A Step-by-Step Process
Follow these six steps every time you add an image to your website. This process ensures your alt text is useful, concise, and optimized.
Step 1: Determine the Image’s Purpose
Before you type a single word, ask yourself: why is this image here? The answer determines how you write the alt text.
- Informative images convey specific information (product photos, charts, diagrams)
- Functional images trigger an action (buttons, linked icons, navigation elements)
- Decorative images exist purely for visual design (background patterns, divider lines, stock photos that add no information)
Each type requires a different approach, and we will cover all of them below.
Step 2: Describe What the Image Communicates, Not Every Detail
A common mistake is describing every pixel. Instead, focus on the main message the image communicates to someone who can see it. Think about what information would be lost if the image disappeared. That is what your alt text should capture.
Step 3: Keep It Concise
Aim for one to two short sentences, ideally under 150 characters. Screen readers process alt text as a single block, so lengthy descriptions become exhausting to listen to. If your image requires a longer explanation (like a complex infographic), use a separate text description on the page and keep the alt text as a summary.
Step 4: Include a Relevant Keyword (Naturally)
If it fits naturally, include your target keyword or a related term. This helps search engines associate the image with relevant queries. However, never stuff keywords into alt text. Google can detect this and it creates a terrible experience for screen reader users.
Step 5: Skip “Image of” or “Picture of”
Screen readers already announce that an element is an image before reading the alt text. Starting with “image of” or “photo of” is redundant. Jump straight into the description.
Step 6: Review in Context
Read your alt text alongside the surrounding content. Does it make sense? Does it add information the text does not already provide? If the surrounding paragraph already explains what the image shows, your alt text can be shorter or focus on a different detail.
Good vs. Bad Alt Text: Real Examples
Theory is helpful, but real examples make everything click. Below are comparisons across different image types you are likely to encounter.
Product Photos
| Quality | Alt Text Example | Why |
|---|---|---|
| Bad | shoes | Too vague. Provides no useful information about the product. |
| Bad | Image of running shoes best running shoes buy running shoes online cheap running shoes | Keyword stuffing. Hurts SEO and accessibility. |
| Good | Navy blue Nike Air Zoom running shoes, side view, on white background | Specific, concise, includes brand and product type naturally. |
Team or People Photos
| Quality | Alt Text Example | Why |
|---|---|---|
| Bad | team photo | Does not communicate who is in the photo or what they are doing. |
| Good | Pixelbright design team collaborating around a whiteboard during a project kickoff meeting | Describes the scene and its context meaningfully. |
Infographics and Charts
| Quality | Alt Text Example | Why |
|---|---|---|
| Bad | chart | Completely useless. The user learns nothing. |
| Bad | Bar chart showing Q1 revenue was 1.2M, Q2 was 1.5M, Q3 was 1.1M, Q4 was 2.3M, total annual revenue 6.1M, highest month was December at 890K… | Too long. This level of detail belongs in a data table or long description, not in alt text. |
| Good | Bar chart showing quarterly revenue growth, with Q4 2025 reaching the highest point at 2.3 million | Summarizes the key takeaway. Full data can be provided in an accessible table nearby. |
Decorative Images
| Quality | Alt Text Example | Why |
|---|---|---|
| Bad | Abstract colorful background pattern with swirls and gradients | Adds noise. Screen reader users have to listen to a description of something irrelevant. |
| Good | “” (empty alt attribute: alt="") |
Using an empty alt attribute tells screen readers to skip the image entirely. This is the correct approach for purely decorative images. |
Linked Images and Buttons
| Quality | Alt Text Example | Why |
|---|---|---|
| Bad | red arrow icon | Describes the image but not what the link or button does. |
| Good | Go to homepage | For functional images, describe the action rather than the visual appearance. |
Alt Text for SEO: What Google Actually Wants
Google has confirmed repeatedly that alt text is one of the primary signals it uses to understand image content. Here is how to make sure your alt text works for search engines without sacrificing accessibility:
- Be descriptive and specific. “Red ceramic coffee mug on a wooden desk” is far more useful to Google than “mug” or “IMG_4392.”
- Use keywords where they naturally fit. If your page is about handmade pottery and the image shows a handmade ceramic bowl, include that phrase. Do not force unrelated keywords into the description.
- Match the page context. Google evaluates alt text in relation to the surrounding content. An image on a recipe page should have alt text that relates to the recipe, not generic food descriptions.
- Do not duplicate. If multiple images on a page show similar things, differentiate the alt text for each one. Duplicate alt text across images can look spammy.
- Never leave alt text empty on informative images. Missing alt text means Google has to guess what the image shows, and it also fails accessibility requirements.
Common Mistakes to Avoid
Even experienced content creators fall into these traps. Watch out for these frequent errors:
- Using the file name as alt text. “DSC_0042.jpg” or “hero-banner-final-v3” tells nobody anything.
- Writing alt text that is too long. If your description exceeds 150 characters, trim it. Move extended descriptions into a caption or separate text block.
- Starting with “image of” or “photo of.” This is redundant because assistive technology already announces the element type.
- Ignoring decorative images. If you do not set
alt=""on decorative images, screen reader users hear unnecessary descriptions on every page. - Writing alt text once and never updating it. When you redesign pages or swap images, make sure the alt text still matches the new image.
- Stuffing keywords. “Best coffee mug buy coffee mug online cheap coffee mug ceramic coffee mug” is not alt text. It is spam.
Alt Text Quick Reference Cheat Sheet
| Image Type | What to Write | Example |
|---|---|---|
| Product photo | Brand, product name, key features, color | “Black leather Samsonite laptop bag with front zipper pocket” |
| Portrait/headshot | Person’s name and role or context | “Sarah Chen, Pixelbright Lead Developer, speaking at a tech conference” |
| Chart or graph | Chart type and key takeaway | “Line graph showing a 40% increase in organic traffic from January to March 2026” |
| Infographic | Summary of main message (provide full text alternative elsewhere) | “Infographic outlining five steps to improve website loading speed” |
| Screenshot | What the screenshot shows and why it matters | “WordPress media library with the alt text field highlighted in the attachment details panel” |
| Decorative image | Empty alt attribute | alt="" |
| Logo (linked to homepage) | Company name and destination | “Pixelbright homepage” |
| Button or icon | The action it performs | “Search” or “Download PDF report” |
How to Add Alt Text in Popular Platforms
Knowing how to write alt text is only half the battle. You also need to know where to add it. Here is a quick guide for the most common platforms in 2026:
WordPress
- Upload your image or select it from the Media Library
- Click on the image to open the Attachment Details panel
- Type your alt text in the “Alt Text” field on the right side
- Save or update your post
Shopify
- Go to the product or page editor
- Click on the image you want to edit
- Select “Edit alt text” or click the image settings icon
- Enter your alt text and save
- Create a new post and select your image
- On the final screen before publishing, tap “Advanced Settings”
- Select “Write Alt Text”
- Type your description and share
HTML (Manual)
Add the alt attribute directly inside the <img> tag:
<img src="your-image.jpg" alt="Your descriptive alt text here">
Testing Your Alt Text
After writing alt text, test it to make sure it works as intended:
- The phone test: Read the alt text aloud to someone who cannot see the image. Can they understand what the image shows and why it is there?
- Screen reader testing: Use a free screen reader like NVDA (Windows) or VoiceOver (Mac/iOS) to navigate your page and listen to how the alt text sounds in context.
- Accessibility audit tools: Tools like WAVE, axe DevTools, or Lighthouse in Chrome can flag missing or problematic alt text across your entire site.
- SEO audit tools: Platforms like Screaming Frog or Semrush can identify images with missing alt attributes at scale.
Can You Use AI to Generate Alt Text?
Yes, AI tools can help generate alt text, and many CMS platforms now include built-in AI alt text suggestions. However, AI-generated alt text should always be reviewed and edited by a human. Here is why:
- AI often describes visual elements literally without understanding the context of your page
- AI may miss brand names, product-specific details, or the purpose of the image
- AI-generated descriptions can be generic and repetitive across similar images
Use AI as a starting point, especially when you have hundreds of images to process. But always review, refine, and make sure the alt text fits the page context and includes relevant keywords naturally.
Frequently Asked Questions
What is an example of good alt text?
A good example of alt text for a product image would be: “Stainless steel insulated water bottle, 750ml, in forest green.” It is specific, concise, and describes the key details a shopper would need.
How long should alt text be?
Aim for under 150 characters. One to two short sentences is ideal. If the image contains dense information like an infographic, provide a brief summary in the alt text and a full text version elsewhere on the page.
Should every image have alt text?
Every image should have an alt attribute, but not every image needs descriptive alt text. Decorative images that add no informational value should use an empty alt attribute (alt="") so screen readers skip them.
Does alt text help SEO?
Absolutely. Alt text is one of the key factors Google uses to understand and rank images in search results. Well-written alt text can help your images appear in Google Image Search and improve the overall relevance signals of your page.
Should I put keywords in alt text?
Include keywords only when they fit naturally in the description. If the image genuinely shows what your keyword describes, include it. Never force keywords into alt text where they do not belong.
What is the difference between alt text and a caption?
Alt text is hidden in the code and read by screen readers and search engines. Captions are visible text displayed below or near the image that all users can see. They serve different purposes and can complement each other.
Can ChatGPT or other AI tools generate alt text?
AI tools can generate draft alt text, but the results should always be reviewed by a person who understands the page context. AI tends to produce generic descriptions that miss important details like brand names, product specifics, and the reason the image was chosen.
Final Thoughts
Learning how to write alt text is not complicated, but it does require intentional effort. Every image on your site is an opportunity to improve the experience for users who rely on screen readers and to send strong relevance signals to search engines.
Start with your most important pages: your homepage, top-performing blog posts, and product pages. Audit the existing alt text, fix what is missing or poorly written, and build the habit of writing thoughtful alt text for every new image you publish.
At Pixelbright, we build accessibility and SEO best practices into every project from day one. If you need help auditing your site or improving your image optimization strategy, get in touch with our team.