- Is it too much text? Check with Facebook’s Text Overlay Tool.
- Poor contrast between background color and text? Use Brandwood’s Text on background image a11y check.
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.
Web, Documents & Email
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.
Lecture & Test Materials
See National Center for Accessible Media (NCAM) Item Writer Guidelines for Greater Accessibility for examples and instructions.
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.
|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.|
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.
Guides and How-To’s
- Usability.gov’s Web Standards and Usability Guidelines
- Chapter 1: Optimizing the User Experience
- Chapter 3: Accessibility
- Chapter 11: Text Appearance
- Chapter 14: Graphics, Images, and Multimedia
- Chapter 16: Content Organization
- Web Accessibility Initiative (WAI)
- Designing and Developing
- Use headings to convey meaning and structure
- Make link text meaningful
- Write meaningful text alternatives for images
- Provide clear instructions
- Keep content clear and concise
- Provide sufficient contrast between foreground and background
- Don’t use color alone to convey information
- Ensure that interactive elements are easy to identify
- Use headings and spacing to group related content
- Create designs for different viewport sizes
- Include image and media alternatives in your design
- Use mark-up to convey meaning and structure
- WebAIM: How to create an accessible infographic
- Interactive Accessibility: Creating an Accessible Infographic
- WCAG 2.0 Guideline 1.3 – Adaptable
- Understanding WCAG 2.0 Guideline 1.3
- WCAG 2.0 Guideline 1.4 – Distinguishable
- Understanding WCAG 2.0 Guideline 1.4
- Techniques for WCAG 2.0 G96: Providing textual identification of items that otherwise rely only on sensory information to be understood
- Techniques for WCAG 2.0 G117: Using text to convey information that is conveyed by variations in presentation of text
- User Simulation: Through Eyes of a Screen Reader
- Simulation: ZoomText Demo
- Simulation: Screen Magnification & Reflow in Acrobat Reader (also example of horizontal scrolling issues)
- Simulation: Screen Reader Language Support
- Simulation: Web Headings for Screen Readers
- Simulation: Effective Color Contrast
- Simulation: Dragon NaturallySpeaking Demo
- Simulation: Using Microsoft Word with Dragon NaturallySpeaking
- Simulation: On-Screen Keyboard Demo (also example of time limit issue)
- Simulation: Visual Focus Indication
- Simulation: Readability
- User Simulation: Carly’s Café – Experience Autism Through Carly’s Eyes
- The National Autistic Society Simulation: Autism and sensory sensitivity