Web Standard: Graphic Selection and Screen Layout

Definitions

A graphic is an image, in the .gif, .jpg/.jpeg, or .png format.

Content Requirements

  • Choose graphics carefully. They must provide information, navigation, or visual organization, or serve an obvious purpose.
  •  Use small graphics sparingly to add visual appeal. Such images must still be relevant to the content. Avoid adding pictures because they are pretty.
  • Do not use graphics to display text.
  • Captions and alternative text:
    •  Provide text alternatives in compliance with Section 508 accessibility standards.
    • If you provide an explicit text caption, use empty alternative text (alt=""), so people with visual disabilities will not hear redundant information.
    • If the connection between image and nearby text content on the page is visually obvious, it is not necessary to provide a caption. However, if a caption is not provided, you must then use alternative text to describe the image's contents or function for visually impaired visitors.
  • Do not infringe on copyrights, trademarks, and other intellectual property rights.
  • Do not use “splash” graphics or banners that are the width of the page.
    • It pushes down the content

Examples

The two screen shots below show how much more content is visible with graphics to the right at the top of the page. No content changes; only the graphic placement differs.

Side by side comparison of the same CFL page.  The version with the image floated right displays more content and links.

About this Standard

Effective date: 03/13/2006
Date approved: 09/12/2012
Web Council review by: 09/02/2014 (or earlier if deemed necessary by the Web Council)