Images and Graphics Accessibility Checklist

Note

This checklist will not make your images and graphics completely accessible. Full accessibility requires training and a nuanced approach. This checklist is a collection of legal requirements and best practices to help people with limited accessibility training make images and graphics more accessible.

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.