Alt text and accessible images

Posted on May 23, 2024

Icon representing an image file

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:

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 🧠

Related 🎯

Close window