Image Descriptive Text Strategy

1. The Four Image Attributes

Every content image on a website needs up to four types of descriptive text. Each serves a different audience and purpose.

How They Work Together

What Each Audience Receives

2. Image Classification & Treatment

Not every image needs all four attributes. The treatment depends on the image's purpose.

Content Images

Convey information, meaning, or context. Removing them would change the page's meaning.

• Product photos — what you're selling
• Gallery images — completed builds, project showcases
• Technical diagrams — spec drawings, exploded views, CAD renders
• Team/about photos — people behind the brand
• Before/after images — transformation shots

Functional Images

Trigger an action — links, buttons, navigation elements.

• Logo linking to homepage
• Social media icons linking to profiles
• Product thumbnails linking to product pages
• Search / cart / menu icons

Decorative Images

Add visual appeal but convey no information. Removing them wouldn't change meaning.

• Background textures and patterns
• Ornamental dividers and borders
• Ambient/mood photos used purely for atmosphere
• Icons that duplicate adjacent text labels

Quick Reference

3. The Alt Text Decision Tree

Use this flowchart when deciding what descriptive text an image needs. Based on the W3C WAI Alt Decision Tree.

4. How to Write Effective Alt Text

The Formula

For product and content images, follow this pattern:

Length

• Target: 80–140 characters. Long enough to be useful, short enough to not burden screen reader users.
• Screen readers do not cut off at 125 characters (that's a myth), but excessively long alt text becomes hard to listen to.
• If you need more than 150 characters, use aria-describedby for the extended detail.

Voice & Tone

• Be specific, not generic. "Steel truck chassis" is weak. "Patriot HD-4500 boxed steel frame with integrated crossmember gussets" is strong.
• Describe what matters. A product photo should describe the product. A lifestyle photo should describe the scene and context.
• Use the language your customers use. If your audience says "coilovers" not "coilover shock absorbers," match that.
• Be factual, not promotional. Alt text is not ad copy. Describe what you see, not what you're selling.

Good vs. Bad Examples

Rules

5. How to Write Captions

Captions are the visible text below an image, implemented with <figure> and <figcaption>. Unlike alt text, captions are for everyone.

Caption vs. Alt Text

When Captions Are Required

• Product photos on detail pages — caption describes key features or selling points
• Gallery images — caption tells the build story or identifies the vehicle
• Technical images — caption explains what the diagram illustrates
• Before/after photos — caption explains the transformation

When Captions Are Optional

• Product thumbnails in grid/catalog views (product name serves as caption)
• Hero images (the hero text itself provides context)
• Team headshots with name/title already displayed nearby

Example: Alt + Caption Working Together

Notice: the alt describes what you see (a close-up of a weld). The caption tells why it matters (welding standards, quality commitment). They complement, not duplicate.

6. Long Descriptions (aria-describedby)

Some images are too complex for a short alt text. Technical diagrams, size charts, spec drawings, exploded views, and infographics need an extended description.

When to Use Long Descriptions

• Charts and graphs — the data points matter, not just "a bar chart"
• Exploded-view diagrams — parts identification, assembly order
• Size/dimension charts — all measurements need to be in text
• Comparison images — before/after with measurable differences
• Maps and schematics — locations, routes, spatial relationships

Five Techniques (Ranked by Reliability)

1. Adjacent visible text or data table (best)

Place the description or data table directly on the page near the image. Works for all users, all technologies.

2. Collapsible <details> / <summary> (good for space)

3. aria-describedby (good for text-only descriptions)

4. Linked separate page (for very long descriptions)

A standard link to a dedicated description page. Discoverable and functional for all users.

5. longdesc attribute (deprecated — do not use)

Removed from HTML5. Unreliable browser support. Replace with any of the above.

7. E-Commerce Product Images

55% of e-commerce sites fail to provide adequate alt text for product images (Baymard Institute). This is both an accessibility failure and a missed SEO opportunity.

Product Image Alt Text Formula

Multiple Product Images

Each image in a product gallery needs unique alt text describing what that specific view reveals.

Color Variants

• Alt text must reflect the specific variant being shown
• When the displayed image changes based on user selection, the alt text must update dynamically via JavaScript
• If color names are unusual, include the base color: "Desert Sand (tan) powder coat"

Product Thumbnails in Catalog

• Thumbnails that link to product pages: alt describes the product (it's a functional image)
• If the product name is already visible as text near the thumbnail, use a shorter alt that adds visual detail not in the name

8. CSS Background Images

CSS background images have no native alt text mechanism. If a background image conveys meaning, you must add accessibility through markup.

Meaningful Background Images

Hero banners, section backgrounds with content imagery, and call-to-action backgrounds that set a scene.

Decorative Background Images

• No role="img" needed
• No aria-label needed
• This is the preferred location for decorative images — better than <img alt="">

SEO Note

9. Image SEO & Filenames

File Naming Convention

Google reads filenames for context. Use descriptive, hyphenated names.

SEO Signals by Attribute

Image Sitemap

Helps Google discover images it might miss, especially from CDN subdomains. Include in your sitemap.xml.

10. 12 Common Mistakes

11. WCAG & Legal Requirements

WCAG 2.2 Success Criteria

Legal Deadlines

• EU Accessibility Act: June 28, 2025 — enforces accessibility for all e-commerce sites selling to EU consumers
• US ADA Title II: April 24, 2026 (large entities), April 24, 2027 (smaller) — WCAG 2.1 AA compliance required for government-related sites; private sector increasingly exposed via case law
• WCAG 2.2: Approved as ISO/IEC 40500:2025 (October 2025) — now the international reference standard

12. Audit Checklist

Use this checklist during Phase 5 (Polish) to verify every image on the site. The Alt Text View mode (?alt) automates part of this, but manual review is still required for quality.

Automated Checks (Alt Text View)

• Every <img> has an alt attribute (present, not missing)
• Every <img> has a title attribute
• Images inside <figure> have a matching <figcaption>
• CSS background images that convey meaning have role="img" + aria-label

Manual Quality Checks

• No alt text is a filename
• No alt text begins with "image of" or "photo of"
• No alt text duplicates adjacent heading or link text
• Decorative images have alt="" (empty, not missing)
• Functional images describe the action/destination
• Complex images have both short alt + long description
• Product images have unique alt text per variant/angle
• Alt text is under 150 characters (or uses long-description mechanism)
• Dynamically loaded images have alt that updates with the image
• All <figure> elements include both alt on the <img> and a <figcaption>

Screen Reader Test

• Navigate through all images using the screen reader's image navigation shortcut
• Listen for: filenames being read, missing announcements, redundant text, unclear descriptions
• Verify that image links and buttons have understandable focus announcements

Visual Test

• Disable images in the browser — can you still understand the page content?
• Check that alt text appears in the broken-image placeholder and makes sense