Properly formatted alt text is a concise, descriptive sentence that conveys the image’s content and function without redundant phrases like “image of” or “photo of.” It should be specific enough for a screen reader user to understand the visual context and include relevant keywords naturally rather than stuffing them. The ideal length is usually between 5 and 125 characters, though complex images may require more.
Why Alt Text Formatting Matters for WCAG and SEO
Screen readers vocalize alt text to users who cannot see the image, so the formatting directly impacts their experience. If the text is too long, it disrupts the flow of the page; if it is too vague, it provides no value. Web Content Accessibility Guidelines (WCAG) prioritize functional equivalence, meaning the text must serve the same purpose as the image. If the image is decorative, the alt attribute should be empty (alt="") so screen readers skip it entirely.
Search engines also parse alt text to understand image content for image search results. However, search engines penalize keyword stuffing, where keywords are jammed into the text without grammatical sense. Proper formatting balances human accessibility with machine readability. A well-formatted string helps both audiences: it sounds natural when read aloud and contains clear semantic signals for indexing.
The Golden Rules: Length, Punctuation, and Keywords
Keep alt text short and direct. Most screen readers cut off alt text after 125 characters, so front-load the most important information. Avoid starting with “image of,” “graphic of,” or “picture of,” as the screen reader already announces that the element is an image. This saves valuable character space for actual description.
Use standard punctuation and capitalization. Alt text is not a keyword list; it is a sentence fragment or full sentence. Use commas to separate distinct visual elements and periods if you write a complete sentence. Keywords should appear naturally within the description. If you are describing a “red leather handbag,” the words “red,” “leather,” and “handbag” should appear in a logical grammatical order, not as a comma-separated list like “handbag, red, leather, bag, purse.”
Step-by-Step: How to Format Alt Text Correctly
Start by identifying the image’s function. Is it a button, a logo, or a product photo? A logo might need only the brand name, while a product photo needs details about color, material, and style. Next, describe what is visible without assuming knowledge the user doesn’t have. Mention colors and shapes when they add meaning, and include text from the image only when it is not already available elsewhere on the page.
Consider this worked example. You have a product photo of a red leather handbag.
Bad Alt Text: bag This is too vague. It doesn’t tell the user what kind of bag, what color, or what material. It fails both accessibility and SEO goals.
Better Alt Text: Image of a red leather handbag This is better but wastes space with “Image of.” It also lacks specific detail about the style.
Properly Formatted Alt Text: Red leather tote bag with gold hardware on white background This string is specific, descriptive, and grammatically sound. It identifies the item (tote bag), the material (leather), the color (red), and distinctive features (gold hardware). It avoids redundant prefixes and fits comfortably within character limits.
When writing for complex charts or graphs, alt text alone may not suffice. Use the longdesc attribute or a nearby text description for detailed data, keeping the alt attribute brief, such as Bar chart showing Q3 sales growth by region.
Common Formatting Mistakes to Avoid
The most frequent error is redundancy. Adding “image of” or “graphic of” is unnecessary because assistive technology announces the image role automatically. Another common mistake is keyword stuffing. Writing red leather handbag purse tote bag women’s fashion accessory reads poorly to a screen reader and looks spammy to search engines. Stick to natural language.
Do not leave the alt attribute empty unless the image is purely decorative. An empty alt="" tells the screen reader to ignore the image, which is correct for a decorative border or spacer but wrong for a product photo. If you omit the alt attribute entirely, some screen readers will read the filename, which is often unreadable (e.g., IMG_4521.jpg).
Avoid using alt text for captions or titles. If the image has a visible caption, the alt text should not repeat it exactly. The alt text should describe the visual content, while the caption provides context or commentary. If the text in the image is already present in the page content (like a heading), you may not need to repeat it in the alt text.
Automating Correct Formatting with AltTextAI
Manually writing unique, compliant alt text for hundreds of product images is time-consuming and prone to inconsistency. AltTextAI generates WCAG-compliant descriptions by analyzing the visual content in context. It distinguishes between products and backgrounds, ensuring the description focuses on the subject rather than irrelevant details. This context-aware approach helps avoid generic descriptions and ensures keywords are integrated naturally rather than forced.
For e-commerce catalogs, the tool processes bulk uploads, creating unique alt text for each item. This ensures that every image in your library receives a distinct, accurate description tailored to its specific visual content. The output is designed to meet accessibility standards while remaining SEO-friendly, reducing the manual effort required to format each string correctly.
Alt Text Formatting Checklist
Before publishing, review your alt text against these criteria:
- Is it concise? Ideally under 125 characters.
- Is it descriptive? A blind user can visualize the image from the text alone.
- Is it free of redundancy? No “image of” or “photo of” prefixes.
- Are keywords natural? They fit grammatically into the sentence.
- Is punctuation correct? Use commas and periods as you would in standard writing.
- Is it accurate? It matches what is actually visible in the image.
- Is it unique? Different images have different alt text, even if they are similar products.
If you are unsure whether a specific image needs alt text, ask yourself if removing the image would change the meaning of the page. If yes, it needs descriptive alt text. If no, it is likely decorative and needs an empty alt attribute.