Kb Data Visualization Accessibility

Data Visualization Accessibility Skill

Reference data for making charts, graphs, dashboards, and interactive data visualizations accessible. Used by data-visualization-accessibility agent.

Chart Accessibility by Type

Bar/Column Charts

• Provide a text summary of the key takeaway (e.g., "Sales increased 40% in Q4")
• Include a data table alternative (visually hidden or toggleable)
• Each bar should be keyboard-focusable with a tooltip announcing the value
• Use patterns or textures in addition to color to distinguish series

Line Charts

• Describe the trend in alt text (e.g., "Upward trend from January through June, then decline")
• Provide data table with all data points
• Keyboard navigation: Left/Right arrows move between data points, value announced on focus
• Use distinct line styles (solid, dashed, dotted) alongside colors

Pie/Donut Charts

• Accompany with a data table showing percentages
• Each segment keyboard-focusable with percentage and label announced
• Use patterns/hatching — color-only distinction fails WCAG 1.4.1
• Consider: pie charts are generally poor for accessibility; a bar chart + table is often better

Scatter Plots

• Provide summary statistics (mean, median, correlation) as text
• Data table with all points is essential
• Interactive exploration via keyboard may not be feasible for large datasets — prioritize the summary

Treemaps / Heatmaps

• Provide hierarchical data table alternative
• Keyboard navigation through segments with value announcements
• Color scales must have sufficient contrast between adjacent levels

SVG Accessibility Patterns

Static Chart (Image-like)

htmlCopy code
<figure>
  <svg role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">Monthly Revenue 2025</title>
    <desc id="chart-desc">Bar chart showing revenue from January through December.
      Revenue grew from $50K in January to $120K in December with a dip in July.</desc>
    <!-- chart elements -->
  </svg>
  <figcaption>Figure 1: Monthly Revenue 2025. <a href="#revenue-table">View data table</a></figcaption>
</figure>

Interactive Chart

htmlCopy code
<svg role="application" aria-roledescription="interactive chart" aria-label="Monthly Revenue">
  <g role="list" aria-label="Revenue data points">
    <rect role="listitem" tabindex="0" aria-label="January: $50,000" .../>
    <rect role="listitem" tabindex="0" aria-label="February: $55,000" .../>
  </g>
</svg>
<div aria-live="polite" class="sr-only" id="chart-announcements"></div>

Decorative Charts

htmlCopy code
<svg aria-hidden="true" focusable="false">
  <!-- decorative background chart -->
</svg>

Chart Library Accessibility APIs

Highcharts

javascriptCopy code
Highcharts.chart('container', {
  accessibility: {
    enabled: true,
    description: 'Chart showing quarterly revenue growth',
    point: {
      valueDescriptionFormat: '{point.name}: {point.y} dollars'
    },
    keyboardNavigation: {
      enabled: true,
      order: ['series', 'zoom', 'rangeSelector', 'legend', 'chartMenu']
    }
  },
  // Highcharts has built-in sonification for data
  sonification: {
    enabled: true
  }
});

Highcharts built-in a11y features:

• Automatic <table> fallback generation
• Keyboard navigation between data points
• Screen reader announcements for each point
• Sonification (data as sound)
• High contrast mode support

Chart.js

javascriptCopy code
new Chart(ctx, {
  type: 'bar',
  data: { /* ... */ },
  options: {
    plugins: {
      // Chart.js has limited built-in accessibility
      // Use chartjs-plugin-a11y-legend for legend accessibility
      // Use chartjs-plugin-datalabels for visible data values
    }
  }
});
// Chart.js renders to <canvas> — provide a fallback table or aria-label on canvas

Chart.js limitations:

• Canvas-based — no DOM elements for screen readers to traverse
• Must provide <canvas aria-label="..." role="img"> or a fallback <table>
• No built-in keyboard navigation — requires custom implementation

D3.js

D3 renders to SVG — accessibility must be manually implemented:

javascriptCopy code
// Add ARIA to each data element
bars.attr('role', 'listitem')
    .attr('tabindex', '0')
    .attr('aria-label', d => `${d.name}: ${d.value} units`);

// Add keyboard navigation
bars.on('keydown', (event, d) => {
  if (event.key === 'ArrowRight') { /* focus next bar */ }
  if (event.key === 'ArrowLeft') { /* focus previous bar */ }
});

Recharts (React)

jsxCopy code
<BarChart data={data} accessibilityLayer>
  <Bar dataKey="value" />
</BarChart>

Recharts: accessibilityLayer prop adds basic ARIA attributes. Supplement with a data table.

Data Table Fallback Template

htmlCopy code
<details>
  <summary>View data table</summary>
  <table id="revenue-table">
    <caption>Monthly Revenue 2025</caption>
    <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Revenue ($)</th>
        <th scope="col">Change (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>January</td><td>50,000</td><td>—</td></tr>
      <tr><td>February</td><td>55,000</td><td>+10%</td></tr>
    </tbody>
  </table>
</details>

Color-Safe Palettes

Palettes that remain distinguishable under common forms of color vision deficiency:

Wong Palette (8 colors — CVD safe)

Each color, with its hex and use.

Rules for Color in Charts

• Never use red/green as the only distinction (deuteranopia affects ~8% of males)
• Always add a secondary visual channel: pattern, shape, label, or position
• Test with CVD simulation tools (Sim Daltonism, Chrome DevTools Emulate vision deficiencies)
• Ensure adjacent colors in a chart have sufficient contrast with each other (not just against white)

Keyboard Interaction Model

Single-Series Chart

Each key, with its action.

Dashboard Navigation

Each key, with its action.