ÁùºÏ±¦µä

Complex images such as graphs and charts make it easy to represent trends and complex data relationships to visual users. Other complex images can include diagrams and illustrations that require a user to see parts of the image in order to understand the material. However, reliance on purely visual representations of data can pose accessibility barriers for users with vision impairments and those who use assistive technologies such as screen readers to navigate and read the document aloud.

WCAG 2.0 Guideline 1.1.1 requires all non-textual content to be provided with a text alternative that serves an equivalent purpose. WCAG 2.0 Guideline 1.4.1 requires that color should not be the only means of conveying information. Both of these guidelines apply to charts and graphs.

Alternative text, which assistive technologies read to the user, can usually describe simple images adequately. Complex images generally require additional supports.

Requirements for Complex Images

For complex images, which cannot be described succinctly, text alternatives are required in two parts:

1. A short description that identifies the image
   • Often this text is equivalent to a good title and key trends or relationships in the image
   • When possible or appropriate, the short description can indicate the location of a long description
2. A long description that provides a textual representation of the data or essential information in the image, which is important for a thorough understanding
   • Web developers often link what is called a long description (longdesc attribute in Hypertext Markup Languge [HTML]) to the image in the source document
   • For written reports and research, linking to an HTML file may not be practical. In these cases a including a table of data used to generate the graph can provide the necessary detail

Guidance and Best Practices

The following tips provide some guidance and best practices for working with complex images.

Complex Images that Cannot be Represented with a Data Table (or where actual data is not necessary and describing relationships in the data will suffice)

• Provide alt text for the image
• Describe the important aspects of the image in the body text near the image. This approach helps everyone because important information is explicitly stated in text; the image reinforces the message for visual users, and those using screen readers will hear the alt text that identifies the image

Complex Images Generated from Data

• Provide alt text for the image (consider title and key trends); indicate where additional information can be obtained when appropriate (i.e. link to a long description or indicate the table that contains the data)
• Include a table of the data used to generate the image near the image
• Add accessibility supports, such as properly identified column headers, to the table

Example of a graph with limited accessibility accompanied by a table of raw data. Names of courses are intentionally blurred for privacy

General Techniques for Improving Accessibility in Charts and Graphs

• Provide a descriptive title
• Label axes (and provide ample detail)
• Describe trends in text or a caption where possible
• Do not use color alone to convey meaning - add labels or symbols to lines (or use different types of lines) and values to bars in bar charts, and relate these to a legend or key
• Rotate bars to display horizontally if category names are too long to display vertically
• Use colors with sufficient color contrast, especially when using text on colored backgrounds, bars, etc. 
• Aggregate data where possible and avoid overloading charts
• Avoid 3D effects that may be hard to comprehend and avoid blow-apart effects that make it difficult to judge area
• Avoid making users draw mathematical conclusions based on purely visual aspects - describe conclusions and calculations in text where possible.