Real-world examples of implementing alt text for images that actually help users

Strong, realistic examples of implementing alt text for images in modern products

Let’s skip the theory and go straight into examples of implementing alt text for images the way real teams actually use them. Then we’ll unpack the patterns behind each example so you can reuse them.

Example of alt text for product images in ecommerce

Ecommerce is where bad alt text really hurts: people literally can’t buy what they can’t understand. Here’s a straightforward example of implementing alt text for images on a product page.

Scenario: Product detail page for a pair of running shoes.

• Bad alt text: alt="shoe"
• Better alt text: alt="Men’s blue Nike Pegasus 40 running shoe, side view"

Why this works:

• It names the product in a way that matches the visible label.
• It includes color and model, which matter for purchase decisions.
• It briefly notes the angle (side view), which helps users understand what they’re seeing.

Now imagine a gallery of the same shoe with multiple views.

• Thumbnail 1: alt="Men’s blue Nike Pegasus 40 running shoe, side view"
• Thumbnail 2: alt="Men’s blue Nike Pegasus 40 running shoe, top view"
• Thumbnail 3: alt="Men’s blue Nike Pegasus 40 running shoe, sole with tread pattern"

Here, the best examples of ecommerce alt text distinguish images by purpose: one helps compare shape, one helps check fit, one helps evaluate traction. These are real examples of implementing alt text for images that directly support the user’s task.

Pattern: Describe what a shopper needs to know to decide, not every aesthetic detail.

Authoritative guidance: The W3C Web Accessibility Initiative recommends describing the function of the image in context, which is exactly what these examples include.

Best examples of alt text for charts and dashboards

Data visualizations are where many teams give up and write “sales chart” or nothing at all. That’s a problem, especially in analytics tools where the chart is the entire point.

Scenario: A line chart showing monthly sales for 2024 in a SaaS dashboard.

• Bad alt text: alt="line chart"
• Better alt text: alt="Line chart showing monthly subscription revenue rising from \(120,000 in January 2024 to \)210,000 in October 2024"

If the chart is complex, the alt attribute can summarize the trend, while a nearby text description or data table provides detail. For example:

• Alt text: alt="Line chart summarizing 2024 monthly revenue trends; detailed data available in following table"

Then, include an actual table immediately below with the numbers. This pattern aligns with accessibility best practice from organizations like Section508.gov and the W3C.

Another example of effective alt text:

Scenario: Bar chart comparing conversion rates for three campaigns.

• Alt text: alt="Bar chart showing Campaign A at 3% conversion, Campaign B at 4.5%, and Campaign C at 2%"

These examples of implementing alt text for images show that you’re not describing the visual style of the chart; you’re conveying the insight a sighted user would get.

Examples of implementing alt text for images in social media and marketing

Social platforms and marketing tools now push creators to add alt text, but the default is often either empty or wildly over‑optimized for SEO.

Scenario: Company posts an announcement image on a corporate blog and shares it on social.

The image is a banner with text: “New accessibility features launching July 2025.”

• Bad alt text: alt="accessibility banner"
• Better alt text: alt="Text: New accessibility features launching July 2025"

If the graphic contains both text and meaningful imagery, you can blend them:

• Alt text: alt="Smiling woman using a laptop with a screen reader, with overlaid text: New accessibility features launching July 2025"

Another example of implementing alt text for images in social media:

Scenario: Instagram post of a team volunteering at a local food bank.

• Alt text: alt="Ten employees from Acme Software standing in a food bank warehouse, smiling and holding packed grocery boxes"

These are real examples where the goal is to give non‑visual users the same social and emotional context that sighted users get, without turning the description into a novel.

Practical examples of decorative vs informative icons

Icons are where a lot of accessibility audits go sideways. Teams either describe every tiny icon or ignore all of them. The best examples live in the middle.

Scenario: A trash can icon that functions as a “Delete file” button.

• Bad pattern: alt="trash can icon"
• Better pattern: Use an accessible name on the button: aria-label="Delete file" and leave the image with alt="".

Scenario: A purely decorative checkmark used in a marketing hero section, next to benefit text that already says “Fast setup.”

• Correct alt usage: alt="" (empty) so screen readers skip it.

Scenario: An icon that conveys a warning with no visible text.

• Better pattern: aria-label="High CPU usage warning" on the control, while the image again gets alt="".

These examples of implementing alt text for images highlight a key principle: images that are already described by nearby text, or that are purely decorative, should use empty alt attributes. This approach is consistent with guidance from the W3C alt decision tree.

Examples include complex UI screenshots and onboarding tours

Screenshots are notoriously hard to describe. You don’t want to narrate every pixel; you want to explain what the user should learn from the screenshot.

Scenario: A help article showing a screenshot of a settings page with a highlighted “Enable two-factor authentication” toggle.

• Bad alt text: alt="screenshot of settings page"
• Better alt text: alt="Account settings page with the ‘Enable two-factor authentication’ option highlighted"

You’re not listing every control; you’re calling out the specific element the documentation is teaching the user to find.

Another example of implementing alt text for images in onboarding:

Scenario: In‑app tour step with a screenshot of a dashboard and a tooltip saying, “Track your daily active users here.”

• Alt text: alt="Analytics dashboard with a chart labeled Daily Active Users highlighted"

