Alt Text Done Right (and Wrong)

What alt text actually does

Screen readers announce the alt attribute of an image in place of the image. For blind and low-vision users, alt text is not “nice-to-have”—it can be the difference between understanding the content and missing essential details. The goal is to convey the purpose and information of the image in context, not to literally describe pixels.

When to write alt—and when to stay silent

• Informative images: Product photos, instructional illustrations, icons that communicate meaning → Write clear, concise alt.
• Controls: Image buttons and linked images → Alt must reflect the function (e.g., “Add to cart”), not the pixels.
• Decorative images: Purely visual flourishes, spacer graphics, redundant hero images with full text nearby → Use alt="".
• Complex charts/infographics: Provide a brief alt + a caption, summary, or link to a full text equivalent.
• Logos: Usually “Company Name.” If the logo is purely decorative and the company name is already text near it, consider alt="".

How to write useful alt text

1. Identify purpose: Why is the image here? What would be lost if it were removed?
2. Prioritize meaning over pixels: “Thermometer at 102°F” beats “red mercury column in a glass tube.”
3. Be concise: Aim for a short sentence fragment. Avoid “Picture of,” “Photo showing.” Screen readers already announce it as an image.
4. Include unique details: Model, color, size, variant—especially for shopping decisions.
5. Avoid repeating nearby text: Don’t restate captions or headings verbatim unless the image is the only source of that info.

10 real-world examples (Bad → Better)

1. E-commerce product main photo
   Bad: alt="Shoe"
   Better: alt="Men’s running shoe, black, Model X200, knit upper, white sole"
2. Swatch/variant thumbnail (selectable)
   Bad: alt="thumbnail"
   Better: alt="Blue—select color blue"
3. Logo in header linked to home
   Bad: alt="Logo"
   Better: alt="Acme Home"
4. Decorative hero background with the same headline in text
   Bad: alt="Smiling people in office"
   Better: alt="" (decorative)
5. Chart showing sales increased 18% QoQ
   Bad: alt="Bar chart"
   Better: alt="Quarterly sales up 18% from Q1 to Q2" + nearby text: “Q1: $2.1M; Q2: $2.5M”
6. “Add to cart” button rendered as an image
   Bad: alt="shopping cart icon"
   Better: alt="Add to cart"
7. Instructional diagram for assembling a chair
   Bad: alt="diagram"
   Better: alt="Step 2: attach backrest to seat using two M6 bolts" + short text instructions under the image
8. Headshot next to byline
   Bad: alt="Author photo"
   Better: alt="Jordan Smith" (name is the information)
9. Infographic with multiple stats
   Bad: alt="infographic with icons"
   Better: alt="Summary of survey results on telehealth adoption" + link: “Full text description of data”
10. Social icons that link to profiles
    Bad: alt="facebook icon"
    Better: alt="Acme on Facebook"

Pattern library rules for alt text (so teams get it right everywhere)

• Components own their alt logic. A product image component should accept structured props (title, color, variant) and compose the alt accordingly.
• Control images reflect function. If the image is interactive, the alt should describe the action (“Play video,” “Open filters”).
• Decorative by default, meaningful by exception. Background textures, dividers, and purely aesthetic illustrations should ship with alt="" and role="presentation" when appropriate.
• Charts require a text equivalent. Provide a concise alt and a programmatic, readable summary or table nearby.
• Fallbacks matter. If an image fails to load, ensure the alt still conveys the needed info (e.g., product name and variant).

Code patterns (HTML you can copy)

<!-- Informative product image -->
<img src="/products/x200-black.jpg"
     alt="Men’s running shoe, black, Model X200, knit upper, white sole">

<!-- Decorative flourish -->
<img src="/assets/bg-wave.svg" alt="" role="presentation">

<!-- Linked image (function over pixels) -->
<a href="/cart"><img src="/icons/cart.svg" alt="View cart"></a>

<!-- Chart with concise alt + text summary -->
<figure>
  <img src="/charts/sales-q1-q2.png" alt="Quarterly sales up 18% from Q1 to Q2">
  <figcaption>Q1: $2.1M; Q2: $2.5M; growth +18%.</figcaption>
</figure>

Common pitfalls that harm access

• Alt that repeats nearby text verbatim: Redundant and noisy. Add value or stay silent.
• Stuffing alt with SEO keywords: Hurts comprehension and trust; screen reader users are people, not bots.
• Describing pixels over purpose: “Blue rectangle with white text” says nothing about function or message.
• Using filenames as alt: alt="IMG_3456.jpg" is effectively silence.
• Forgetting state or variant: On PDPs, not naming color/size can make selections impossible.

Complex graphics: how to handle charts, maps, and infographics

Complex visuals often carry more information than is comfortable in a single alt string. Use a layered approach:

1. Concise alt: Summarize the takeaway (trend, comparison, outlier).
2. Visible caption or summary: Provide key data points and context in text next to the image.
3. Full data on request: Link to a table, data download, or “full text description” for deep dives.

Example: For a U.S. map of clinic locations, the alt might be “Map of clinic locations in 12 states; highest density in the Northeast,” with a caption listing states and counts. A separate link can provide the full address table.

Testing alt text quickly

• Turn off images in your browser or use a text-only view—does the page still make sense?
• Use a screen reader (NVDA on Windows, VoiceOver on Mac/iOS). Navigate images: Do they announce meaningful info or appropriate silence?
• Check interactive images: Are linked images and image buttons announcing their function (“Open menu,” “Download PDF”)?
• Audit templates: Don’t fix one page—fix the component so every use inherits the right behavior.

Why this matters legally and practically

When essential information is conveyed only through images without appropriate alternatives, blind and low-vision users are effectively excluded from services others receive. That can mean missed deadlines, failed purchases, or inability to access critical instructions. In accessibility matters, poor or missing alt text is frequently part of a broader pattern of barriers (unlabeled controls, broken focus, inaccessible forms). Addressing alt systemically helps prevent harm and improves overall usability.

How The Brensilber Law Firm helps (briefly)

If missing or misleading alt text (along with related barriers) denied you equal access to information or services, we can help translate your experience into clear, verifiable claims that drive meaningful fixes. We focus on evidence, impact, and outcomes that improve access for everyone who comes after you. Explore more resources or contact us to discuss your options.