Images

  • Introduction
  • Use images purposefully: Images come at a cost to usability—they take time to download and are inaccessible to users who cannot see them. Use images with a purpose, such as providing information or enhancing the user interface.
  • Do not use graphic text: Graphic text is not machine-readable, flexible, or customizable, and therefore is inaccessible to some users. Avoid using graphic text; use plain text instead.
  • Avoid animated images: Animations are distracting and can even be debilitating. Avoid using animations. When using animations, allow users to control playback: play, pause, and stop.
  • Provide alt-text for all relevant images: Users who cannot access images can get the equivalent information via alt-text. For images that are part of the user interface, use alt-text to provide the functional equivalent, such as "Go to next page" or "Print this page." For content images, use alt-text to provide a brief image description.
  • Provide a full text description for content images: Content images may require more description than can be provided via alt-text. Provide a text description of the image information using a linked page or image caption.
  • Provide blank alt-text for irrelevant or redundant images: Not all images are relevant to nonvisual users. When images are not relevant outside of a visual context—such as spacer images or custom bullets—provide blank alt-text (alt="").
  • Maintain a catalog of image content: Alt-text and text descriptions are integral to providing image-based content. Maintain an image inventory that includes alt-text and text descriptions, particularly for large-scale or collaborative projects.
  • Keep image dimensions as small as possible: Large images take longer to download and limit page flexibility. Keep image dimensions as small as possible, and save images using as much compression as possible without significantly degrading image quality.
  • Use thumbnails for large images: Large images are sometimes integral to the purpose of a site. Provide access to large images using thumbnails or text links so users can choose whether to load the image.