(Accessible) High Data Volume Bar Chart #36386
Labels
blocked
Feature:ElasticCharts
Issues related to the elastic-charts library
Project:Accessibility
Team:Visualizations
Visualization editors, elastic-charts and infrastructure
WCAG A
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).
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
The text was updated successfully, but these errors were encountered: