Package Exports

chart-access

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chart-access) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chart-access

Add an accessible, auto-generated fallback to a Chart.js chart.

Install

npm install chart-access

How to use

Version 1.0.0 is available in iife format as main.js. Reference it in html using the <script> tag:

<body>
    <canvas id='titledChart'></canvas>
    <script src='path/to/chart-access/main.js'></script>
    <script src='example.js'></script>
<body>

This adds a global variable chartaccess to the browser window with the addFallback function. Use addFallback to add auto-generated fallback text to the canvas for a chart created with Chart.js:

/* example.js */

// config for chart
let chartConfig = {
    type: 'line',
    data: data,
    options: {
        title: {
            text: 'Iced Coffees Consumed Each Month of the Year',
            display: true
        }
    }
}

// create Chart.js chart
let canvas = document.getElementById('titledChart');
let titledChart = new Chart(canvas, chartConfig);

// add auto-generated fallback text to chart canvas
chartaccess.addFallback(titledChart);

Now the canvas element for your chart will provide screen reader users with basic information about the chart:

<canvas id='titledChart'>Line chart titled, 'Iced Coffees Consumed Each Month of the Year'.</canvas>

If your chart does not contain title text, the fallback text will be:

<canvas id='untitledChart'>Untitled line chart.</canvas>