Data Visualizations

Overview

A visualization is one way to represent data. It can make a pattern easier to recognize, but it should not be the only way people can reach the information. A useful data experience combines the visual with a concise takeaway, clear labels, and an accessible data or text alternative.

The appropriate alternative depends on complexity. A simple chart may need a brief description and a few visible values. A complex dashboard may need a summary, an accessible table or downloadable dataset, instructions for controls, and a longer explanation of important relationships.

Core practices

• 
  

  Lead with the takeaway

  State the main trend, comparison, or conclusion near the visualization. People should not have to decode every mark before understanding why the data matters.

   

• 
  

  Label data directly

  Place names and values close to the lines, bars, points, or regions they describe. Direct labels reduce dependence on legends, memory, and color matching.

   

• 
  

  Use more than color

  Combine color with labels, patterns, line styles, shapes, or position. Color can reinforce meaning, but it should not be the only way to distinguish data.

   

• 
  

  Provide equivalent information

  Offer the underlying values in an accessible table, list, or downloadable dataset. Provide a longer description when relationships or context cannot be communicated concisely.

   

• 
  

  Reduce unnecessary complexity

  Remove decoration and data that do not support the purpose. Split dense, multidimensional information into focused views when that makes the relationships easier to understand.

   

Accessible chart examples

These examples use a realistic, illustrative training dataset to show how the visual, takeaway, and data table work together. The charts are hidden from assistive technology because the same values and relationships are provided in visible text and semantic tables.

Text alternatives and access to data

Write a text alternative that communicates the purpose and important result of the visualization. Do not attempt to place every value from a complex chart into alternative text.

• For a simple chart, describe the chart type only when it helps, then state the main comparison, trend, or result.
• For a complex chart, provide concise alternative text and a nearby longer description that explains relationships, outliers, and context.
• Provide the values in a semantic HTML table, structured list, or accessible downloadable file.
• Give downloadable datasets meaningful column headings, clear units, and descriptive file names.
• Do not repeat the same full description in the alternative text, caption, and surrounding paragraph.

Color and contrast

• Use labels, patterns, shapes, or line styles so meaning does not depend on color alone (WCAG 1.4.1, Level A).
• Ensure text meets a contrast ratio of at least 4.5:1, or 3:1 for qualifying large text (WCAG 1.4.3, Level AA).
• Ensure chart lines, bars, data points, focus indicators, and controls needed for understanding have at least 3:1 contrast against adjacent colors (WCAG 1.4.11, Level AA).
• Test the visualization in grayscale and with increased contrast. Confirm that labels and relationships remain understandable.
• Avoid placing text directly over busy map regions, gradients, or patterned backgrounds without a solid contrasting background.

Interactive visualizations and dashboards

Keyboard access to the chart container is only a starting point. People need to operate the controls, understand what changed, and reach the same information without exploring every mark in the visualization.

Provide three ways to reach the information

1. 1

   Operate the view

   Give every filter, legend, tab, zoom control, and interactive data point a clear name and visible keyboard focus. Do not require dragging, hovering, or precise pointer movement.

   When a tooltip contains useful information, show the same content on keyboard focus. Keep it available long enough to read, and let users dismiss it without moving focus unexpectedly.

2. 2

   Understand what changed

   Place a concise summary near the visualization, such as “24 results across 3 departments.” When a filter or control changes that summary, announce the update to assistive technology without interrupting the user.

   Organize longer dashboards with descriptive headings and landmarks. Keep the visual order, reading order, and keyboard focus order consistent.

3. 3

   Use an equivalent view

   Provide a nearby table, plain-language summary, or data download that communicates the same essential information. People should not have to visit every bar, point, or map region to understand the result.

   Make the alternative easy to find and keep it updated whenever the visualization’s data changes.

Production workflow

1. Define the question

   Identify the audience, the decision the data supports, and the one or two insights the visualization needs to communicate.

2. Choose a clear form

   Select a chart type that fits the relationship. Remove unnecessary dimensions, effects, and decoration.

3. Build alternatives together

   Write the takeaway, add direct labels, select patterns and contrast, and prepare the text or data alternative while creating the chart.

4. Publish and maintain

   Check the rendered chart, nearby explanation, download, keyboard behavior, and responsive layout. Recheck the experience when the data or platform changes.

Review before publishing

• Read the heading, takeaway, and alternative without viewing the chart. Confirm they communicate the purpose and important result.
• Check that every series, category, and important point can be distinguished without color.
• Zoom the page and narrow the browser window. Confirm that labels remain readable and no essential information is clipped.
• Navigate every interactive control with a keyboard and confirm visible focus and logical order.
• Review the accessible data alternative independently and confirm that headings, units, and values are clear.
• Include people who use screen readers, magnification, keyboard navigation, or alternative representations in review when possible.

Use the Digital Accessibility Checkpoints throughout planning, design, publication, and maintenance. Review is a point-in-time assessment, and barriers can emerge as data, tools, or user needs change.