PDFAccess PDF to accessible web content
← Journal
Guide

Alternative Text for Images: Principles, Examples, and Pitfalls

5 min min read

Alternative text is one of the most fundamental accessibility techniques — and one of the most frequently implemented incorrectly. WCAG 1.1.1 requires all non-text content to be described in text, but what that means in practice depends entirely on the purpose of the image. This article covers the principles, concrete examples, and the classic mistakes to avoid.

What Is Alternative Text?

Alternative text — commonly called alt text — is a textual description attached to an image in HTML via the alt attribute on the <img> element. Screen readers read the alt text aloud in place of the image, and it is displayed in the browser if the image fails to load. For users who cannot see the image, the alt text is their only access to the image’s content.

WCAG 2.1 Success Criterion 1.1.1 (Non-text Content, Level A) requires that all non-text content — images, icons, charts, diagrams, and CAPTCHAs — has a text alternative that conveys the same purpose or information as the visual element. The criterion sits at Level A, meaning it represents an absolute minimum: without it, a website is effectively inaccessible to blind users and screen reader users.

Success Criterion 1.1.1 is consistently one of the most frequently violated requirements in supervisory reports from the Danish Agency for Digital Government — not because the technique is complicated, but because deciding what the alt text should actually say requires deliberate effort and content judgement.

Decorative Images: When Is Alt Text Wrong?

Not every image needs alt text — and this is an important distinction. WCAG 1.1.1 recognises four image types, each with its own requirement:

  • Informative images: Images that convey information not present in the surrounding text. These require a descriptive alt text that covers the content.
  • Functional images: Images used as links or buttons — such as a magnifying glass icon on a search button. The alt text must describe the function, not the appearance: alt="Search" rather than alt="Magnifying glass icon".
  • Decorative images: Images that are purely visual and add no information beyond what the surrounding text already provides. Here, the alt attribute is set to an empty string (alt=""), so the screen reader skips the image without announcing it.
  • Complex images: Charts, diagrams, and infographics containing dense information require both a brief alt text and a more detailed textual description elsewhere on the page — either as a figure caption or in the body text.

The most common failure is not a missing alt attribute, but misclassification: decorative images that receive alt text anyway (creating noise for screen reader users), or informative images treated as decorative and left with nothing.

Context Determines Content

The same image can require entirely different alt text depending on the context in which it appears. A photograph of a person at a computer might illustrate an article about remote working and legitimately be treated as decorative with alt="". In another context — used as a profile photo for a named employee — it requires alt text such as alt="Sophie Anderson, web accessibility consultant".

The question to always ask: What does a user lose if they cannot see this image? If the answer is information that does not appear elsewhere on the page, alt text is required. If the image is purely visual support for text that already communicates the same thing, it can be treated as decorative.

Principles for Good Alt Text

Good alt text is specific, concise, and conveys the image’s purpose — not its visual properties. The key principles:

Describe the purpose, not the appearance. For a chart showing that 73% of public sector websites in an audit failed to meet WCAG 2.1 AA, alt="Bar chart with blue and grey bars" is useless. A meaningful alt text is: alt="Bar chart: 73% of audited public sector websites did not meet WCAG 2.1 AA. Source: Danish Agency for Digital Government supervisory report 2023." Where statistics cannot be summarised concisely, they belong in the body text — and the alt text can indicate what the chart shows and direct readers there.

Avoid redundant prefixes. Alt text should not begin with “Image of…”, “Photo of…”, or “Graphic showing…”. The screen reader already announces the element type. Begin directly with the content.

Keep it concise. Alt text for simple images should typically not exceed 100–150 characters. More complex information belongs in a figure caption or body text — not solely in the alt attribute.

Do not repeat surrounding text. If the image’s content is already clearly communicated by adjacent text, treat the image as decorative with alt="". Repetition creates noise and unnecessarily extends navigation for screen reader users.

Functional images are described by their action. A button with a download icon should have alt="Download report", not alt="Download arrow". The question is: what happens when the user activates the element?

Common Pitfalls

Automated accessibility scanning tools such as WAVE or axe DevTools can quickly identify images with no alt attribute at all — but they cannot assess whether an existing alt text is meaningful. That requires manual review. The most widespread problems are:

Filenames as alt text. Many CMS platforms and conversion tools automatically insert the filename: alt="IMG_4872.jpg" or alt="annual-report-2024-final-v3.png". This provides no useful information for the screen reader user and does not satisfy WCAG 1.1.1.

Generic text without context. alt="Image", alt="Photo", or alt="Graphic" are technically present but communicate nothing useful. The same applies to image links with alt="Click here" or alt="Read more" — a screen reader user navigating by links hears a list of identical instructions with no indication of where each one leads.

Alt text that repeats the page heading. On pages with a decorative hero image placed alongside a heading, the heading is frequently used as the image’s alt text. This produces a double announcement for screen reader users who hear the heading stated twice in immediate succession.

Decorative images with alt text. Illustrations, background patterns, and layout elements should have alt="". If alt text is added to them regardless, it creates unnecessary delay and noise in the navigation flow.

CAPTCHA without an alternative. CAPTCHA images are a special case under WCAG 1.1.1: because the purpose is to distinguish humans from automated systems, the correct answer cannot be provided in the alt text. The standard requires an alternative format — such as an audio CAPTCHA or a text-based puzzle — so users who cannot see the image can still complete the action.

Alt Text in PDF Documents

PDF documents carry the same fundamental requirements for image description as HTML — but implementation differs. In a PDF/UA-compliant file, images must either have alternative text specified within the document’s tag structure via the <Figure> tag, or be marked as artefacts if they are decorative.

In practice, alt texts are frequently absent from PDF documents — particularly in files exported from Word or InDesign without careful attention to accessibility settings. A document created with correct heading styles and exported with “Document structure tags for accessibility” enabled in Word will typically lack alt texts on images unless they have been explicitly added in Word via the “Alt Text” field in the image settings panel.

Scanned PDF documents are a specific case: the entire page is treated as an image layer, and OCR text recognition does not address the need for individual image descriptions. When a scanned PDF is converted to HTML, any image elements lacking alt text are surfaced in the output and flagged as warnings in WCAG validation — making them straightforward to address before publication. See also the articles on the PDF/UA standard and PDF to HTML for more on accessibility requirements for document formats.

Checklist: Alternative Text

Use this checklist when reviewing images on your website or in your documents:

  • All informative images have a descriptive alt text conveying the image’s purpose — not its appearance (WCAG 1.1.1)
  • Decorative images have alt="" — an explicitly empty attribute, not an omitted one
  • Filenames, “Image of”, and “Photo of” do not appear in alt texts
  • Functional images (icons in links and buttons) describe the action, not the element
  • Complex images (charts, diagrams, infographics) have a brief alt text and a detailed textual description
  • Image links have alt text describing the destination or action
  • CAPTCHA images have an accessible alternative
  • Alt texts do not repeat information already present in the surrounding content