Skip to content

Images and Graphics Accessibility Checklist

General Guidelines

Images

  • Images are optimized and accessible (use PNG, JPEG, SVG formats). SVGs are preferable for vector images as they scale without loss of quality and don't require compression for optimization of load times.
  • Images are compressed to reduce load times without sacrificing quality. TinyPNG is a good tool for that.
  • Images are kept simple and clean. Avoid overcrowding with unnecessary elements that can confuse users with cognitive disabilities.
  • Images of text are avoided, when possible.
  • Images are placed inline with text, not floating, so they maintain their relevant positioning within the content.
  • A minimum of 3:1 color contrast ratio for all graphics that convey meaning is used. Logos are excepted from this rule.

Alternative Text

  • Text alternatives are provided for non-text content in the form of alt text. If an image or graphic is purely decorative or if the image has been described in the text, then alt text can be empty or marked as "decorative" in CMS platforms that allow for it.
  • The file name is not used as the alt text.
  • Alt text does not start with "Image of" or Graphic of" unless absolutely necessary. Screen readers already identify the file type as an image.
  • Alt text is limited to 125 characters. Alt text that needs to be longer than 125 characters should be displayed in the surrounding text in the body of the document or in captions.
  • If images of text are used, the alt text includes the entirety of that text verbatim.
  • Information in surrounding areas of images or graphics is not repeated in the alt text.
  • If an image is used as a button or link, alt text describes its functionality (e.g., "Search button" or "Submit form"). This practice should be avoided though.

Captions

Note: Captions and alt text are different. Captions provide context for an image, while alt text describes the image itself in very literal terms. Both are helpful for search engine optimization, and both provide a benefit to people with visual impairment, but alt text is required. Captions are only required for print materials.

  • Captions are placed below their respective images. This differs from tables, where the captions should be placed before the table.
  • If alt text is not possible for any reason, captions and/or the text preceding the image or graphic describes it.

Graphs

  • Clear text labels the significant parts of the data, such as the chart title and the horizontal and vertical axis.
  • Labels and legends are used that clearly mark and distinguish the data points.
  • Graphs are linked to the same data in table form.
  • "Direct labeling" is used, if possible — position the label directly beside or adjacent to the data point.

Actionable Guidance: Images and Graphics Accessibility

The primary action for image accessibility is determining the image's purpose. Use the guide below to decide what kind of alternative text (alt text) is required.

1. The Alt Text Decision Guide

Use this table, based on the Alt Text Decision Tree, to determine the correct action for every image you upload.

Image Type Purpose Actionable Requirement Why It Matters
Informative Conveys essential information (e.g., a photograph, a simple icon, a logo). Write a brief, descriptive alt text (under 125 characters) that communicates the image's content or purpose. Allows screen reader users to understand the content being presented visually.
Functional Used as a link or button (e.g., a magnifying glass icon for search, a social media icon). Alt text must describe the action or destination, not the image itself (e.g., "Search," "Go to Facebook page"). Users navigating by links/buttons know where they are going or what action they are taking.
Decorative Purely visual, adds no information, or is redundant to nearby text (e.g., spacers, borders, stock photos used only for visual appeal). Use a null or empty alt attribute: alt="". Prevents screen readers from announcing unnecessary or repetitive information, improving efficiency.
Image of Text The image contains words that are critical to the content (e.g., a stylized quote, a banner with a date). The alt text must contain the verbatim text shown in the image. (Best Practice: Avoid images of text entirely.) Ensures users receive the critical information even if the image fails to load or is read by a screen reader.

2. Complex Images (Graphs, Charts, Infographics)

When an image contains a large amount of data or complex relationships, the brief alt text is insufficient.

Action Requirement Why It Matters
Provide Data in Text For all graphs and charts, the data must be available in an accessible format, such as a data table immediately following the image. Screen reader users and users who cannot interpret complex visuals can access the underlying data.
Use Long Descriptions If the image is a complex infographic or diagram, provide a long description in the surrounding text or link to a separate page containing the full explanation. Ensures all users receive the full context and analysis of the complex visual information.
Label Clearly Use clear text labels for all significant parts of the data, including the chart title, axis labels, and legends. Helps users with cognitive disabilities and low vision quickly understand the structure of the data.

3. Visual Design and File Management

Action Requirement Why It Matters
Ensure Graphic Contrast All graphics that convey meaning (e.g., icons, lines in a chart, arrows) must have a minimum contrast ratio of 3:1 against the adjacent background color. Users with low vision can distinguish the elements of the graphic. (Logos are exempt.)
Optimize File Names Before uploading, rename the image file to be descriptive (e.g., annual-report-cover.jpg instead of IMG_4567.jpg). While not read by screen readers, descriptive file names aid in content management, search engine optimization, and debugging.
Avoid Text in Images Do not use images to display body text, calls-to-action (CTAs), or critical instructions. Live text is scalable, searchable, and readable by all assistive technologies. Text in images is often blurry when zoomed and inaccessible.