🖼️💬 Website image alt text, done right

Alt text (short for “alternative text”) is the short written description you add to an image on your website. When someone using a screen reader visits your site, that’s what they’ll hear instead of seeing the image. Search engines read it too, to better understand your content. 

It might feel like one of those tiny details only accessibility experts lose sleep over. But alt text does some heavy lifting. Done well, it’s a win-win for both accessibility and SEO. Done poorly, it’s just filler text that annoys users and adds no value. 

Here are some nonprofit website alt text best practices to keep in mind:

• Focus on what the image conveys. Think about meaning, not literal description. For instance, write “nurse having a serious conversation with a patient” rather than “woman in a blue smock talking to a man on a bed.” Or “bar chart showing donations doubled in 2024,” not just “bar chart.”
• Use blank alt text if the image is only decorative. For purely design elements (like a swirl or a colored divider bar), set the alt attribute to alt=””. Don’t skip the attribute altogether—otherwise, screen readers will announce the file name, which no one needs to hear (“divider-final-V3.png” is not exactly helpful).
• Be concise but clear. A sentence or less—about 125 characters—is a good rule of thumb. You can go longer if the image holds important information. Skip “image of” or “picture of” (screen readers already say it’s an image). Mention color, size, or placement only if it changes the meaning (like “red warning icon”).
• Think about captions too. Alt text and captions should complement each other, not duplicate. If you need more space than is practical in alt text, put the detail in the caption—or describe the image a bit and link the caption to a longer explanation.
• Capture any text in the image. If words are baked into the image and matter for understanding, they need to be in the alt text. Better yet, avoid putting important text in images at all—use real HTML text whenever possible.
• Don’t invent your own rules. People rely on alt text to use your site. If you decide, say, to always put the article title as the hero image’s alt text, or use it as a hover call-to-action (yep, I’ve seen both of these examples in the wild), you’re not being creative—you’re excluding users and signaling you don’t understand accessibility.
• Use keywords naturally. Alt text can support SEO, especially to allow people to find the images themselves, but don’t cram the alt text full of search terms. Fit in the keywords naturally or skip them.
• Write for people first. Imagine a supporter listening to your site—does the description give them what they need if they can’t see the image?

Cleaning up alt text across your site is one of those small but mighty wins. A few thoughtful words can make your site more usable, more inclusive, and even more discoverable.

Dive Deeper

How to Write Good Alt Text | WebAIM
A great practical, step-by-step guide packed with examples. It covers the basics in plain English, plus how to handle tricky cases.

Alternative Text | W3C Web Accessibility Initiative
The official standards from the global accessibility authority—complete with examples for different types of images.

How To Write the Best Alternative Text for SEO | Moz
Another detailed guide with a different lens—how to balance accessibility with search optimization, without falling into keyword-stuffing traps.