Alt Text

What is alt text?

Alt text (short for alternative text) is a written description added to an image using the HTML alt attribute. It tells screen readers, search engines, and users on slow connections what an image shows or does. Alt text is one of the oldest and most basic accessibility requirements on the web.^[1]

Why does alt text matter?

When a screen reader finds an image with no alt text, it reads the filename instead. Users hear something like "IMG_3847.jpg" or "banner_v3_final.png" — which means nothing. According to WebAIM's 2024 analysis, missing alt text is one of the top five accessibility errors on the web, found on 54.5% of home pages tested.^[3]

Alt text also helps users who turn off images to save data. And search engines use it to understand what images show, so it directly affects SEO.

For content teams managing large websites — government portals, university sites, or insurance information hubs — every image needs correct alt text. On a site with thousands of pages, a single CMS template with a missing alt attribute can create hundreds of WCAG failures at once.

How do you write good alt text?

The right approach depends on the image type:

• Informative images — Describe what the image shows, briefly. A photo of staff reviewing a dashboard might read: "Two analysts reviewing website traffic data on a monitor."
• Functional images — If an image is a link or button, describe the action, not the picture. A magnifying glass icon should say "Search," not "magnifying glass."
• Decorative images — Images that add no information should have an empty alt attribute (alt=""). This tells screen readers to skip them entirely.^[2]
• Complex images — Charts, graphs, and infographics need a short alt text summary plus a longer description nearby or on a linked page.
• Text in images — If an image contains text, that text must appear in the alt attribute word for word.

Keep alt text under 125 characters when possible. Do not start with "Image of" or "Photo of" — screen readers already announce that an image is present.

What are common alt text mistakes?

These patterns come up often in accessibility audits:

• No alt attribute at all — The most common failure. Violates WCAG 1.1.1 at Level A.
• Filename as alt text — Happens when a CMS auto-fills the alt field with the file path.
• Generic text — Values like "image" or "photo" add nothing useful.
• Repeating the caption — If the same text appears in the caption and the alt attribute, screen reader users hear it twice.
• Overly long descriptions — A 200-word alt text on a chart is hard to listen to. Use a structured long description instead.

How is alt text tested in an audit?

Alt text is one of the first things automated tools check. Lighthouse, axe, and WAVE can detect missing alt attributes or alt text that looks like a filename. But no tool can judge whether the text is accurate or useful — that takes human review.^[3]

IT teams can add automated alt text checks to their CI/CD pipeline to catch the obvious errors early. Content teams should have clear guidelines for writers and editors. And legal teams should know that missing alt text is a Level A failure — the most basic WCAG requirement — which means it carries the highest compliance risk.

Organizations subject to EU, UK, or US accessibility law should treat alt text as a baseline requirement, not an optional enhancement. The WCAG standard lists it as a Level A rule — the most fundamental tier of conformance.

How Askem Helps

On large sites — government portals, university websites, insurance information hubs — checking every image by hand is not practical. Automated quality assurance tools scan pages and flag images that are missing an alt attribute or that have an alt value that looks like a filename. Tools like Askem run continuous scans so that when new content is published, missing alt text is caught before it accumulates into hundreds of WCAG Level A failures. This gives content teams a clear list of pages to fix, ranked by priority.

Sources

1. W3C — WCAG 2.2 Success Criterion 1.1.1 Non-text Content: https://www.w3.org/TR/WCAG22/#non-text-content
2. W3C WAI — An alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
3. W3C WAI — Images Tutorial: https://www.w3.org/WAI/tutorials/images/