Cool Tools!

Defining the Scope

Infographics include graphs, charts, diagrams and any other text and/or graphic heavy image. Fliers, posters, digital advertising, and other text heavy images are included in this category due to the flatness of these images (i.e. nothing can be highlighted or copied/pasted into another application).

If alternative text for the image exceeds 125 characters, a different solution must be made to provide the same message and experience for all

Importance of Graphical Content and Accessibility

Infographics include data visualizations (e.g. graphs, charts, diagrams) and any other graphic and/or text heavy image. Fliers, posters, digital advertising, and other text heavy images are included in this category due to the flatness of these images (i.e. nothing can be highlighted or copied/pasted into another application).

Visual users often respond to graphical content more than textual content, but the message and importance is too often lost on the visually impaired or disabled when viewing electronic and information resources (EIR) as well as mobile video users viewing the content on small screen sizes. It is vitally important, as we observe the future trends of graphical content, that our message is still accessible.

If alternative text for the graphic exceeds 125 characters, a different solution must be made to provide the same message and experience for all users.

Best Practices

Web, Documents & Email

Web content, electronic documents and email messages function in similar manners regarding embedded images. 

Lecture & Test Materials

See National Center for Accessible Media (NCAM) Item Writer Guidelines for Greater Accessibility for examples and instructions.

Social Media

Social media platforms have varying accessibility regarding alternative text for graphics. Where you cannot provide alternative text,

  • include the alternative text directly in the post 
  • linking to a “long description” can mean a link to a webpage or event page

Print material versus digital material

Digital materials must be planned out and designed for each channel or platform. One size does not fit all. Consider the following when converting your print materials to digital.

ChallengeSolution
Electronic media is viewable on multiple video operating systems, browsers, email clients, and screen sizes.Design with a text-first strategy of including all important content in textual form and embellishing with images where important content is not lost.
Video/clients show the same colors differently, and visually impaired users will see different colors based on their needs (e.g. redefining the colors for readability) or impairment (e.g. color blind).Stick to basic/defined color sets on text, and don’t worry about the color being slightly off. Make sure the color of text in the foreground of a graphic does not clash (e.g. not too low contrast, not too bright contrast) with the graphics in the background.
Text on images do not wrap on any screen, forcing horizontal scrolling which is frustrating for able users and for users with visual impairments or motor function disabilities.If you use text on graphics, make it large (12 point or higher), legible (e.g. thickness), readable (e.g. good spacing between characters, words, and phrases), and succinct.
Images of text do not improve legibility by zooming in for the visually impaired because the text is a part of the image, not separate from the image as highlightable (the ability to copy and paste).Use text instead of images of text, then spice them up with some basic colors and other legible styles.
It is impossible to highlight text off an image and paste it into an application, like a calendar app. You must type it all out which is a burden for many users with or without impairments or disabilities.Use text instead of images of text, or link to more information, such as a calendar system where the event information can be easily added to your calendar app.
If graphical buttons or text of web addresses in the image, they are inaccessible to interaction (e.g. click, swipe, touch).Make each button a separate image, and use a call to action or recognizable icon instead of a web address for the text on the image.

Data Visualizations

Digital visualizations are just that: the visualization of data. The alternative for screen readers to the visual is available in the tabular data. This can be done with a table near the graph or a link to the table on another page or spreadsheet document, along with a summary or conclusions the visualization was supposed to bring across.

However, accessibility of data visualizations is not just a screen reader challenge. Tips for making data usable for visually able and impaired users:

  • Provide a summary or conclusions in textual form near the data visualization, like a figure caption.
  • When using colors to distinguish different data (e.g. bar graphs), use contrasting colors or shades of a color with reasonable variance (e.g. three bars could be 100% gray, 75% gray and 50% gray to still distinguish themselves from a white background).
  • When using color to indicate different data (e.g. line graphs), include another visual indicator (e.g. labels next to lines, symbols on data points, different patterned lines/shapes). They are helpful when color is reduced to black and white.
  • When providing percentages or quantities, make sure they are proportionally correct visually (e.g. 25% occupies a quarter of the data set, symbols/icons are of equal size and value when repeated to represent their quantities).
  • Provide just enough labels to indicate the conclusion found in the data. Too little provide few answers. Too much creates confusion.

References

Guides and How-To’s

Data Visualizations

Infographics

Guidelines

Simulations