When images are present in Web content, we must provide meaningful alternative text description so that users of screen readers can have the image described to them. Also, we must provide ways for screen readers to ignore images that are used for decoration.
- Describe the image in context based on what details the image adds to the text. If the image is of a dog and a firefighter, depending on the context, the ideal alt text could be "Smith poses with the station's new rescue dog" or "kids love that the new rescue dog has a heart-shaped spot on its chest."
- Keep the descriptions short and concise; roughly 140 characters or less.
- Do not use the word “graphic or image” in the description ("image of a running dog"), as the screen reader already takes care of it. Just say "a running dog."
- Use an empty alt for decorative images like spacers or uninformative backgrounds (alt='""), to tell screen readers to completely ignore the image. Note that this empty alt must be present, or the screen reader will read the filename one character at a time!