Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/accessible-pie-chart.html

Last active May 20, 2021 19:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nfreear/b092d978b9fd885d8fe28d8d3eb5dc7d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nfreear/b092d978b9fd885d8fe28d8d3eb5dc7d to your computer and use it in GitHub Desktop.
Download ZIP
Example of an accessible pie chart within a HTML <canvas>, with WAI-ARIA roles and properties.
Raw
accessible-pie-chart.html
<!doctype html> <title> Accessible Pie Chart </title>
<base href="https://en.wikipedia.org/wiki/Pie_chart#Example" /><!-- Make links in table work! -->
<style>
*, *:before, *:after { box-sizing: border-box; }
body { margin: 1rem auto; max-width: 36rem; }
canvas, table { width: 100%; }
canvas, [role=figure], table { border: .1rem solid #999; padding: .6rem; }
hr { border-top: .4rem solid #999; margin: 3rem 0; }
/* th:hover, td:hover { background: #ddd; } /* Unused. */
</style>
<h1> Accessible Pie Chart </h1>
<p> Example of an accessible pie chart in a HTML <tt>&lt;canvas></tt>, using WAI-ARIA roles and properties. </p>
<hr>
<!-- ==================================================== -->
<div role="figure" aria-labelledby="fig-label">
<h2 id="fig-label"> European Parliament Election, 2004 </h2>
<p id="fig-description"> The following example chart is based on preliminary results of the election for the European Parliament in 2004. The table lists the number of seats allocated to each party group, along with the derived percentage of the total that they each make up. The values in the last column, the derived central angle of each sector, is found by multiplying the percentage by 360°. </p>
<canvas
id="canvas"
role="img"
aria-labelledby="fig-label"
aria-describedby="fig-description fig-table"
></canvas>
<table class="wikitable" id="fig-table" aria-labelledby="fig-label" aria-describedby="fig-description">
<thead>
<tr>
<th>Group</th> <th>Seats</th> <th>Percent (%)</th> <th>Central angle (°)</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/wiki/European_United_Left%E2%80%93Nordic_Green_Left" title="European United Left–Nordic Green Left">EUL</a></td>
<td>39</td> <td>5.3</td> <td>19.2</td>
</tr>
<tr>
<td><a href="/wiki/Party_of_European_Socialists" title="Party of European Socialists">PES</a></td>
<td>200</td> <td>27.3</td> <td>98.4</td>
</tr> <tr>
<td><a href="/wiki/European_Free_Alliance" title="European Free Alliance">EFA</a></td>
<td>42</td> <td>5.7</td> <td>20.7</td>
</tr>
<tr>
<td><a href="/wiki/Europe_of_Democracies_and_Diversities" title="Europe of Democracies and Diversities">EDD</a></td>
<td>15</td> <td>2.0</td> <td>7.4 </td>
</tr>
<tr>
<td><a href="/wiki/European_Liberal_Democrat_and_Reform_Party" class="mw-redirect" title="European Liberal Democrat and Reform Party">ELDR</a></td>
<td>67</td> <td>9.2</td> <td>33.0</td>
</tr>
<tr>
<td><a href="/wiki/European_People%27s_Party" title="European People&#39;s Party">EPP</a></td>
<td>276</td> <td>37.7</td> <td>135.7</td>
</tr>
<tr>
<td><a href="/wiki/Union_for_Europe_of_the_Nations" title="Union for Europe of the Nations">UEN</a></td>
<td>27</td> <td>3.7</td> <td>13.3</td>
</tr>
<tr>
<td>Other</td> <td>66</td> <td>9.0</td> <td>32.5</td>
</tr>
<tr>
<td>Total</td> <td>732</td> <td>99.9*</td> <td>360.2*</td>
</tr></tbody></table>
</div><!-- / [role = figure] -->
<!-- ==================================================== -->
<script>
/* Mock-up an example pie-chart inside a <canvas>!
https://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas
*/
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Pie_chart_EP_election_2004.svg';
</script>
<hr>
<pre>
Nick Freear, 20-May-2021.
* https://en.wikipedia.org/wiki/Pie_chart#Example (SOURCE)
* https://en.wikipedia.org/wiki/File:Pie_chart_EP_election_2004.svg
* https://w3.org/TR/wai-aria-1.1/#figure
WAI-ARIA roles used:
* figure (container),
* img.
WAI-ARIA properties used:
* aria-labelledby (ID or IDs of short description)
* aria-describedby (ID or IDs of extended description)
<!-- https://gist.github.com/nfreear/b092d978b9fd885d8fe28d8d3eb5dc7d -->
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment