Accessibility - Declarative Chart Library

Auto-Generated Insights

Charts automatically generate ARIA labels and descriptions with meaningful insights about the data. Screen readers announce the chart type, data summary, and analysis of trends or distributions.

Bar Chart with Auto-Insights

<dc-chart width="500" height="350">
  <dc-title>Quarterly Sales</dc-title>
  <dc-bar value="45" label="Q1"></dc-bar>
  <dc-bar value="72" label="Q2"></dc-bar>
  <dc-bar value="38" label="Q3"></dc-bar>
  <dc-bar value="95" label="Q4"></dc-bar>
</dc-chart>

Quarterly Sales

aria-label:
description:

Line Chart with Trend Analysis

<dc-chart width="500" height="350">
  <dc-title>Stock Price</dc-title>
  <dc-line label="ACME Corp" stroke="#2196F3">
    <dc-point value="100" label="Jan"></dc-point>
    <dc-point value="115" label="Feb"></dc-point>
    <dc-point value="108" label="Mar"></dc-point>
    <dc-point value="142" label="Apr"></dc-point>
    <dc-point value="165" label="May"></dc-point>
  </dc-line>
</dc-chart>

Stock Price

aria-label:
description:

Pie Chart with Distribution Analysis

<dc-pie-chart width="500" height="350">
  <dc-title>Market Share</dc-title>
  <dc-pie-slice value="55" label="Leader"></dc-pie-slice>
  <dc-pie-slice value="25" label="Challenger"></dc-pie-slice>
  <dc-pie-slice value="12" label="Follower"></dc-pie-slice>
  <dc-pie-slice value="8" label="Niche"></dc-pie-slice>
</dc-pie-chart>

Market Share

aria-label:
description:

Funnel Chart with Conversion Analysis

<dc-funnel-chart width="500" height="350">
  <dc-title>Sales Funnel</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="400" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="150" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="50" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>

Sales Funnel

aria-label:
description:

Manual ARIA Overrides

You can override the auto-generated accessibility text with custom content using aria-label and aria-description attributes.

Custom aria-label

<dc-chart width="500" height="350"
  aria-label="Revenue growth chart showing 65% increase">
  <dc-title>Revenue Growth</dc-title>
  <dc-bar value="100" label="2022"></dc-bar>
  <dc-bar value="165" label="2023"></dc-bar>
</dc-chart>

Revenue Growth

aria-label:

Custom aria-description

<dc-chart width="500" height="350"
  aria-description="This chart shows our company exceeded
  the industry average growth rate of 12% by achieving
  65% year-over-year revenue increase.">
  <dc-title>Revenue Growth</dc-title>
  <dc-bar value="100" label="2022"></dc-bar>
  <dc-bar value="165" label="2023"></dc-bar>
</dc-chart>

Revenue Growth

description:

Disabling Auto-Insights

Use aria-insights="none" to disable auto-generated insights, or aria-insights="basic" for minimal descriptions without trend analysis.

Insights Disabled

<dc-chart width="500" height="350" aria-insights="none">
  <dc-title>Simple Chart</dc-title>
  <dc-bar value="30" label="A"></dc-bar>
  <dc-bar value="50" label="B"></dc-bar>
  <dc-bar value="40" label="C"></dc-bar>
</dc-chart>

Simple Chart

aria-label:
description:

Basic Insights Only

<dc-chart width="500" height="350" aria-insights="basic">
  <dc-title>Basic Chart</dc-title>
  <dc-bar value="30" label="A"></dc-bar>
  <dc-bar value="50" label="B"></dc-bar>
  <dc-bar value="40" label="C"></dc-bar>
</dc-chart>

Basic Chart

aria-label:
description:

Screen Reader Testing Guide

Testing with NVDA (Windows)

Download and install NVDA from nvaccess.org
Press Insert + Q to start NVDA
Navigate to a chart using Tab or arrow keys
NVDA will announce: the aria-label (chart type and title), then the description (data summary and insights)
Press Insert + Q twice quickly to exit NVDA

Expected Announcements

Bar charts: "bar chart, [title], graphic. [N] bars, values from [min] to [max]. [highest] highest at [value]; [lowest] lowest at [value]"
Line charts: "line chart, [title], graphic. [N] lines with [M] points. [trend description], peaked at [label]"
Pie charts: "pie chart, [title], graphic. [N] slices totaling [sum]. dominated by [label] at [percent]%"
Funnel charts: "funnel chart, [title], graphic. [N] stages from [first] to [last]. [conversion]% overall conversion"

Testing with VoiceOver (Mac)

Press Cmd + F5 to enable VoiceOver
Use Ctrl + Option + Right Arrow to navigate through elements
When you reach a chart, VoiceOver will announce the aria-label
Press Ctrl + Option + Shift + Down Arrow to interact with the chart group
Press Cmd + F5 again to disable VoiceOver

VoiceOver Rotor

Charts appear as "graphics" in the VoiceOver Rotor. Press Ctrl + Option + U to open the Rotor, then use arrow keys to find "Graphics" and navigate to charts.

Testing with Browser DevTools

Right-click on a chart and select "Inspect"
Look at the <svg> element's attributes:
- role="img" - identifies as an image
- aria-label="..." - the accessible name
- aria-describedby="dc-desc-N" - references the description
Find the <desc id="dc-desc-N"> element inside the SVG - this contains the full description

Chrome Accessibility Tab

In Chrome DevTools, select the Elements tab, then open the Accessibility pane (in the right sidebar). This shows the computed accessible name and description for the selected element.

Common Issues and Solutions

No announcement: Ensure the SVG has role="img". Without it, screen readers may skip the element.
Missing description: Check that aria-describedby references a valid <desc> element ID.
Too verbose: Use aria-insights="basic" or aria-insights="none" to reduce verbosity.
Wrong content: Use aria-label and aria-description attributes to override auto-generated content.