Images, Photos, and Graphs

Skip to Section

Informative vs Decorative Images
Images As Links
Complex Images

  • Try to avoid using text in creating graphics, especially thumbnails. Images of text should be avoided except in special cases, such as in logos.
    • If an image has text, it must be contrast compliant unless it is incidental.
    • If an image has text that is informative that must be part of the alt tag
    • User issues for images with text on them:
      • Dyslexic users use different tools for reading aloud than visually impaired users and will not be able to access either the text in the image or the alternative text with their kind of assistive technologies.
      • Users with low vision who use magnification programs to enlarge elements may experience a super pixelated image that is more difficult to read when enlarged.
  • Try not to use composite images, especially not for thumbnails. At smaller sizes these become easily illegible
  • Images should not be the only method of communication, especially because images may not load or may not be seen.
  • Avoid using images when the same information could be communicated in writing.
  • Avoid images as text or with text. If text can be used, it should be used. (For example avoid making graphic buttons. We have html/css options built into our themes)
    •  Exceptions are with logos and logotypes.
  • All images need alt attribute but see below for details on how best to add those

Informative vs Decorative Images

Quick Check: Ask yourself, will the content still make sense if this image did not exist? If you answer “no”, the image is informative, if “yes”, the image is decorative:

Informative Images

More often than not, Content Managers will be working with informative images and will need to add alt text to them.

  • Alt text is a way to label images, and it’s especially important for people who can’t see the images on the website. Alt text should describe the image in a brief sentence or two. The language will depend on the purpose of the image.
    • If it’s a creative photo or supports a story, describe the image in detail.
    • If the image is serving a specific function, describe what’s inside the image in detail. People who don’t see the image should come away with the same information as if they had.
    • If you’re sharing a chart or graph, include the data in the alt text so people have all the important information. More at W3 Handling Alt For Complex Images 
American Goldfinch perched on top of a Fir
Use old Christmas trees as props near feeders for birds after the holidays.
Dark-eyed Junco perched in a Fir with snow
Old Christmas trees can offer protection for birds when they need it most.
In the WordPress backend, the alt text for the Junco image is different than the caption
WordPress example: The captions and alt text on each of the images are different. The caption describes its relevance to the article while the alt tag describes what is in the image.
  • Avoid Redundancy. If you are describing the image in the caption do not also describe it the same way in the alt=””
    • An image caption is text that displays on the screen while alt text is read aloud to someone using assistive technology. Alt text is hidden from a sighted user. If your image will also have a caption, consider including more descriptive detail of what you see in the picture in the alt text compared to the text in the caption. A screen reader will read both the alt text and captions, and redundancy can be frustrating to the user.
  • In Alt text
    • Do not include “image of”, “picture of”, “logo of” etc.
    • Do not use apostrophes or quotation marks within your alt text.
  • Each browser handles alt tags differently. Supplement images with standard captions when possible.

Decorative Images

  • Decorative images supplement text-based content, but they do not add any important information necessary for understanding the message of the site. For these, the alt attribute must be present, but it needs to be null (alt=“”)

This cover image is decorative and does not require alt text. Relevant information about this photo can go here.

When an image is the sole item within a link, the image needs alt text so that screen reader users understand the purpose of the link.

  • If the linked image IS NOT supplemented with additional linked text, then, alt text for the image should describe the destination of the link.
  • If the linked image IS supplemented with additional linked text, then the alt text for the image should be set to null (alt=“”).
  • Screen readers will identify all links for the user, so adding words such as “link to” or “click to” on the image would be redundant.
  • If images and link text are next to each other and go to the same destination, it is preferable to have them wrapped in a single link instead of two separate links.
  • While there is no need to describe the image itself, be sure to include any important text or other visual information from the image that is not repeated nearby on the page.

Complex Images

Require either a text alternative or an accessible alternate method of understanding the content.

Alternate methods:

  • Maps: Provide a method of receiving text based instructions, so users do not have to rely on a graphic alone.
  • Flowcharts: Create an outline.

More at W3 Of Handling Alt For Complex Images

More on Images

Common Redpoll by Kyle Tansley / Macaulay Library
Three people recording sound in India
Macaulay Library workshop in India
Elephants by Craig Stevenson
Velvet-purple Coronet by Ngoc Sam Thuong Dang / Macaulay Library

Image Carousels

Image carousel should not auto play. The users should have full control over which images they want to see. All controls should also be keyboard accessible.