These examples include just enough context to support the task: find this thing, click this thing, understand this metric.

Best examples of alt text for people and profile images

People photos are everywhere: profile cards, team pages, testimonials. The right approach depends on why the image is there.

Scenario: Employee profile card with a headshot, name, and role.

• Visible text: “Jordan Lee, Product Manager.”
• Alt text: alt="" (empty) if the name and role are already present in text.

Screen readers will announce the person’s name from the text; repeating it in alt text usually adds noise.

Scenario: Testimonial with a quote, name, role, and a photo that conveys context (for example, a doctor in a clinic using your software).

• Alt text: alt="Dr. Maria Gomez using a tablet in an exam room"

Here, the context of a physician in a clinical setting supports the story. It’s an example of implementing alt text for images where the visual reinforces credibility and use case.

For more background on inclusive language and representation, resources from institutions like Harvard’s Office of Equity, Diversity, Inclusion & Belonging can help guide how you describe people respectfully.

Real examples of alt text for educational and health content

Health and education sites often mix diagrams, illustrations, and procedural images. Poor descriptions can confuse users or even mislead them.

Scenario: A step‑by‑step guide on handwashing technique on a public health site.

• Alt text for an instructional image: alt="Hands being scrubbed together with soap, covering palms and fingers"

Another step might be:

• alt="Right hand scrubbing the back of the left hand and between fingers"

These are real examples of implementing alt text for images where safety and clarity matter. Public health organizations like the CDC and NIH emphasize clear, plain‑language instructions, and your alt text should follow that same tone.

Scenario: A biology textbook diagram showing the human heart with labeled chambers.

• Alt text: alt="Diagram of the human heart with four chambers labeled: right atrium, right ventricle, left atrium, and left ventricle"

If you need more detail, you can provide a caption or adjacent text that describes blood flow, while the alt text focuses on the core idea: what the diagram is.

Patterns behind the best examples of implementing alt text for images

Looking across these scenarios, a few patterns show up again and again in the best examples:

1. Start with purpose, not pixels
Ask: Why is this image here? What decision or understanding does it support? The examples of implementing alt text for images above always answer that question first.

• Product photos support purchase decisions.
• Charts support insight and comparison.
• UI screenshots support wayfinding and task completion.

2. Match the surrounding content
Alt text should feel like it belongs in the same voice and level of detail as the rest of the page. Overly technical descriptions in a plain‑language guide (or vice versa) feel jarring.

3. Avoid redundancy
If visible text already explains the image, your best move is usually alt="". Reducing repetition is a direct quality‑of‑life improvement for screen reader users.

4. Keep it short, then expand nearby if needed
Good examples include 5–20 words in the alt attribute. If you need more, use nearby paragraphs, captions, or an accessible data table.

5. Don’t write for search engines
Alt text is for people, not keyword density. Ironically, the best SEO benefit comes from writing natural, accurate descriptions that match the content and intent.

Implementing alt text in your workflow (and avoiding common traps)

Modern tooling makes it easier to apply these examples of implementing alt text for images across your stack.

In design tools (Figma, Sketch, XD)
Designers can label components with intended alt text or purpose so engineers don’t have to guess. For instance, a component note might say: “Alt: ‘Enable two-factor authentication option highlighted in settings page.’”

In code (HTML, React, native apps)

• For informative images: Use alt="meaningful description".
• For decorative images: Use alt="" and ensure no redundant labels.
• For interactive controls: Put the accessible name on the control (aria-label, aria-labelledby, or visible text), not on the image itself.

In content management systems
Most CMS platforms now prompt for alt text when you upload assets. Train editors with real examples, not vague rules. For instance, give them a short reference sheet with “before/after” alt text drawn from your own product.

In automated testing and audits
Automated tools can flag missing alt attributes, but they can’t tell you if the text is meaningful. Use them as a first pass, then spot‑check pages with real users or with a screen reader. The best examples of implementing alt text for images always come from listening to actual feedback.

For standards and legal context, the W3C Web Content Accessibility Guidelines (WCAG) remain the primary reference many organizations follow.

FAQ: Short answers with real examples

Q: Can you give a quick example of good alt text for a logo?
A: If the logo links to your home page, use the company name as the alt text, for example: alt="Acme Software". If the logo is purely decorative and repeated elsewhere, you can use alt="" so it’s skipped.

Q: What are simple examples of bad alt text I should avoid?
A: Avoid generic labels like "image", "photo", or "chart" when the image carries meaning. Also skip stuffing product keywords into alt text if they don’t actually describe what’s shown.

Q: How detailed should alt text be for complex diagrams?
A: Use the alt text for a concise overview, such as "Diagram of the human heart with four labeled chambers", and then provide a longer explanation in the surrounding text or in a linked description.

Q: Are there examples of when I should leave alt text empty on purpose?
A: Yes. Decorative images, spacer graphics, and icons that are already labeled by nearby text should typically use alt="". That keeps screen reader output focused on meaningful content.

Q: Do I need different examples of implementing alt text for images on mobile vs desktop?
A: The principles stay the same. What may change is context: if a mobile layout hides certain labels, you might adjust alt text or accessible names so users still get the right information.

If you treat these examples of implementing alt text for images as reusable patterns rather than one‑off fixes, you’ll end up with interfaces that are easier to understand for everyone, not just people using assistive technology.