Instructional Graphics

Estimated reading time: ( words)

Summary: Instructional graphics like charts and graphs can be powerful learning tools, and you should use them wherever they illuminate your content, such as reducing complexity or showing patterns in data. Design organized, relevant graphics that utilize best practices in alt text, color and contrast, size, and resolution.

 

On this page:

 

There are two groups of people you need to consider when creating charts, graphs, and other instructional graphics: those who can see them and those who can't. 

Consideration for people who can't see your visuals--those who are blind or visually impaired--may seem obvious: you’ll need to provide the information in an alternative format. 
But even sighted users will benefit from properly designed graphics. Qualities you’ll want to attend to include:

But first, let’s discuss whether an instructional graphic is appropriate to your context.

When to use graphics

You should use instructional graphics to illuminate complex concepts, show patterns or trends, or help make sense of complex information. Graphics are a way to provide multiple means of representation, as specified by experts in universal design for learning. Graphics also can give a visual break where you have a lot of text-heavy content, which can help manage cognitive load for students.

Graphics are less useful and arguably less vital when they’re used simply for decoration, or when text or a simple data table can explain the concept more efficiently.

Color and contrast

There are two basic rules for using color effectively: 

  1. Ensure adequate contrast between the foreground and background color, and between colors that appear adjacent to each other, and
  2. Never use color as the sole means of indicating information. In instructional graphics, use two methods to show a difference of information, such as color plus size, color plus pattern, or color plus spatial position. 

Learn more about color and contrast.

Size and resolution in digital environments

Printed graphics are comprised of thousands of tiny dots of ink, which is why print resolution is typically given in dots per inch (DPI). In digital environments, the “dots” are units of light called pixels, and the size of an image is given in pixels. 

However, the perceived quality of digital images (how sharp or “fuzzy” the image appears) is affected by both pixel dimensions and the resolution of the screen--that is, how many pixels per inch the user’s monitor will display.

The number of pixels also has a direct relationship to the size of the graphic file in megabytes or kilobytes, which affects how long a graphic takes to load in a browser or digital documents, so you want to prepare your graphics to be as small (file size-wise) a possible while also being as sharp and crisp as possible.

Use a photo-editing like Photoshop or GIMP to prepare your graphics for digital display, and shoot for a graphic that’s less than 1 MB.

Organization

The basic utility of instructional graphics is to reduce the complexity of difficult or confusing material. An instructional graphic will be successful the simpler you can make it without sacrificing meaning or content. 

Ask these questions of the content of your graphic as you’re designing it:

  • Have you removed details that are superfluous to the goal of the graphic? Include only the details in the graphic that will help facilitate students’ reasoning from the graphic.
  • Have you labeled all parameters?
  • Have you included a title for the graphic that makes it clear what conclusion the student should draw from it?

Alternative forms and formats

For users who are blind or have low/impaired vision, you will need to provide the information contained in it in another form. This may vary depending on the nature of the visual. Simple images usually require simple alternative text.

You should add alternative text for all charts and graphics derived from data tables, such as from spreadsheets, as discussed in the next section.

Provide access both to the data table and to a descriptive overview of the results and conclusions. If you provide the descriptive overview as part of the text surrounding the image, all users will benefit from being able to read the description. However, if the text-based description is redundant, you may want to provide that description in alt text or as a link to a separate file.

Alternative text for charts and graphs

Alternative text for charts and graphs made from data tables in spreadsheets usually require more complex descriptions. For example, this bar graph requires text-based information to describe the relationship between the data and the colored bars on the chart:

Bar graph representing the amount of receptor binding happening in each brain region

Use clear and specific language that describes the purpose of and information being conveyed by the graph or chart, including:

  • title
  • labels
  • values
  • relationships among variables
  • x and y axes
  • scale increments

The alt text dialog box in both Excel and Google sheets has fields for both a title and a description. The title of the graphic should NOT be simply the name of the file itself (e.g., “graphic.png”). Instead, use the title field to give a high-level overview of the information contained therein. Use the description field to describe the content in more detail:

In the alt text dialog box in this screenshot from an Excel document, we added “Receptor bindings in 4 brain regions” in the title field. We added “x-axis: Four brain regions are plotte by color: 1. Red, 2. Green, 3. Blue, 4. Yellow. Y-axis: receptor binding is plotted from 0 to 50 in increments of ten. 

“The first (red) brain region has approximately 46 receptor bindings. The second (green) brain region has about 50 receptor bindings. The third (blue) brain region has about 29 receptor bindings. The fourth (yellow) brain region has about 20 receptor bindings.

“This chart is created from teh data in Table 1 using cells A2:B6.”

You would not need this level of detail as described in this text example if the student were to have access to the source file from which the graphic was created. 

Test your descriptions or alt text by having someone review the document when the images are replaced with the alt text or descriptions. 

Text in images is often not the best choice

It is usually not a good idea to suspend text within an image just for the sake of making the text appear the way you want it to. Instead, it’s usually better to use plain text and use CSS to style the image the way you want it to look. If you do make a graphic to control the visual display of text, make sure to add alt text so screen reader users can read it.

Did you find what you were looking for?

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.