(Accessible) High Data Volume Bar Chart

[barlowm]

Steps to reproduce (assumes NVDA or JAWS Screen Reader or similar)

NVDA Screen Reader is a free Screen Reader which can be downloaded from the NV Access Website Deque has a page of shortcuts for help on using NVDA as well as a Quick Reference Guide for using NVDA

General Accessible Chart Information

Charts use images to convey complex data to users, as such charts can provide serious accessibility issues to users of various types of Assistive Technology (AT), e.g. screen/braille readers. As such charts must provide a "text description of the image" WCAG 2.1 - 1.1.1 Non-text Content (Level A). Additionally if any chart content requires color to convey information then additional supplemental information is needed to meet WCAG 2.1 - 1.4.1 Use of Color (Level A).

For any chart a general description of the chart should be available either as part of the overall descriptive text associated with the chart or as part of a summary/alt attribute for the image/chart (e.g. aria-describedby)

For a complex, edge case, chart such as this, the "figure" and "figure caption" elements should be used to provide a general overall description of the image plus a link to a properly tagged HTML table of the raw data (potentially on a separate page).

<figure role="group">
    <img src="chart.png"
        alt="Bar chart titled 'Bar Chart with High Data Volume' with the 'Left axis' with a minimum value of 0.00 and a maximum value of 9.00. With 'Bottom axis' having 14965 categories from a low of 0 to a high of 14965">
    <figcaption>
    <a href="" target="_blank">Chart data available in tabular form, opens in a new window</a>
    </figcaption>
</figure>

Note: "Left axis" and "Bottom axis" are NOT accessible labels as they are in violation of WCAG 2.1 - 1.3.3 Sensory Characteristics (Level A).

Note: In addition to "Highcharts" there is another very good HTML5/Canvas library for creating accessible charts - Anychart.JS - Accessibility Overview

Meta Issue:

Accessibility Audit for Kibana 7.0 Audit of Elastic Charts

Kibana Version:

7.0

Relevant WCAG Criteria:

WCAG Criterion

[barlowm]

@markov00

[elasticmachine]

Pinging @elastic/datavis (Team:DataVis)

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)