Alt Text Writing Template for Product Managers

What This Template Is For

Alt text is the text alternative that screen readers announce when a user encounters an image. It is also displayed when images fail to load and is indexed by search engines. Despite being one of the simplest accessibility requirements, alt text is consistently done poorly. Teams either leave it blank, write descriptions that are too vague ("image"), or write descriptions that are too long and miss the point of the image in context.

This template provides a decision framework and writing guide for four categories of images: informative images, decorative images, functional images, and complex images (charts, graphs, infographics). For each category, you get the rule, a pattern to follow, and concrete examples.

Use this template when auditing existing alt text across your product or when establishing alt text standards for new content. The accessibility audit template covers the broader audit process, and the screen reader template helps you verify that alt text works correctly in context. For understanding how alt text fits into overall accessibility requirements, the WCAG 2.2 success criterion 1.1.1 (Non-text Content) is the governing standard.

How to Use This Template

1. Start by categorizing every image in the page or feature you are auditing. Each image falls into one of four categories: informative, decorative, functional, or complex.
2. Apply the writing rule for that category. Decorative images get empty alt (alt=""). Informative images get a concise description. Functional images describe the action. Complex images get a short alt plus a longer description.
3. Review alt text in context. The same image can need different alt text depending on where it appears. A company logo in the header is functional ("Go to homepage"). The same logo in an About page is informative ("Acme Corp logo").
4. Test with a screen reader. Read through the page with VoiceOver or NVDA. Does the alt text make sense in the flow of surrounding content? Does it add useful information or is it redundant?
5. Document your alt text decisions in the audit table at the bottom of this template. This creates a reference for future updates and helps onboard new content authors.
6. Establish a review process for new images. Every image added to the product should have alt text reviewed before it ships.

The Template

Alt Text Decision Tree

Use this decision tree to determine the correct alt text approach for any image.

Is the image purely decorative (adds visual appeal but no information)?
├── YES → Use alt="" (empty alt attribute, not missing alt)
└── NO → Does the image convey information?
    ├── YES → Is the information also in adjacent text?
    │   ├── YES → Use alt="" (avoid redundancy) or very brief alt
    │   └── NO → Is it a simple image or a complex image (chart/graph/infographic)?
    │       ├── SIMPLE → Write concise alt text (1-2 sentences max)
    │       └── COMPLEX → Write short alt + provide long description (aria-describedby or adjacent text)
    └── NO → Is it a functional image (button, link, icon)?
        ├── YES → Describe the action, not the image ("Search", not "magnifying glass icon")
        └── NO → Re-evaluate: the image is either decorative or informative

Category 1: Informative Images

Rule: Describe what the image communicates, not what it looks like. Keep it under 125 characters when possible.

Pattern: [What the image shows] + [why it matters in this context]

Writing checklist for informative images:

• ☐ Alt text describes the content, not the container ("Dashboard with metrics" not "Screenshot of a dashboard")
• ☐ Alt text adds information not already in surrounding text
• ☐ Alt text is under 125 characters (screen readers handle longer text but users prefer concise)
• ☐ Alt text does not start with "Image of" or "Picture of" (the screen reader already announces it as an image)
• ☐ Alt text uses the same terminology as the surrounding content

Category 2: Decorative Images

Rule: Use an empty alt attribute (alt=""). Do not omit the alt attribute entirely. A missing alt attribute causes screen readers to announce the file name, which is worse than no description.

When an image is decorative:

• Background patterns and textures
• Divider lines and spacers
• Icons that are adjacent to text that says the same thing (a phone icon next to the word "Phone")
• Stock photos used purely for visual appeal with no informational content
• Repeated logos that have already been described elsewhere on the page

Image Type	Implementation
Decorative background	alt="" or use CSS background-image instead of
Divider graphic	alt="" and role="presentation"
Icon next to label	alt="" (the label provides the text alternative)
Aesthetic stock photo	alt=""

Common mistake: Marking meaningful images as decorative because they are "just illustrations." If removing the image would reduce the user's understanding of the page, the image is informative, not decorative.

Category 3: Functional Images

Rule: Describe the action or destination, not the appearance of the image. When an image is a link or button, the alt text serves as the link text.

Pattern: [Action the user will take] or [Destination the user will reach]

Writing checklist for functional images:

• ☐ Alt text describes what happens when the user activates the control
• ☐ Alt text does not describe what the icon looks like
• ☐ If the image is inside a link that also has text, and the text already describes the destination, use alt="" to avoid redundancy
• ☐ Button images have alt text that matches or is equivalent to any visible label

Category 4: Complex Images (Charts, Graphs, Infographics)

Rule: Provide a short alt text summarizing the key takeaway, plus a longer text description of the data. The longer description can be in an adjacent paragraph, a linked page, or via aria-describedby.

Pattern: Short alt: [Chart type] showing [key finding]. Long description: the data points, trends, and conclusions.

Implementation patterns:

<!-- Pattern 1: Adjacent data table -->
<img src="chart.png" alt="Bar chart showing Q3 revenue up 18% vs Q2">
<table>
  <!-- Full data table with all values -->
</table>

<!-- Pattern 2: aria-describedby -->
<img src="chart.png" alt="Line graph: churn declined from 8% to 3%"
     aria-describedby="chart-description">
<div id="chart-description" class="sr-only">
  <!-- Detailed description for screen readers -->
</div>

<!-- Pattern 3: Expandable details -->
<img src="infographic.png" alt="5-step product launch process">
<details>
  <summary>Text version of this infographic</summary>
  <!-- Full text alternative -->
</details>

Alt Text Audit Table

Use this table to document the alt text audit for a specific page or feature.

Alt Text Style Guide

Document your team's conventions so all content authors write consistent alt text.

Review Process