Accessibility

If you are outputting data in a chart, you should be aware that for customers using assistive technologies like screen readers the chart will not be accessible. To account for this, all atoms come with a chartDescription prop, which is hidden from the customer and is for screen readers only.

To be as accessible as possible, you should provide a text description of what the chart is conveying, as well as a tabular representation of the data that you are showing in the visualisation. For example, if you were providing a basic bar chart to show a customers energy usage, you would typically just create a bar chart:


<CoralBarChart
    data={[
        {
            x: '00',
            y: 1000,
        },
        {
            x: '01',
            y: 500,
        },
        ...
    ]}
/>

However, in light of the above accessibility concerns, you should provide this as a text description accompanied by a tabular representation of the data that the chart is displaying:


const columns = [
    { title: 'Day', key: 'day' },
    { title: 'Usage (kWh)', key: 'kwh'}
];
 
const chartData = [
    {
        x: '00',
        y: 1000,
    },
    {
        x: '01',
        y: 500,
    },
    ...
]
 
const columns = [
    { title: 'Day', key: 'day' },
    { title: 'Usage (kWh)', key: 'kwh' },
];
 
const tableData = chartData.map((item) => ({
    key: item.x,
    day: item.x,
    kwh: item.y,
}));
 
const barChartDescription = () => {
    return (
        <>
            <Typography>
                A long form description of the data that is displayed in the
                chart
            </Typography>
            <Table columns={columns} data={tableData} />
        </>
    );
};
 
<CoralBarChart
    data={chartData}
    chartDescription={barChartDescription()}
/>