Informative image

Good example

This image alt text describes the content of the image in the context of the rest of the page.

Rustic red barn surrounded by rolling hills
  • alt="Rustic red barn surrounded by rolling hills"
  • alt="Midwest agricultural field and barn"

Bad example

  • Do not add “image of”, “photo of”, “picture of”, etc. to the description
  • There is no need to describe the role of the image
  • The screen reader will declare it as an image or graphic
Image of rustic red barn surrounded by rolling hills
<img src="/assets/images/examples/barn.jpg" 
     alt="Image of rustic red barn surrounded by rolling hills">
Researcher using a microscope

Alt text can vary depending on context.

  • Generic science page: alt="Researcher using a microscope"
  • Article about diversity in science: alt="African American woman using a microscope"
  • Profile for Rachael Jenkins: alt="Professor Rachael Jenkins examining specimens"
  • E-commerce: alt="Lab analyst using the new XJ9000 lens"
  • Assessment of Midjourney capabilities: alt="Awkward closeup with bokeh covering foreground objects"

Bad example

This image alt text is overly descriptive. It shouldn’t sound like a Midjourney prompt.

A flat minimalistic apple 
  designed as a black icon with a 
  bite taken out of the right side 
  and a single leaf on top leaning 
  the right
<img src="/assets/images/icons/logo-apple.svg" 
  alt="A flat minimalistic apple 
  designed as a black icon with a 
  bite taken out of the right side 
  and a single leaf on top leaning 
  the right">

Good example

Apple
<img src="/assets/images/icons/logo-apple.svg" 
  alt="Apple logo">