Accessibility Guide: Images

A group of five employees walking in an office lobby Accessible Alt Text

All images must include descriptive alt text so screen reader users can understand the content.

  • Accessible: “Five employees walking together through an office lobby.”
  • Non-accessible: “Team picture.”

Alt Text Best Practices: 

  • Do not begin alt text with phrases such as “image of” or “picture of.”
    • Exception: identify the image type when relevant, such as a logo, illustration, painting, or cartoon.
  • Keep alt text short and concise, typically one to two sentences.
  • Focus on the key elements and purpose of the image instead of describing every detail.
  • End alt text with proper punctuation.

Decorative images do not require alt text. Make sure they use null alt (empty) attribute values.

Provide a text alternative or detailed description for complex images such as charts, graphs, maps, or infographics.

Alt text for media upload.

Where to put Alt Text for an Image?

Alt text is entered when uploading an image to the media library or folder.

 

 

An example of an inaccessible image, open house flyer Avoid Text in Images

Avoid placing important or informative text within images, as it is not accessible to screen readers.

Inaccessible Image Example: Open House Flyer

This is an example of an inaccessible image because it contains important information that screen reader users cannot access.

This flyer should either:

  • be provided as a PDF, or
  • appear directly on the webpage as text.

 

File Names

Use descriptive file names for easier content management.

  • Good: openhouse-flyer.jpg
  • Poor: IMG_00452.jpg

Image Optimization

Images should be resized appropriately before uploading to the media library to ensure optimal performance and display.