Accessible SVGs & Charts — Data Visualization for All Users Guide

In this tutorial, you'll learn about Accessible SVGs & Charts. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Accessible SVGs and charts use semantic SVG elements with proper title and desc, ARIA roles to expose interactive elements, and fallback data tables so screen reader users can access the same data that sighted users see in the visualization.

What You'll Learn

By the end of this guide, you'll understand how to write accessible inline SVGs with proper text alternatives, how to add ARIA roles to interactive chart elements, how to structure accessible chart data using fallback tables, how to choose accessible chart libraries and color palettes, and how to test chart Accessibility with screen readers.

Why Accessible Charts Matter

Data visualizations are inherently visual. A sighted user sees trends, outliers, and patterns at a glance. A blind or low-vision user needs that same data in an alternative format — either through text descriptions, data tables, or both. Without alternatives, charts are decorative images at best and inaccessible barriers at worst. At DodaTech, Durga Antivirus Pro uses accessible SVG charts in its threat dashboard, and Doda Browser renders performance data as both charts and tables.

Chart Accessibility Decision Flow

flowchart TD
  A[Chart or visualization] --> B{Is data representable as text?}
  B -->|Yes| C[Provide data table]
  B -->|No| D[Provide detailed text summary]
  C --> E[Use semantic SVG]
  C --> F[Add aria-label to chart container]
  D --> F
  E --> G{Interactive chart?}
  G -->|Yes| H[Add ARIA roles to interactive elements]
  G -->|No| I[Add title + desc elements]
  H --> J[Ensure keyboard navigation]
  I --> K[Test with screen reader]
  J --> K

{{< callout type="info" icon="sparkles" >}} Prerequisites: Basic HTML and SVG knowledge. Understanding of ARIA roles and WCAG non-text content requirements. {{< /callout >}}

WCAG Requirements for Charts

Several WCAG success criteria apply to data visualizations:

1.1.1 Non-text Content (Level A) — All non-text content must have a text alternative. For charts, this means either a data table, a detailed description, or both.

1.3.1 Info and Relationships (Level A) — The relationship between data points and their labels must be programmatically determinable.

1.4.1 Use of Color (Level A) — Color must not be the only means of conveying information. Charts must use patterns, labels, or textures alongside color.

1.4.11 Non-text Contrast (Level AA) — Graphical objects (bars, lines, pie slices) must have at least 3:1 contrast ratio against adjacent colors.

Accessible Inline SVGs

Inline SVGs are preferred over <img> for charts because they allow semantic elements inside the SVG that screen readers can access:

<figure role="figure" aria-label="Durga Antivirus Pro — monthly threat detections for Q2 2026">
  <svg viewBox="0 0 600 400" role="img" aria-labelledby="chart-title chart-desc">
    <title id="chart-title">Monthly threat detections — Q2 2026</title>
    <desc id="chart-desc">
      Bar chart showing 3,892 threats detected in April, 4,215 in May, and 4,601 in June.
      Ransomware, phishing, and trojan categories are shown in blue, orange, and green.
    </desc>

    <!-- Axes -->
    <g aria-hidden="true">
      <line x1="80" y1="50" x2="80" y2="350" stroke="#333" stroke-width="2"/>
      <line x1="80" y1="350" x2="550" y2="350" stroke="#333" stroke-width="2"/>
    </g>

    <!-- April bar group -->
    <g role="group" aria-label="April: 3,892 total threats">
      <rect x="100" y="200" width="40" height="150" fill="#005fcc"
            role="img" aria-label="Ransomware: 1,247 in April"/>
      <rect x="145" y="150" width="40" height="200" fill="#f90"
            role="img" aria-label="Phishing: 1,892 in April"/>
      <rect x="190" y="180" width="40" height="170" fill="#2e7d32"
            role="img" aria-label="Trojan: 753 in April"/>
      <text x="130" y="370" text-anchor="middle" aria-hidden="true">April</text>
    </g>

    <!-- May bar group -->
    <g role="group" aria-label="May: 4,215 total threats">
      <rect x="270" y="180" width="40" height="170" fill="#005fcc"
            role="img" aria-label="Ransomware: 1,402 in May"/>
      <rect x="315" y="120" width="40" height="230" fill="#f90"
            role="img" aria-label="Phishing: 2,115 in May"/>
      <rect x="360" y="150" width="40" height="200" fill="#2e7d32"
            role="img" aria-label="Trojan: 698 in May"/>
      <text x="300" y="370" text-anchor="middle" aria-hidden="true">May</text>
    </g>
  </svg>

  <figcaption>
    Durga Antivirus Pro detected a total of 12,708 threats across Q2 2026,
    with phishing remaining the most common threat category.
  </figcaption>
</figure>

Why this works: The <title> and <desc> elements provide a text alternative that screen readers announce. Each bar has role="img" with aria-label so users can explore individual data points. The axes and labels are marked aria-hidden="true" since they are decorative. A <figcaption> provides a summary-level description.

Fallback Data Tables

Every chart should be accompanied by a data table. This is the most reliable way to make chart data accessible:

<figure role="group" aria-label="Threat detection data with chart and table">
  <!-- SVG chart here -->

  <details>
    <summary>View data table for this chart</summary>
    <table aria-label="Monthly threat detections by category — Q2 2026">
      <caption>Durga Antivirus Pro threat detections, April—June 2026</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Ransomware</th>
          <th scope="col">Phishing</th>
          <th scope="col">Trojan</th>
          <th scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">April</th>
          <td>1,247</td>
          <td>1,892</td>
          <td>753</td>
          <td>3,892</td>
        </tr>
        <tr>
          <th scope="row">May</th>
          <td>1,402</td>
          <td>2,115</td>
          <td>698</td>
          <td>4,215</td>
        </tr>
        <tr>
          <th scope="row">June</th>
          <td>1,563</td>
          <td>2,301</td>
          <td>737</td>
          <td>4,601</td>
        </tr>
        <tr>
          <th scope="row">Total</th>
          <td>4,212</td>
          <td>6,308</td>
          <td>2,188</td>
          <td>12,708</td>
        </tr>
      </tbody>
    </table>
  </details>
