facebook pixel
29Sep 2026

3 Step Alt Text for Images Checklist: Decide, Write, Audit

Editor reviewing image accessibility meaning

Alt text is the written description behind an image that assistive technology reads aloud when a person cannot see the picture itself. The single rule that matters above all others: write it to explain the image’s purpose on that specific page, not to please a search algorithm. Get that right and accessibility improves first, with any SEO advantage following as a welcome side effect rather than the goal.


TL;DR:

  • Over 2 million people in the UK live with sight loss, emphasizing the importance of accurate alt text for accessibility and fallback purposes.
  • Decorative images should have empty alt attributes to be skipped by screen readers, while functional and informative images require descriptive, concise alt text.
  • Good alt text should name the subject, explain its role on the page, and avoid unnecessary words or assumptions, typically using five to twenty words.
  • For complex visuals like charts or infographics, include a short alt and provide a detailed explanation in the page content; avoid embedding lengthy descriptions solely within the alt attribute.
  • Consistent decision-making and auditing—deciding if images add meaning, then properly describing or omitting—are key to maintaining accessible, user-friendly websites.

Brainiacmedia
Build A More Accessible Website
Brainiac Media combines web development, design, SEO, and web support to help businesses strengthen their digital presence.
Explore digital services

Table of Contents

What alt text is and why it matters

Screen readers cannot interpret pixels. When they reach an image, they read out whatever sits in the alt attribute, or say nothing at all if that attribute is intentionally left blank. This is why the W3C Web Accessibility Initiative states that every image should carry an alt attribute, even when that attribute is empty for purely decorative pictures. Leaving it out altogether forces a screen reader to guess, often reading the file name instead, which helps nobody.

Three alt attribute outcomes compared

Over 2 million people in the UK live with sight loss, according to RNIB, a figure that underlines why this small piece of code carries real weight. Alt text also steps in as a fallback whenever an image fails to load, whether that is a slow connection or a broken file path, so the reader still gets the meaning without the visual. Treating alt text as an accessibility requirement first tends to produce better, more usable content for everyone, including readers who never touch a screen reader.

When should you add alt text and when should you leave it empty

The decision comes down to one question: does the image add information the page would lose without it? If yes, describe that meaning. If the image is purely decorative, such as a background flourish or a repeated icon with no function, use an empty attribute, alt="", rather than skipping it entirely.

  • Decorative images (borders, stock patterns, spacing icons) get an empty alt attribute so screen readers skip over them.
  • Functional images (a search icon that submits a form, a logo that links home) need alt text describing the action, not the appearance.
  • Informative images (a photograph illustrating the article’s subject, a screenshot showing a step) need alt text that conveys what the reader would otherwise miss.
  • Grouped images showing the same subject only need one full description; repeated instances can carry an empty alt or a short label to avoid repetition.

This structure keeps you consistent across a whole site rather than making a fresh judgement call every time you upload a picture.

How to write alt text that actually helps readers

Good alt text is short, specific and written for the page it sits on, not recycled from a caption or a file name. Most images need somewhere between five and twenty words, roughly one plain sentence with normal punctuation, since screen readers use full stops and commas to pace their reading naturally.

  1. Lead with what matters: describe the subject and its role on the page before any secondary detail.
  2. Skip “image of” or “picture of”: screen readers already announce that it is an image, so those words waste the reader’s time.
  3. Avoid repeating nearby text: if a caption already says what the image shows, the alt attribute should add context rather than duplicate it.
  4. Never guess at emotion, gender or intent: describe what is visibly happening, not what you assume someone is thinking or feeling.
  5. Keep it keyword-free: stuffing in search terms produces clunky, inaccurate descriptions that fail the person actually listening.

As the GOV.UK Design System puts it, alt text should explain an image’s meaning in context, with longer explanations moved into the surrounding page text rather than crammed into the attribute itself.

Pro Tip: Read your alt text aloud without seeing the image. If it makes sense on its own, it will probably make sense to a screen reader too.

Special cases: charts, functional images, text and logos

Some images resist a simple one-line description, and public-sector accessibility guidance offers a consistent approach for each.

  • Functional images should be treated like link text: ask what the link would say if it were plain text, then use that phrase as the alt copy, a method recommended in the GOV.UK Design System.
  • Charts and infographics need a short identifying alt plus a fuller description or data table placed in the page content, since assistive technology cannot parse a graph on its own.
  • Images of text should have that text moved into HTML wherever possible; when an image is unavoidable, the words need to appear in the alt attribute or nearby copy, a point echoed in Home Office design guidance.
  • Logos and repeated visuals usually need the organisation’s name once per page; subsequent instances of the same logo can often use an empty alt to cut repetition.
Image type Alt text approach
Decorative background Empty alt attribute (alt="")
Functional icon or button Describe the action or destination
Chart or infographic Short alt plus full description in page text
Image of text Move text to HTML; otherwise include it in alt
Repeated logo Name once, empty alt on later instances

