Graphics/Images Unclearly Labeled or Unlabeled

Short Description

Graphics and images have no or confusing text associated with them

Long Description

  • It is important to provide a screen reader user access to all information on a page, including images and graphics. The alt attribute or text surrounding the graphic/image provides a concise and meaningful description of visual information.
  • Any graphic or image that contains information that is important to the content of the page, including linked images, should have descriptive alternative text, so a screen reader user can access it.
  • If the graphic or image has purely aesthetic purposes or the information is communicated in another way, assigning it the null alt text will lead the screen reader to ignore it. If just left blank, the screen reader will say, “Graphic.” leaving the user uncertain of the graphic’s importance.

Example of Issue

  • The following YouTube video contains an example of a screen reader user trying to interact with text that has been replaced with a graphic and has no alt text.
  • The following video shows a screen reader user interacting with information that is only given visually.

Recommendations

  • Nearly every graphic/image should have an alt attribute.
  • Provide a short and meaningful description either in the alt attribute or in surrounding text, or add the null alt text (alt="") if the graphic/image is purely aesthetic.
  • Avoid being redundant. If information contained in the image also appears in surrounding text, the null alt attribute is appropriate.
  • Avoid using phrases such as "this is an image of..." or "this image..." The alternative text should be as short as possible and it is usually already apparent that the description is of an image. An exception would be if it were important to know the image was a photo or painting.
  • If the graphic/image has a function, the alternative text should convey that, i.e. Wikipedia entry honey bees" or "Download registration form PDF."
  • If the graphic/image is too complex for a concise description, provide a long description on another page and add the longdesc attribute with the URL to the page with the longer description. The alt attribute should still contain general information about the graphic/image. There should also be a standard link to the long description for screen readers that do not support the longdesc attribute.
  • More information is available in the Article Making Sure More than Eyes Can Detect an Element on the AUL site.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile