Alt text and accessible images

Web image alternative text – ‘alt text’ – describes an image. It explains image content and purpose to users who cannot see it, such as those using screen readers.

Why alt text matters 🌟

• Legal: It’s the law.
• Equal access: People who can’t fully see or hear content can understand it.
• Search engine optimization: Images are indexed by search engines.
• Screen readers: Alt text can be read aloud or rendered as Braille.
• Speech software: Users can focus on a linked image with voice command.
• Speech-enabled websites: Alt text can be read aloud.
• Mobile web users: Images can be turned off, like for data-roaming.

The law 📜

The Department of Justice has new accessibility rules for local government websites and includes images.

Requirement:

• Local gov must adhere to WCAG 2.1 Level AA guidelines

Deadlines:

• April 2026: 50,000+ pop.
• April 2027: 50,000 and under

Guidelines ✅

The W3C is the governing body on web accessibility.

What they say:

• “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”
• “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”

ProudCity and alt text 💥

• We force content admins to add alt text to all images.
• Coming soon: ‘Alt text’ tool with site scan, report, how to fix.

Describing images 🖼️

• Context matters.
• There is no perfect description.
• Something is better than nothing.
• Describe relevant details of the image.

Do’s and don’ts 🟢 🔴

Do 🟢

• Be descriptive and use plain language.
• Use images for context (not decoration).

Don’t 🔴

• Use “Image of” or “Picture of”. The user will know it’s an image.
• Use all caps. Screen readers may read each letter (W-A-R-N-I-N-G).
• Be redundant if the same text is near the image.

Examples 🖇️

Good:

• “Jane Doe headshot“
• “Jane Doe, Alt text and accessible images”
• “Mayor Jane Doe headshot“
• “City Manager Jane Doe headshot“
• “[Municipality name] City Hall“
• “City of [name] logo“
• “City of [name] official seal”

Bad:

• “Image“
• “Jane Doe”
• “City Manager”
• “City Hall”
• “Logo”
• “City seal”

Learn more 🧠

• Text alternatives guidelines (W3C)
• Alternative text  (WebAIM)
• Images Tutorial (W3C)

Related 🎯

• ProudCity Accessibility