When you add images to your website, you are also creating information for visitors who use screen readers. A screen reader reads alt text out loud so people who are blind or have low vision can understand what the image shows. Good alt text helps make your site easier to use, easier to search, and easier to understand.
It is helpful to know how a screen reader works. The screen reader already lets the user know it is reading an image, so it does not need phrases like “Image of” or “Picture showing.” Adding those words only makes the description longer and harder to follow. Instead, write the alt text as if you are quickly explaining the image to someone on the phone.
Punctuation in alt text helps the screen reader pause in the right places. You do not need perfect punctuation, but simple commas and periods make the text much easier to follow. Think of alt text as a short sentence that makes sense when spoken out loud.
Another often overlooked aspect of alt text is to avoid redundancy. Do not repeat information that is already in the captions; add value without repeating content. However, if there is text that is directly inside or embedded in the image, then you must transcribe that text in your alt text.
Examples of Good Alt Text
Example 1: Informative image
Image: A nurse giving a flu shot to an older adult at a community clinic.
Alt text: “Nurse giving a flu shot to an older adult at a community clinic.”
Example 2: Image that supports page content
Image: A map showing locations of county offices.
Alt text: “Map of county office locations.”
Example 3: Image with important visual meaning
Image: A warning sign showing rising water.
Alt text: “Warning sign for rising water.”
Example 4: Decorative image (no meaningful information)
Image: A simple swirl graphic used as a page divider.
Alt text: ""
This tells the screen reader to skip the image because it does not add meaning.
Handling Different Image Types
Informative Images: Convey the main meaning or describes the data being shown. For complex charts and graphs, state the chart type and summarize the key trend, linking to a larger data table if needed.
Decorative Images: Serve no functional purpose or add no context to the content on the page. For these you can either use an empty alt attribute (alt="") so screen readers skip them completely. Note that Digital Commons does this for you.
Functional Images: These are images that act as a link or button (like a magnifying glass for search). The best alt attribute will describe the action it performs (e.g., alt="Search" or alt="Registration Link"), not what it looks like.
Writing clear alt text is an easy way to make your agency website more accessible. A few simple words can make a big difference. If you ever feel unsure about what to write, ask yourself what a user needs to know and describe only that.