How to Write Alt Text That Actually Helps: A Practical Guide

What Alt Text Is and Why It Matters

Alt text (short for alternative text) is a written description attached to an image on a website. You can't see it by default. It lives in the code behind the image, doing three important jobs.

First, screen readers read it aloud. When a blind or low-vision user encounters an image on your site, their screen reader announces the alt text so they understand what's there. Without it, the screen reader either skips the image entirely or reads the file name, which is almost always meaningless.

Second, alt text appears when images don't load. Slow connections, broken image links, email clients that block images by default. When the picture doesn't show up, the alt text does, giving the reader context for what they're missing.

Third, search engines use alt text to understand what an image shows. Google can't "see" your photos. It reads your alt text to index and rank image content. This matters for SEO, but it's not the primary reason to write good alt text. Write for humans first.

The Golden Rule

Describe the content and function of the image, not just what it looks like.

This sounds simple, but it's where most people go wrong. They describe surface-level details ("a group of people smiling") instead of the meaning the image conveys ("Volunteers sorting donated school supplies at the annual back-to-school drive").

Before you write alt text, ask yourself: why is this image here? What information does it communicate? What would a reader miss if the image disappeared? Your alt text should fill that gap.

Good Examples vs. Bad Examples

Let's look at real-world scenarios you'll encounter on nonprofit, church, and community websites.

Event photos: Bad: "image" or "photo" or "IMG_4532.jpg" Good: "Volunteer Sarah reading to children at the after-school program"

The bad examples tell the user nothing. The file name is what a screen reader announces when alt text is completely missing. The good example tells the user exactly what's happening and who's involved.

Logos: Bad: "logo" Good: "Laurel Web Co. logo"

If the organization name already appears as text next to the logo, you have another option: use an empty alt attribute (alt="") so the screen reader skips it entirely. Hearing "Laurel Web Co. logo, Laurel Web Co." is redundant and annoying. But if the logo is the only place the org name appears, include it in the alt text.

Team and staff photos: Bad: "team" Good: "The five members of the nonprofit's leadership team standing in front of their community center"

For individual headshots, include the person's name and title: "Maria Chen, Executive Director." If the photo is on a staff page where the name and title are already in text next to it, a simpler description works: "Headshot of Maria Chen."

Building and facility photos: Bad: "building" Good: "The front entrance of Grace Community Church, a brick building with a covered walkway and accessible ramp"

Notice how the good example includes the accessibility feature. That detail might matter to someone deciding whether they can visit.

Types of Images and How to Handle Each

Not every image gets treated the same way. The type of image determines how you write (or don't write) the alt text.

Informational images. These are the most common type. They convey content that matters to the page. Event photos, staff headshots, infographics, product images. Describe what's happening and why it matters in the context of the page.

Decorative images. Background patterns, visual dividers, purely aesthetic stock photos that don't add information. These get an empty alt attribute: alt="". This tells the screen reader to skip the image completely, which is exactly what you want. Don't force screen reader users to listen to "abstract blue gradient background" on every page.

Functional images. Buttons, icons, and linked images. For these, describe the action, not the appearance. A magnifying glass icon in a search button should have alt="Search", not alt="magnifying glass." A linked social media icon should have alt="Visit our Facebook page", not alt="Facebook logo."

Complex images. Charts, graphs, diagrams, and infographics carry too much information for a brief alt attribute. Use the alt text for a short summary ("Bar chart showing donation growth from 2020 to 2025"), then provide the full data in a table or text description nearby on the page. Screen reader users get the summary from the alt text and the details from the accompanying content.

Image groups. A photo gallery or a row of partner logos. You don't need alt text on every single image if they're communicating one collective idea. One image in the group can carry a description, and the rest can be marked decorative. For partner logos in a row, consider one image with alt="Our partner organizations: Red Cross, United Way, Habitat for Humanity" rather than individual alt text on each logo.

Context Changes Everything

Here's something that trips people up: the same photo can need different alt text depending on where it appears.

Take a photo of your executive director speaking at a podium. On the About page, the right alt text might be: "Executive Director James Wright." The page is about your leadership team, and the image is there to show who James is.

Now put that same photo in a blog post about your annual gala. The alt text should be: "Executive Director James Wright delivering the keynote address at the 2025 annual gala." The context changed. The image is now about the event, not just the person.

On your homepage as a banner image, maybe it becomes: "Community leaders and supporters gathered at the organization's annual fundraising gala." The focus shifted to the broader event and atmosphere.

Always write alt text with the surrounding content in mind. Ask yourself what this specific image adds to this specific page.

Getting the Length Right

Aim for one sentence. Sometimes two. Almost never more than that.

Screen reader users navigate through content linearly. A 200-word alt text description turns a simple image into a wall of audio. Be concise while still being meaningful.

Don't start with "Image of" or "Photo of" or "Picture of." Screen readers already announce that the element is an image. Starting your alt text with "Image of" means the user hears "Image, image of volunteers sorting supplies." That's redundant.

The exception: if the type of image matters (painting, screenshot, illustration, X-ray), you can note that. "Watercolor painting of the original church building, circa 1920" tells the user something meaningful about the medium.

What Alt Text Is Not For

Alt text is not a place to stuff keywords for SEO. Writing "nonprofit donation volunteer community giving charity church nonprofit" as alt text helps no one and makes your site actively worse for screen reader users.

It's also not a place for copyright information, photographer credits, or image captions. Those belong in a visible caption element beneath the image.

And it's not a place for instructions like "click here" unless the image is genuinely a link or button. If it's a linked image, describe where the link goes: "Read the full annual report" rather than "click here."

How to Audit Your Existing Alt Text

Most websites have dozens or hundreds of images with missing or poor alt text. Here's how to find and fix them.

Step one: find what's missing. Install the free axe DevTools browser extension and run it on your site. It flags every image without alt text. This gives you a list of everything that needs attention.

Step two: prioritize. Fix your most important pages first. Homepage, About page, main service or program pages, and your most recent blog posts. These get the most traffic and carry the most weight.

Step three: review what's already there. Having alt text is only the first step. Having good alt text is the goal. Go through your existing descriptions and ask: does this actually tell someone what's in the image? Replace anything generic ("team photo," "event," "building") with specific, meaningful descriptions.

Step four: set a standard going forward. Every time someone uploads an image to your website, they write the alt text right then. Don't let it become a backlog again. Create a simple guide for your staff or volunteers with three to four examples of good alt text for the types of images your organization uses most.

For more on making your website work for everyone, check out our guides on nonprofit website accessibility, WCAG 2.1 AA standards, and church website accessibility.