About this tool
What Is Alt Text?
Alt text (alternative text) is a written description added to an HTML image tag that describes the content and function of an image on a web page. It serves two critical purposes: providing accessibility for visually impaired users who rely on screen readers, and helping search engines understand image content for indexing and ranking in image search results.
The alt attribute is added to the img tag like this: <img src="photo.jpg" alt="Description of the image">. When a screen reader encounters an image, it reads the alt text aloud. When Google crawls a page, it uses the alt text to understand what the image depicts since search engine crawlers cannot "see" images the way humans do.
Writing effective alt text is a balance between accessibility and SEO. The description should be accurate, concise, and useful to both screen reader users and search engines.
How to Write Good Alt Text
Follow these principles for effective alt text:
Be specific and descriptive. "Dog" is weak. "Golden retriever puppy sitting on a green lawn" is strong. Describe what is actually happening in the image.
Keep it under 125 characters. Screen readers like JAWS and NVDA may truncate or awkwardly segment text longer than 125 characters. Most alt text should be 50-100 characters.
Do not start with "image of" or "photo of." Screen readers already announce "Image" before reading the alt text, so starting with these phrases creates redundancy: "Image. Image of a dog."
Include relevant keywords naturally. If the image relates to your page topic, include a keyword in the description — but only where it reads naturally. "Red Nike running shoes on a white background" includes the keyword organically.
Use empty alt for decorative images. Background textures, spacer graphics, and purely ornamental images should have alt="" so screen readers skip them entirely.
Decorative vs. Informative Images
Not every image needs descriptive alt text. WCAG 2.2 distinguishes between:
Informative images convey information that is not available in the surrounding text. These require descriptive alt text. Examples: product photos, charts, diagrams, screenshots.
Decorative images are purely aesthetic and add no information. Examples: background gradients, ornamental borders, section dividers. These must use alt="" (empty alt attribute) paired with role="presentation" to tell screen readers to skip them.
Functional images are used as links or buttons. The alt text should describe the action, not the image itself. For a magnifying glass search icon, use alt="Search" not alt="magnifying glass."
Alt Text for E-commerce Product Images
Product images are among the most important to optimize because they directly affect Google Shopping rankings and image search visibility:
Include the product name, brand, and distinguishing features. "Nike Air Max 270 React men's running shoe in black and white, side view" is far better than "shoe."
Describe the angle and context. "Front view," "on model," "lifestyle image showing the product in use" — these details help both screen reader users and search engines.
Add the target keyword naturally. If the product page targets "men's running shoes," the alt text should include that phrase where it fits naturally within the description.
Use unique alt text for each image. If a product has 5 images, each should have different alt text describing that specific view, not the same generic description repeated 5 times.
Alt Text and Google Image SEO
Google uses alt text as a primary signal for understanding and ranking images in Google Image search. Best practices:
- Write for humans first, search engines second
- Include one relevant keyword per image naturally
- Avoid keyword stuffing — Google's algorithms detect and penalize it
- Use descriptive file names alongside alt text (red-running-shoes.jpg, not IMG_4392.jpg)
- Longer, more descriptive alt text generally performs better in image search than very short alt text
- Alt text influences the host page ranking for related queries, not just image search
Common Alt Text Mistakes
Mistake 1: Leaving alt attributes empty on informative images. Missing alt text fails WCAG compliance and misses SEO opportunity. Every meaningful image needs a description.
Mistake 2: Keyword stuffing. Writing "shoes running shoes best running shoes buy shoes" as alt text triggers spam filters and creates a terrible screen reader experience.
Mistake 3: Using the file name as alt text. "IMG20240315143022.jpg" tells neither screen readers nor search engines anything useful about the image.
Mistake 4: Writing alt text that is too long. Paragraphs of text in the alt attribute overwhelm screen reader users. Keep descriptions concise and focused on the most important elements.
Mistake 5: Adding alt text to decorative images. A screen reader user does not need to hear "blue squiggly line" for every decorative separator on the page. Use empty alt for decoration.
Practical Usage Examples
E-commerce Product
Nike shoes on a white background.
Alt: "Nike Pegasus women's trail running shoes in neon pink and black on white background."Chart / Infographic
Pie chart of OS market share.
Alt: "Pie chart showing 2024 mobile OS market share: iOS 52%, Android 47%, other 1%."Step-by-Step Instructions
Step 1: Describe the Image Objectively. Write what the image shows in plain language. Focus on the subject, action, and context. Instead of "nice car," write "Red 2024 Ford Mustang driving on a coastal highway."
Step 2: Select the Image Context. Choose whether the image is for a blog post, an e-commerce product listing, a data chart, or a purely decorative element. Each context follows different alt text best practices.
Step 3: Add an SEO Keyword (Optional). If you want the image to rank in Google Image search, enter your target keyword. The generator weaves it naturally into the description to avoid keyword stuffing penalties.
Step 4: Review the Output. Check the recommended alt text, alternative versions, and the accessibility audit. The audit warns you if the text exceeds the 125-character screen reader limit.
Step 5: Copy the HTML. Use the generated HTML img tag directly in your website, CMS (WordPress, Shopify, Squarespace), or content management system.
Core Benefits
WCAG 2.2 Compliance: Every generated alt text follows Web Content Accessibility Guidelines. Decorative images automatically receive empty alt attributes with role="presentation" to prevent screen reader confusion.
SEO-Safe Keyword Integration: The tool naturally incorporates your target keyword into the image description without keyword stuffing, which Google's SpamBrain algorithm penalizes.
Screen Reader Optimized: The generator strips redundant phrases like "image of" and "picture of" that cause duplication in screen readers (JAWS, NVDA, VoiceOver already announce "Image" before reading alt text).
125-Character Length Check: Real-time validation ensures your alt text stays within the recommended screen reader limit. Text that exceeds 125 characters risks being truncated or awkwardly segmented.
Ready-to-Paste HTML Output: Copy the complete img tag with properly escaped attributes directly into your HTML, WordPress editor, or Shopify product listing.
Frequently Asked Questions
There is no hard HTML limit, but the recommended maximum is 125 characters. Screen readers like JAWS and NVDA may truncate or awkwardly segment alt text longer than this. Most effective alt text is between 50-100 characters — long enough to be descriptive but short enough to remain concise.
No. Screen readers automatically announce "Image" before reading the alt attribute. Starting with "image of" creates redundancy. A visually impaired user would hear "Image. Image of a dog." Instead, begin directly with the subject: "Golden retriever puppy sitting on a lawn."
Decorative images are purely visual elements that convey no information — background patterns, ornamental borders, spacer graphics. They need alt="" (empty alt) so screen readers skip them, preventing visually impaired users from hearing irrelevant descriptions. You should also add role="presentation" for clarity.
Yes. Alt text is one of the primary signals Google uses to understand image content. It directly impacts Google Image search rankings and also contributes to the host page relevance for related keywords. Pages with optimized alt text generally rank better in both web and image search results.
Include the brand name, product name, distinguishing features (color, size, material), and the viewing angle. For example: "Samsung Galaxy S24 Ultra in titanium gray, front view showing the 6.8-inch display." Make each product image alt text unique.
Yes, but only one keyword per image and only where it reads naturally. "Women's waterproof hiking boots on a rocky trail" naturally includes the keyword. "Hiking boots best hiking boots cheap hiking boots buy" is keyword stuffing and will be penalized by Google.
The alt attribute is an accessibility requirement and SEO signal read by screen readers and search engines. The title attribute creates a hover tooltip visible when a user mouses over the image. Title provides virtually no SEO value and does not replace alt text for accessibility.
Yes. The generated HTML img tag and alt text can be pasted into any platform including Shopify, WordPress, Squarespace, Wix, and custom HTML. Most CMS platforms also have dedicated alt text fields in their image upload interface where you can paste just the text portion.
Describe the type of visualization, the data it shows, and the key takeaway. For example: "Bar chart comparing 2024 quarterly revenue: Q1 $2.1M, Q2 $2.8M, Q3 $3.2M, Q4 $3.9M, showing consistent growth." If the data is complex, provide a text summary elsewhere on the page and use a shorter alt text.
Omitting the alt attribute entirely (not even alt="") fails WCAG compliance and may trigger accessibility audit warnings. Screen readers will read the file name instead, which is usually meaningless (e.g., "IMG underscore 4392 dot jpg"). Always include the alt attribute, even if the value is empty for decorative images.