Nottinghamshire County Council’s guidance recommends exactly this split for complex visuals: a brief label in the attribute, with the substance carried in a structured table or paragraph nearby.

Poor alt text versus improved versions

Seeing the fix next to the fault makes the rules easier to apply than reading them in the abstract.

  • Weak: “image1234.jpg” → Better: “Red leather armchair in a lounge setting” (names the subject, drops the file name).
  • Weak: “Picture of team” → Better: “Marketing team presenting quarterly results in a meeting room” (adds context instead of a generic label).
  • Weak: “Click here” → Better: “Download the 2026 accessibility checklist PDF” (describes the destination, not the icon).
  • Weak: “Chart” → Better: “Bar chart showing sales growth by quarter, full data in table below” (points to where the detail lives).
  • Weak: “Decorative swirl” on a pure design flourish → Better: empty alt="" (nothing to describe, so say nothing).
  • Weak: “Man smiling happily” → Better: “Customer service adviser at a desk with a headset” (states what is visible, not an assumed emotion).

Each fix follows the same pattern: name the subject, add the missing context, and cut anything the reader does not need.

How to add and check alt text on your site

Adding alt text well takes minutes once the habit is set, and checking it takes even less time.

  1. In raw HTML, the attribute sits inside the image tag: <img src="chair.jpg" alt="Red leather armchair in a lounge setting">, or alt="" for anything decorative.
  2. In WordPress, add or edit the description in the Media Library’s alt text field, or directly within the Block Editor’s image block settings; when the same file needs different wording on different pages, duplicate the image rather than overwrite the original, as WordPress documentation suggests.
  3. Run a quick audit before publishing: inspect the element in your browser, turn on a basic screen-reader preview, or use an automated accessibility checker to flag missing or empty attributes that should not be.

Automated description tools can produce a useful first draft, but accessibility guidance from government accessibility blogs warns they often miss context or produce literal descriptions that need a human edit before they go live.

Our checklist for getting alt text right every time

We run every image through three steps: decide, write, audit. Decide whether the image adds meaning the page needs or is purely decorative. Write a concise description for the meaningful ones, pointing to a longer explanation in the page text for anything complex, such as a chart. Audit before publishing, checking that decorative images carry an empty attribute and functional images describe their action. It is a small discipline that keeps accessibility consistent across a whole website rather than left to guesswork on each new upload.

— Rob

The habit most teams get backwards

Most guidance on this topic treats alt text as a search engine optimisation trick with an accessibility footnote attached, when it should run the other way round. Write for the person using a screen reader first, and the search benefit tends to follow because clear, specific descriptions are exactly what a well-structured page needs anyway. The advice to “add keywords naturally” is where most writers go wrong: it produces alt text that reads like it was written for a machine, because it was.

What the research actually supports is far simpler than most style guides suggest. A five-word sentence describing what is visible, written the way you would say it to a friend on the phone, beats a carefully engineered phrase every time. If you take one thing from this guide, prioritise the decision step: is this image decorative or does it carry meaning? Get that single call right and most of the rest follows naturally.

The habit most teams get backwards — overview diagram

Get your images accessible without the guesswork

If auditing every image on your site sounds like a slow job to tackle alone, that is exactly the kind of technical clean-up our website development team handles as part of a wider build or refresh.

Brainiacmedia

We fold accessibility checks, including alt text review, into the sites we design and build, so the fix happens once rather than image by image. Get in touch for a free audit and we will show you where your current site stands.

Where this guidance comes from

This article draws on the W3C Web Accessibility Initiative, the GOV.UK Design System, RNIB, and Nottinghamshire County Council’s accessible content guidance. Government accessibility blogs and Home Office design guidance informed the sections on automated tools and images of text. Readers wanting a broader compliance view can also see our piece on website accessibility guidelines.

Sources

FAQ

What is an alt text for an image?

Alt text is a short written description added to an image’s code that screen readers announce aloud and browsers display if the image fails to load. It exists to convey the image’s meaning to someone who cannot see it, per W3C guidance.

How do I put alt text on an image?

In HTML, add it directly inside the image tag as alt="your description". In WordPress, enter it in the Media Library’s alt text field or the Block Editor’s image settings, duplicating the file if you need different wording elsewhere on the site.

How can I generate alt text for an image?

Automated tools can produce a first-draft description, but accessibility guidance cautions that they often miss context or describe images too literally. A human check, focused on what the image means on that specific page, is still necessary before publishing.

What is a good example of alt text?

A strong example names the subject and adds page-relevant context in one short sentence, such as “Red leather armchair in a lounge setting” rather than “chair” or “image1234.jpg”. For charts or infographics, a brief alt plus a fuller description in the surrounding text works best, as recommended by Nottinghamshire County Council.