Sian introducing the blog as a practical guide to alt-text, "It isn’t a technical afterthought. It’s part of how people experience your content, or don’t." An 8 minute read.

A practical, step-by-step guide for charity, third and public sector comms teams.  

We talk about alt text often. We remind people to add it. We tick the box. But earlier this year, one article made us stop and ask a slightly more uncomfortable question: Are we actually writing good alt text?

This post from the The A11Y Project has been around for a few years now, but the advice hasn’t aged a day.

A screenshot of the A11y project website and their How-To post about alt-text.

It’s clear. It’s human. And it doesn’t talk down to you. Most importantly, it reminded us that alt text isn’t a technical afterthought. It’s part of how people experience your content, or don’t.

So this blog is our attempt to answer the follow-up question we kept asking ourselves: What does “good alt text” actually look like in practice?

First: what alt text is (and what it isn’t)

Alt text is not:

  • A keyword dumping ground,
  • A caption rewrite,
  • A compliance checkbox.

Alt text is:

  • A short description of what matters in an image,
  • Context for someone who can’t see it,
  • Part of your storytelling, not separate from it. 

If your image disappeared tomorrow, alt text should still help someone understand why it was there.

The 5 most common alt text mistakes (and what to do instead)

1. Describing everything instead of what matters

Volunteer coordinator standing outside the community centre where weekly food parcels are distributed.

Common mistake

“A photograph of a woman wearing a green fleece standing outside a building with trees and people behind her.”

Why this doesn’t work: It lists objects, but gives no meaning. Someone reading this still doesn’t know why the image exists.

Better alt text

“Volunteer coordinator standing outside the community centre where weekly food parcels are distributed.”

Rule of thumb: Ask yourself: What’s the point of this image in this post? Describe that, not every visible detail.

2. Writing alt text like it’s a caption

Group of supporters chatting and smiling at an outdoor summer fundraiser in Edinburgh.

Common mistake

“We had the best day at our summer fundraiser! Thank you to everyone who came along.”

Why this doesn’t work: That’s commentary, not description. It assumes visual context the reader doesn’t have.

Better alt text

“Group of supporters chatting and smiling at an outdoor summer fundraiser in Edinburgh.”

Rule of thumb: Alt text explains the image. Captions add emotion, commentary, or calls to action. They do different jobs.

3. Starting with “Image of…” or “Picture showing…”

Laptop displaying the charity’s new events booking page.

Common mistake

“Image of a laptop on a desk.”

Why this doesn’t work: Screen readers already announce that it’s an image. You’re wasting precious space.

Better alt text

“Laptop displaying the charity’s new events booking page.”

Rule of thumb:  Jump straight to meaning.  Let the tech handle the rest.

4. Being vague because you’re rushed

Four staff members gathered around a table planning the spring campaign.

Common mistake

“Team meeting.”

Why this doesn’t work: It tells the user almost nothing, and usually signals the alt text was added last-minute.

Better alt text

“Four staff members gathered around a table planning the spring campaign.”

Rule of thumb: Alt text doesn’t need to be long, just specific enough to be useful.

5. Different images need different kinds of alt text

Not all images are doing the same job, and their alt text shouldn’t either. A quick pause to ask “what is this image here to do?” will usually tell you exactly how to handle it.

Informative images: add the missing context

Informative images add meaning or explanation to your content. If they disappeared, something important would be lost. Common examples include; 

  • Graphs and charts
  • Diagrams
  • Poll or survey results
  • Screenshots of tools, dashboards, or products. 

Your alt text should give someone who can’t see the image access to the same understanding, even if it’s more concise.

Bar chart showing 68% of respondents prefer email updates over social media posts.

Not-so-helpful alt text: “Graph showing survey results.”

More useful alt text: “Bar chart showing 68% of respondents prefer email updates over social media posts.”

Screenshot of the events booking page showing date selection, ticket options, and an accessibility information link.

Screenshot example: “Screenshot of the events booking page showing date selection, ticket options, and an accessibility information link.”

Rule of thumb: Describe the insight, not every visual detail.

Active images: describe the action, not the image

Screenshot of the sign up page showing an icon to download the annual report and icon for account settings.

Active images are images that trigger an action rather than just sitting there. These are usually:

  • Buttons
  • Linked images
  • Icons that submit forms, upload files, or start a process.

This is where vague alt text causes real problems.

Common mistakes

  • “Click here”
  • “Button”
  • “Icon”

They don’t tell the user what will happen.

Better alt text examples

  • “Sign up for the newsletter”
  • “Download the annual report” / “Upload CV”
  • “Go to account settings”

Rule of thumb 1: Alt text for active images should describe the result of the action, not what the image looks like. 

Rule of thumb 2: It’s generally poor practice to place button text into images, so speak to a competent web developer about improving examples like the above. 

Decorative images: say nothing (on purpose)

A screenshot of a web page with a decorative image that does not require alt text.

Decorative images are there purely for visual interest. If you removed them, the page would still make complete sense.

Common examples:

  • Decorative banners with no text
  • Background flourishes or dividers
  • Icons used purely for styling
  • Repeating design elements.

These images do not need a description, and adding one can actually make the experience worse for screen reader users by introducing unnecessary noise.

What to do instead

  • Include an empty alt attribute:  alt=””
  • This tells assistive technology to skip the image entirely.

Why this matters
Screen reader users shouldn’t have to hear: “Blue curved line. Decorative banner. Abstract shape.”  Silence is the most accessible choice here.

Rule of thumb: If an image adds no information and performs no action, omit the description but keep the empty alt attribute.

What good alt text looks like in real-world comms

Social post image: A photo of a counsellor talking with a client.

  • ❌ “Two people talking in an office.”
  • ✅ “Counsellor speaking with a client during a one-to-one support session.”

Website hero image: Volunteers packing boxes.

  • ❌ “Volunteers working.”
  • ✅ “Volunteers packing emergency food boxes in the charity’s warehouse.”

Event promo graphic: Text-heavy poster.

  • ❌ “Poster for upcoming event.”
  • ✅ “Graphic promoting the annual community wellbeing workshop on 12 June.”

What we’re changing at Pooka (and how long it’ll take)

The A11yProject article didn’t just make us nod along, it made us audit our own habits.

Here’s what we’re doing next:

✅ Step 1: Review existing content (1–2 weeks)

  • Spot-check recent blogs, key pages, and social templates.
  • Look for vague, rushed, or duplicated alt text.

✅ Step 2: Create a shared alt text checklist (1 week)

A simple internal guide answering:

  • What’s the purpose of this image?
  • Is it informational or decorative?
  • What does someone need to know?

✅ Step 3: Build alt text into content workflows (ongoing)

  • Alt text written at the same time as captions.
  • Not left until the “publish” panic.

This isn’t about perfection. It’s about consistency and intent.

What we recommend comms teams do next

If you’re stretched (and let’s be honest, you are), start small:

  1. Pick one channel – Your website, Instagram, or LinkedIn, not all at once.
  2. Improve going forward, not backwards – Don’t try to fix everything overnight.
  3. Write alt text like you’re explaining the image to a colleague – Clear. Human. Contextual.
  4. Make it part of your definition of “done” – No alt text = not finished.

Accessibility isn’t about catching people out. It’s about making sure more people are included in the story you’re already telling.

A note on the images used in this guide

You might notice that the images in this post are AI-generated. That’s a deliberate choice, and we wanted to be open about it.

This blog is a practical guide, not a piece of visual storytelling about us. The images are here purely to illustrate concepts, support understanding, and give clear examples where words alone might fall short.

We’ve used AI-generated imagery because:

  • It helps explain ideas quickly and clearly,
  • It solves an immediate, practical problem (quickly locating a large number of copyright-free images),
  • It’s an efficient use of time for a small team. 

For us, this is exactly where AI makes sense: as a supporting tool, not a replacement for people, craft, or lived experience.

The value of this post is in the guidance, examples, and thinking it shares, not in polished visuals or brand storytelling. Where real people, real projects, and real experiences matter, that’s what we’ll always prioritise showing.

If you’re curious about how we think about AI more broadly, when it’s helpful, when it’s not, and where the line is, that’s a conversation we’re always happy to have.

And yes – we know,the real test is whether we’ve followed our own advice. So go on, scroll back and check the alt text on the images in this post 

If you’d like to keep an eye on us, we publish new blogs every week, and you’re more than welcome to hold us to account as we go.

If you would like more practical guides to web accessibility check out our blog post on designing for colour contrast ratios.

FAQs: Web Accessibility for Charities

1. Is WCAG the law in the UK?

No. WCAG (Web Content Accessibility Guidelines) are not a law in themselves.
They are international technical standards developed by the World Wide Web Consortium.However, public sector organisations in the UK are legally required to meet WCAG AA standards under the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018.
For charities and private businesses, the Equality Act 2010 requires reasonable adjustments to prevent discrimination. While WCAG is not named in the Act, it is widely recognised as the benchmark used to assess accessibility compliance.
In practice, WCAG AA is the accepted standard organisations work toward.

2. What are WCAG guidelines?

WCAG (Web Content Accessibility Guidelines) are international standards developed by the World Wide Web Consortium (W3C). They outline how to make web content more accessible.
For colour contrast, this includes:
* Minimum 4.5:1 contrast ratio for normal text
* 3:1 for large text
* Clear contrast for buttons and interface elements.
Most UK organisations aim for WCAG AA compliance.

3. Do charities need an accessibility statement?

Public sector organisations must publish an accessibility statement. Most charities are not legally required to do so unless they fall under public sector regulations.
However, it is strongly recommended.
An accessibility statement:
Explains how accessible your website currently is
* Acknowledges any known limitations
* Provides a contact route for feedback
* Demonstrates that accessibility is actively considered.
For many charities, publishing an accessibility statement is a proactive step that reflects values, transparency, and inclusion, even where it is not strictly mandated.