Creating accessible content: graphs, charts, and images

Audience: Students, Faculty, Staff

Responsible Group: IT Training and Outreach

Overview

Creating accessible visual media is essential for fostering a learning and working environment where everyone can participate fully. When graphs, charts, and images are designed with accessibility in mind, they become usable by a wider audience, including individuals who rely on screen readers, have low vision, or process information differently. Many visual elements are not inherently accessible. Without proper descriptions or formatting, users relying on screen readers or alternative formats may miss critical information. Accessible visual media includes alternative text (alt text), descriptive captions, high-contrast visuals, and data presented in multiple formats.

Why it Matters

Good visuals help everyone understand key information and quickly comprehend complex ideas. Accessible visuals enhance audience engagement by improving readability and ensuring users of assistive technologies gain the same benefits through alt text and descriptive labels.

Best Practices

• Alt Text for Images: Add concise, meaningful descriptions to images so screen readers can convey the content.
• Descriptive Titles and Labels for Charts/Graphs: Ensure axes, legends, and data points are clearly labeled.
• Color Contrast and Patterns: Use high-contrast colors and avoid relying solely on color to convey meaning. Learn more about best practices for color contrast by visiting this Creating Accessible Content: Color and Contrast article.
• Data Tables as Alternatives: Provide data tables alongside charts for users who cannot interpret visual data.
• Accessible File Formats: Save and share content in formats that support accessibility (e.g., tagged PDFs, accessible PowerPoint slides).

Compliance Standards

• 1.1.1 Non-text Content: Provide meaningful alt text for all images, charts, and graphs.
• 1.4.11 Non-text Contrast: Visual elements (e.g., chart lines, icons) must meet contrast requirements to be distinguishable.
• 1.3.1 Info and Relationships: Ensure that visual relationships (e.g., axis labels, legends) are either programmatically determinable or described in text.
• 1.3.3 Sensory Characteristics: Avoid instructions that rely only on visual cues.
• 4.1.2 Name, Role, Value: Ensure that interactive or dynamic visual elements are coded so that assistive technologies can interpret them correctly.

How to Create Accessible Visuals

You can improve the accessibility of visual media by using tools like the Accessibility Checker in Microsoft 365 apps or third-party checkers, and by following a few key practices. These practices help ensure that images, charts, and graphs are understandable to all users.

Label Charts and Graphs Clearly

Charts should include:

• Axis labels
• Legends
• Titles that describe the chart’s purpose
• Data points that are distinguishable without relying solely on color

Tip: Use patterns, textures, or symbols in addition to color to differentiate data series, like in the example below.

Caption: A graph of Soybean Crop Cash Market Statewide Statistics demonstrating using color and symbols to differentiate data. Graph credit: University of Arkansas Division of Agriculture

Add Alternative Text (Alt Text) to Images

Alt text provides a brief description of an image’s content and purpose. It’s essential for screen reader users and should be:

• Concise (1-2 sentences)
• Descriptive of the image’s function, not just appearance
• Avoid phrases like “image of” or “graphic of”

Example of good Alt Text versus insufficient Alt Text:

Good: A cartoon of an apple tree with a brown trunk and big green leaves. It has ten bright red apples hanging from it. The tree’s on a grassy hill with little flowers and plants around.

Ineffective: Image of a tree

Important: When using images in Outlook, alt text will automatically be applied to your image, but it is not always effective. To check your alt text and make adjustments if needed, right-click on the image in the email body and select “add alternative text”.

Use High Contrast and Accessible Color Palettes

Ensure that text and visuals have sufficient contrast. Avoid red/green combinations and use tools like Microsoft’s Accessibility Checker to verify readability.

Save in Accessible Formats

When sharing visual content:

• Use tagged PDFs for documents with images and charts
• Use accessible PowerPoint templates
• Avoid scanned images of text unless OCR (Optical Character Recognition) is applied

Training

• Harvard University: Data Visualizations, Graphs, and Charts
• Microsoft Learn: Graphics, Design, and Media
• Word: Make your Word documents accessible to people with disabilities
• Excel: Accessibility best practices with Excel Spreadsheets
• PowerPoint: Improve Image Accessibility in PowerPoint
• OneNote: Make your OneNote notebooks accessible to people with disabilities
• Outlook: Make your Outlook emails accessible to people with disabilities
• SharePoint: Add accessible pictures and media to a SharePoint Online Site

Need Help?

• Submit a UARK IT Help ticket for access issues.
• Submit an IT training request for personalized support from the IT Training and Outreach.

If this article needs to be updated, please leave feedback on this article and it will notify the owner of the article.