Infographics and Fliers

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.

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.

Challenge: Cross-compatibility

Electronic media is viewable on multiple video operating systems, browsers, email clients, and screen sizes.

Solution: Design with a text-first strategy of including all important content in textual form and embellishing with images where important content is not lost.

Challenge: Colors vary across devices

Screens and email clients show the same colors differently, and people with visual disabilities will see different colors based on their needs (e.g. redefining the colors for readability) or impairment (e.g. color blind).

Solution: 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.

Challenge: Text wrapping / text resizing / horizontal scroll

Text on images do not wrap on any screen, forcing horizontal scrolling which is frustrating for able users and for users with visual or motor disabilities. Images of text do not improve legibility by zooming in for people with visual disabilities because the text is a part of the image, not separate from the image as highlightable (the ability to copy and paste).

Solution: Use text instead of images of text, then spice them up with some basic colors and other legible styles. 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.

Challenge: Text copying/pasting

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.

Solution: 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.

Challenge: Calls to action embedded in image

If graphical buttons or text of web addresses in the image, they are inaccessible to interaction (e.g. click, swipe, touch).

Solution: 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.

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

• Graphics, and their embedded alternative text, should be strategically placed around textual content (see Web AIM example of accessible webpage infographic).
• Link to a long description on a webpage.

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 
• link to a "long description", like a link to a webpage or event page

• How to Meet WCAG (Quick Reference) - Images of Text

• Evergreen Data: 508 Compliance & Data Visualization

• Richard Baldwin. (2012) Future Reflections. Technology. If You Can Imagine It, You Can Draw It.
• WebAIM: Web Accessibility for Designers

• Wikipedia: Math Tools (e.g., MathML)
• Design Science: How can Design Science products make math accessible?
• (December 22, 2017) University of Washington: How do I create online math content that is accessible to students who are blind?

• LevelAccess Simulation: ZoomText Demo
• LevelAccess Simulation: Screen Magnification & Reflow in Acrobat Reader (also example of horizontal scrolling issues)
• LevelAccess Simulation: Screen Reader Language Support
• LevelAccess Simulation: Web Headings for Screen Readers
• LevelAccess Simulation: Effective Color Contrast
• LevelAccess Simulation: Dragon NaturallySpeaking Demo
• LevelAccess Simulation: Using Microsoft Word with Dragon NaturallySpeaking
• LevelAccess Simulation: On-Screen Keyboard Demo (also example of time limit issue)
• LevelAccess Simulation: Visual Focus Indication
• LevelAccess Simulation: Readability