Provide an ARIA label, or other accessible version of chart data.

[UDAR-TomH]

First off, this is a great package, very useful. However, it would be even more useful if it automatically included an ARIA label that describes the datasets represented by the graph, or a fall-back table of the data. I am currently overriding the template for the chart block to do this manually (we have legal accessibility requirements), but having this implemented by default in the library itself would be a great help.

[ArnarTumi]

Hey @UDAR-TomH good point, can you share with me how you are overriding it now?

[UDAR-TomH]

This is a very basic implementation, which works for my specific needs. It probably would not work as a general solution, but it may give you an idea of where to start. I have duplicated the template at 'templates/wagtailcharts/blocks/chart_block.html', and added the following:

<canvas 
    id="chart-{{block.id}}"
    data-datasets="{{self.datasets}}" 
    data-config="{{self.settings.config}}" 
    data-chart-type="{{self.chart_type}}" 
    aria-label="A chart {% if self.title %}of {{self.title}} {%endif%}showing {{self.datasets|chartdesc}}{%if self.settings.y_left_label %}, in {{self.settings.y_left_label}}{%endif%}">
</canvas>

Note the 'chartdesc' filter being applied to self.datasets, which consists of the following:

def chartdesc(data_string):
    dataset = json.loads(data_string)
    pos = 0
    set_desc = []
    for point in dataset['data']:
        if point and dataset['options']['title'][pos]:
            desc = f"{dataset['options']['title'][pos]} at {point[0]}"
            set_desc.append(desc)
        pos = pos + 1
    return ', '.join(set_desc)

This gives the chart a very basic ARIA label. I think the next step might be to explore generating a table using json2table or something.

[UDAR-TomH]

I should add, chart.js has some accessibility guidelines here: https://www.chartjs.org/docs/latest/general/accessibility.html

[saevarom]

@UDAR-TomH thanks for your input. I've added a very basic ARIA label. The default template provided is intentionally left quite simple, since most of the time you would want to wrap you chart in some template code that matches your project. See the changes in https://github.com/overcastsoftware/wagtailcharts/compare/8740ecdc760e8e0bcd9e9a3dc88d13505e0b2472..b98823f

I'll leave this issue open until we've decided what to do about presenting the data in the fallback.

[saevarom]

Released partial change in v0.5.0