Make your Digital Media Projects Accessible

Creating accessible images and infographics is a complex process and there is a lot of variability. How you create an accessible version will depend on the final format your image or infographic takes.

• Image files, like PNG and JPEG, do not contain additional information, like links or heading structure. 
  • For simple images, create alt text.
  • For complex images, think about creating an alternative format with more information, like a transcript. 
• Many graphic design tools allow you to export your design as a PDF. While it is possible to create more structure, and embed links, into a PDF, the process to remediate this content can be difficult.
  • Refer to the PDF page of this help guide for more information. 
  • Look for information from the program you are using to create your image or infographic (e.g., Adobe InDesign) to see if you can build in accessibility at the creation stage. 

Consider the following accessibility best practices when creating your image or infographic:

Text display

• Text should always be visually clear and easy to understand.
• Avoid using serif fonts or small text.

Images

• Always describe included images with alt-text if they convey important information.

Links

• Link text must clearly describe where the link is going to take a user.
• Do not use link phrases such as “click here” or “read more”.
• Note that link functionality will depend on the final format type of your infographic. 

Structure

• An infographic should have a logical structure that includes titles and heading levels.
• Use titles, headings, and paragraphs in a logical order to ensure a screen-reader can convey the information properly.

Colour contrast

Make sure there is enough colour contrast between the foreground and background content. Follow the guidelines below to select a colour palette that is accessible to your users.

• Use a colour contrast tool to ensure that the contrast for large text (i.e., at least 18-point font) and links is at least 3:1. Text that is smaller than an 18-point font should have a contrast of at least 4.5:1.
• Any information presented only through colour cues may not be seen by people who are visually impaired. This includes information indicating an action, prompting a response, or distinguishing a visual element.
• Ensure that any information presented only through colour cues is available in text or through other (non-colour) visual cues. Try viewing the page in grey-scale or with a colour blindness simulator to determine what information is unavailable when viewing the page in this state.
• For complex graphs or data, use patterns or shapes in addition to colour to convey differences.

Recommended colour contrast tools

The purpose of alternative text (alt-text) is to provide a description of the key content or function of an image. It is essential for users who can't see images. Images without alt-text are not accessible to people who are visually impaired.

What do I add alt-text to?

• Graphs and vectors
• Logos
• Any images that convey information or have a function

How do I write good alt-text?

1. Be specific:

• Make sure the text alternative serves the equivalent purpose of the non-text content. In other words, if you swapped the image with the text alternative, the person reading the text alternative would be able to receive the same information and perform the same image-related tasks as a person who is able to see the image.

2. Keep it short:

• Only describe the parts of an image that convey important information or have a function. 
• For decorative images, the alt text should be set to an empty string (i.e., double quotes) to indicate it is decorative. This lets assistive technology, such as a screen reader, know to skip over the image.
  • Sometimes a single space will be needed between the quotes if you can’t set a blank value for the alt text.
  • As a last resort, you can enter the word Decorative.
• Do not put the words "image of..." or "graphic of..." at the start of the alt text.
• Do not repeat the same information contained in an adjacent caption or surrounding text.

3. Use plain text:

• Do not include bold, italics, subscript, symbols, or other fancy formatting.

What should I avoid when writing alt-text?

• Avoid assumptions. Alt-text should not include interpretations of the image or describe the subject's intentions. Avoid assuming emotion (e.g., happy) unless necessary for image context.
• Do not use the file name as the text alternative, such as "Oct.jpg".
• Do not over-identify. Avoid describing ethnicity, gender, age, or ability unless contextually relevant. If relevant, use person-first language, such as "Person using a wheelchair."

How do I provide alt-text for complex images?

• Icons:
  • Alt-text for icons should provide the action or function intended by the icon, such as "Download PDF" or "Visit our Facebook Page."
• Images as Links:
  • If the image is being used to link to another page, the alt-text should describe what will happen when the image is clicked.
• Images with complex information:

  • If the image is a chart, diagram, or illustration, add succinct alt-text conveying the content or function. If more space is needed, additional information can be included in a table or text nearby the image.

A transcript is a text description of an infographic that screen readers can understand. Transcripts for infographics provide text-equivalent information for the visually impaired who wouldn’t be able to access it otherwise. A transcript can be presented in the following ways:

• A transcript can be included below an image infographic. See this WebAIM infographic for an example of this method.
• A transcript can be linked. You can create a new page with the transcript and provide a link to the transcript directly above or below the image infographic.

Best practices for creating an infographic transcript:

• Ensure that the same information is conveyed in the transcript as it is in the infographic.
• Ensure the reading order and structure match the infographic as much as possible.
• Provide text descriptions of any meaningful visual content.

• Accessibility: Image Alt text best practices (Siteimprove)
• Making Images Accessible (a collection of resources from the DIAGRAM Center for describing complex images)
• Alt Text Decision Tree (W3C) 
• Example of an accessible infographic (WebAIM)
• Accessible Infographics (UDC)