Chart

Why it is accessible

A chart is an image, and an image needs a text alternative. This one has three levels: a name (taken from the table's caption), a one-sentence summary of what the chart shows, and a full data table with row and column headers, which is the chart's source and stays on the page. A screen reader therefore hears the gist in one breath, and can reach the numbers as an ordinary table.

Each bar has its own hatching pattern as well as its own colour, and its value written directly beside it. In Windows High Contrast mode the colours are switched off, and the bars stay distinguishable. The chart is vector-based, so it scales up when you zoom in without losing sharpness, and at a width of 320px it fits without horizontal scrolling.

Test it yourself

Keyboard

There is nothing on the chart to operate; the keyboard moves through it as an image and a table.

Screen reader

You hear “image, Share of findings by WCAG principle” and the summary. You can read the table below the chart cell by cell.

Zoom and reflow

• Shrink the window to phone width: the chart gets smaller, the text inside it stays readable, and the page doesn't scroll horizontally.
• Turn on High Contrast mode in your system settings: the bars remain distinguishable by their pattern.

Without JavaScript

Only the table is shown, which is the reference view of the data, not a substitute for it.

Code to copy

<ad-chart data-unit=" %" data-summary="Almost half of the findings concern perceivability.">
  <table>
    <caption>Share of findings by WCAG principle (illustrative data)</caption>
    <thead><tr><th scope="col">Principle</th><th scope="col">Share in %</th></tr></thead>
    <tbody>
      <tr><th scope="row">Perceivable</th><td>42</td></tr>
      <tr><th scope="row">Operable</th><td>31</td></tr>
    </tbody>
  </table>
</ad-chart>
<link rel="stylesheet" href="/assets/js/components/ad-chart/ad-chart.css">
<script type="module" src="/assets/js/components/ad-chart/ad-chart.js"></script>