</figure>

Why this works: The data table provides precise numbers that screen reader users can navigate with table navigation commands. Using <details> keeps the table accessible but visually hidden until requested, reducing clutter.

Accessible Chart Colors

Color is the most common way to distinguish chart categories, but WCAG 1.4.1 requires that information not be conveyed by color alone:

/* Accessible chart colors with pattern fallbacks */
.bar-ransomware {
  fill: #005fcc;
  /* Add pattern for color-blind users */
  stroke: #003d80;
  stroke-dasharray: none;
}

.bar-phishing {
  fill: #f90;
  /* Pattern overlay for color-blind users */
  stroke: #b36b00;
  stroke-dasharray: 4 2;
}

.bar-trojan {
  fill: #2e7d32;
  stroke: #1b5e20;
  stroke-dasharray: 2 2;
}

/* High-contrast mode support */
@media (prefers-contrast: high) {
  .bar-ransomware { fill: #000; stroke: #fff; }
  .bar-phishing { fill: #666; stroke: #fff; }
  .bar-trojan { fill: #999; stroke: #fff; }
}

Color contrast check: Each bar color must have at least 3:1 contrast against adjacent bars. Use WebAIM's contrast checker to verify your palette.

Interactive Charts with ARIA

Interactive charts — tooltips on hover, clickable segments, zoom — need keyboard equivalents and ARIA roles:

class AccessibleChart {
  constructor(svgElement) {
    this.svg = svgElement;
    this.dataPoints = svgElement.querySelectorAll('[role="img"][tabindex]');
    this.tooltip = document.getElementById('chart-tooltip');

    this.dataPoints.forEach(point => {
      point.addEventListener('focus', (e) => this.showTooltip(e));
      point.addEventListener('blur', () => this.hideTooltip());
      point.addEventListener('mouseenter', (e) => this.showTooltip(e));
      point.addEventListener('mouseleave', () => this.hideTooltip());
      point.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') this.hideTooltip();
      });
    });
  }

  showTooltip(e) {
    const point = e.currentTarget;
    const label = point.getAttribute('aria-label');
    this.tooltip.textContent = label;
    this.tooltip.hidden = false;
  }

  hideTooltip() {
    this.tooltip.hidden = true;
  }
}

<!-- Interactive chart tooltip -->
<div id="chart-tooltip" role="status" aria-live="polite"
     class="chart-tooltip" hidden>
</div>

<style>
.chart-tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  pointer-events: none;
}

[tabindex]:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
</style>

Why this works: Each data point is focusable via tabindex="0". Focus and hover both trigger the tooltip. role="status" with aria-live="polite" announces tooltip changes to screen readers. Escape dismisses the tooltip.

Chart Library Selection

When choosing a charting library, prioritize Accessibility support:

For internal DodaTech dashboards, Highcharts is recommended for its built-in Accessibility support. For custom implementations, D3.js with manual ARIA gives the most control.

Common Mistakes

1. Charts as Images Without Alt Text

An <img> tag wrapping a chart PNG without alt text is completely invisible to screen readers. Use inline SVG or provide a data table.

2. Color-Only Category Distinction

Using red and green bars without text labels or patterns excludes color-blind users. Always label segments directly.

3. No Keyboard Access for Interactive Charts

Tooltips and drill-downs that only work on mouse hover are inaccessible to keyboard users. Add focus event listeners.

4. Over-Nesting ARIA Roles

Applying role="img" to every <rect> in an SVG creates a noisy experience. Group related elements and label the group.

5. Missing Data Table for Complex Charts

A pie chart with 15 slices cannot be described adequately in alt text. Always provide a data table for complex visualizations.

6. Low Contrast in Chart Elements

Light-colored bars on a white background fail 3:1 non-text contrast. Use dark or saturated colors for all graphical elements.

7. Dynamic Charts Without Live Regions

If chart data updates in real time (like Durga Antivirus Pro's live threat feed), use aria-live="polite" to announce changes without disrupting the user.

Practice Questions

1. What is the minimum contrast ratio for graphical objects in a chart?

3:1. WCAG 1.4.11 Non-text Contrast requires that graphical objects (bars, lines, pie slices) have at least 3:1 contrast against adjacent colors.

2. Why is inline SVG preferred over <img> for accessible charts?

Inline SVG allows semantic elements like <title>, <desc>, and aria-label inside the SVG that screen readers can access. An <img> only supports the alt attribute.

3. What is the most reliable fallback for chart data?

A data table. Tables provide precise, navigable data that screen reader users can explore cell by cell.

4. What ARIA attribute should you use for a chart tooltip that appears on focus?

role="status" with aria-live="polite" announces tooltip content updates to screen readers without interrupting their current task.

5. Challenge: Take an existing Chart.js or D3.js chart. Add aria-label to each data point, a role="img" on the SVG, a <title> and <desc>, and a fallback data table. Test both keyboard navigation and screen reader announcement.

Real-World Task

Audit a dashboard that uses charts (Google Analytics, Tableau, or a custom dashboard). For each chart, determine: is there a text alternative? Can you navigate the data with a keyboard? Can a screen reader access the data? Document your findings.

FAQ