Image alt text: accessibility meets AI

What is alt text and why is it crucial?

The alt attribute, often called "alt text", is a piece of text you add to an image in HTML. Originally it is intended as alternative text displayed when an image cannot be loaded, or read aloud by screen readers for blind and visually impaired users. But the function of alt text extends far beyond accessibility alone.

AI models that analyze web content cannot "see" images the same way humans do. They depend on alt text to understand what an image represents and how it relates to the surrounding content. A page with informative alt text gives AI models a much more complete picture of the content than a page where images stand without descriptions. This principle ties into the broader readability optimizations that make your content more AI-friendly.

Good versus bad alt text

The difference between good and bad alt text is often the difference between a description that provides context and one that adds nothing. Let us illustrate this with concrete examples.

<!-- BAD: too vague, no context -->
<img src="team.jpg" alt="photo" />
<img src="chart.png" alt="chart" />
<img src="product.jpg" alt="image of product" />

<!-- BAD: keyword stuffing -->
<img src="team.jpg" alt="AEO SEO team Amsterdam marketing agency SEO specialist" />

<!-- BAD: too long, an entire story -->
<img src="team.jpg" alt="This is a photo of our amazing team of 12 people
who all work very hard on SEO and AEO projects for our clients
in Amsterdam and the rest of the Netherlands and sometimes beyond" />

<!-- GOOD: descriptive and concise -->
<img src="team.jpg" alt="The AEO Expert team during a strategy session at the Amsterdam office" />

<!-- GOOD: describes what the chart shows -->
<img src="chart.png" alt="Bar chart showing AI citations increased by 340% in 2025 compared to 2024" />

<!-- GOOD: product with relevant details -->
<img src="product.jpg" alt="Blue wireless keyboard with backlit keys, angled front view" />

Guidelines for effective alt text

• Describe the content and function of the image, not its appearance. "Chart showing the rise of AI usage" is better than "red and blue chart".
• Keep alt text concise, ideally between 5 and 15 words. Screen readers read the full text aloud, so brevity matters.
• Avoid starting with "image of" or "photo of". Screen readers already announce that it is an image.
• Use relevant keywords where they fit naturally, but avoid keyword stuffing. The alt text should primarily describe the image.
• For decorative images (lines, background patterns) use an empty alt attribute: alt="". This tells screen readers to skip the image.

Alt text for different types of images

Not every image requires the same approach. The type of image determines how you can best formulate the alt text.

Informative images

These are images that convey factual information, such as photos, illustrations and diagrams. The alt text should convey the essence of the information the image communicates.

<!-- Informative photo -->
<img src="schema-org-example.png"
     alt="Screenshot of JSON-LD schema markup in the source code of an article, with Article type and author property highlighted" />

<!-- Diagram -->
<img src="scan-flow.svg"
     alt="Flowchart of the scanning process: URL input, fetch HTML, run 15 detectors, calculate score, generate report" />

Functional images

Images that function as links or buttons should have alt text that describes the action, not the image itself.

<!-- Logo as link to homepage -->
<a href="/">
  <img src="logo.svg" alt="AEO Expert - back to homepage" />
</a>

<!-- Social media icon as link -->
<a href="https://linkedin.com/company/kobalt-digital">
  <img src="linkedin-icon.svg" alt="Follow Kobalt Digital on LinkedIn" />
</a>

<!-- Search button -->
<button type="submit">
  <img src="search-icon.svg" alt="Search" />
</button>

Complex images: charts and infographics

Charts, infographics and other complex visual elements often contain more information than fits in a short alt text. In these cases, you can combine a concise alt text with a more extensive description elsewhere on the page.

<!-- Complex chart with extended description -->
<figure>
  <img src="ai-adoption-chart.png"
       alt="Line chart: AI adoption by businesses rose from 20% in 2023 to 72% in 2026"
       aria-describedby="chart-description" />
  <figcaption id="chart-description">
    The chart shows the adoption of AI tools by Dutch businesses over four years.
    In 2023, 20% actively used AI tools, in 2024 it was 38%, in 2025 it rose to 55%,
    and in 2026 it reached 72%. The strongest growth was between 2024 and 2025.
  </figcaption>
</figure>

Alt text and AI models

The relationship between alt text and AI goes both ways. On one hand, AI models use alt text to understand the visual content of a page. On the other hand, AI tools can help generate alt text. But for AEO value, the former is most important.

• AI crawlers index alt text as part of the page content. An image without alt text is effectively invisible to AI.
• Language models use alt text to better understand the context and topic of a page.
• Good alt text strengthens the thematic relevance of your page. If you write about Schema.org and your images have alt text with "schema markup example", this confirms the topic.
• AI models that are multimodal (processing text and images) compare alt text with what they see in the image. Inconsistency can reduce trust.

Alt text and heading structure: mutual reinforcement

The value of alt text is strengthened by a good heading hierarchy. When an image sits directly under an H2 heading with the topic "Schema.org implementation" and the alt text describes "Screenshot of JSON-LD code in an Article schema", then heading and alt text reinforce each other thematically. AI models interpret this contextual combination to determine the relevance of your page.

Alt text and Open Graph images

Do not forget that your Open Graph images also need alt text via the og:image:alt tag. This alt text is displayed when the OG image cannot be loaded in social media previews and is used by AI models as an additional context signal.

<!-- Open Graph image with alt text -->
<meta property="og:image" content="https://aeo-expert.nl/images/og-alt-text.jpg" />
<meta property="og:image:alt" content="Comparison of good and bad alt texts with code examples" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Auditing and improving alt text

Most websites have dozens to hundreds of images. Manually checking every alt text is time-consuming but valuable. Here is a systematic approach.

1. Use the browser DevTools (F12) and search for img elements without an alt attribute or with an empty alt attribute on non-decorative images.
2. Install an accessibility tool like axe DevTools or WAVE that automatically detects missing alt text.
3. Prioritize images on your most important pages: homepage, product pages, blog posts and landing pages.
4. Check whether existing alt text is actually descriptive and does not just contain "image" or the filename.
5. Add alt text to all new content as part of your publication process. Make it mandatory, not optional.

Alt text in a CMS workflow

The biggest challenge with alt text is not writing it, but consistently applying it in your daily workflow. In a CMS like WordPress or Laravel with Filament, you can enforce this by making the alt field mandatory when uploading images. Train your content team to enter a descriptive alt text immediately with every upload. This takes only a few seconds per image but yields great benefits for both accessibility and AI visibility. Alt text is one of the many factors that contribute to your overall AEO score, and systematically applying it is a sign of professional content management.

Key takeaways

• Alt text is not an optional addition: it is legally required for non-decorative images under WCAG 2.2.
• AI models use alt text as a primary signal to understand the visual content of a page.
• Good alt text is descriptive, concise (5 to 15 words) and avoids keyword stuffing.
• Complex images like charts deserve a short alt text plus an extended figcaption.
• Make alt text mandatory in your CMS workflow to ensure consistent quality.

Frequently asked questions

Every image without alt text is a missed opportunity to tell AI models what your page contains. It is like publishing a book where all illustrations remain undescribed.