WCAG 1.1.1 Non-text Content - Chart Accessibility

This page demonstrates how to make charts accessible by providing appropriate text alternatives.

Monthly Sales Data Example

Text Alternative

The chart shows monthly sales figures for the first half of 2024:

  • January: $10,000
  • February: $15,000
  • March: $12,000
  • April: $18,000
  • May: $22,000
  • June: $20,000

The trend shows overall growth with the highest sales in May at $22,000.

Data Table Alternative

Monthly Sales Data for First Half of 2024
Month Sales Amount
January $10,000
February $15,000
March $12,000
April $18,000
May $22,000
June $20,000

Accessibility Features

  • ARIA Labels

    The chart includes descriptive ARIA labels that screen readers can announce.

  • Text Description

    A comprehensive text alternative describes the data and trends.

  • Data Table

    Raw data is provided in an accessible table format.

  • Color Contrast

    Chart colors are chosen for sufficient contrast and visibility.

Best Practices for Chart Accessibility

  1. Provide text alternatives: Include detailed descriptions of the chart's data and meaning.
  2. Use ARIA labels: Add appropriate ARIA attributes to make charts screen-reader friendly.
  3. Include data tables: Offer the raw data in an accessible table format.
  4. Consider color blindness: Use patterns or shapes in addition to colors to distinguish data series.
  5. Maintain contrast: Ensure sufficient color contrast between chart elements.
  6. Add meaningful titles and labels: Use clear, descriptive titles and axis labels.
  7. Provide context: Include explanations of trends or important insights.