"Pings over time" chart missing description

[barlowm]

Steps to reproduce (assumes ChromeVox or similar)

1. Open Kibana/Uptime page
2. Navigate by keyboard to the "Status over time" chart

Actual Result
"Status over time heading 5"

There is no description for the chart itself. There is also no description of the chart data.

Expected Result

"Chart showing Status over time for 04/17/2019 from 11:41 to 11:56" (or whatever the appropriate values are)

This can be achieved by adding aria-label to container div for the chart:

<div class="euiSeriesChartContainer" 
aria-label="chart showing uptime status over time for 2019-04-17 from 11:41 to 11:56">

Navigating into the chart Chromevox reads just the times across the X-axis as you navigate over each one:

11:41 11:42 11:43, etc.

Chromevox should read the time and value for each chart item:

• 2019-04-17 11:41 to 11:42 Up:3 Down:2
• 2019-04-17 11:42 to 11:43 Up:3 Down:2

etc

This can be done by adding an "aria-label" inside each rect tag:

<rect 
    aria-label="2019-04-17 11:41 to 11:42 Up:3 Down:2" 
    x="0" 
    width="57.80603174603172" 
    y="28" 
    height="42" 
    style="opacity: 1; stroke: rgb(49, 133, 252); fill: rgb(49, 133, 252);">
</rect>

There is an article available on Making charts accessible for people with visual impairments, which also includes a discussion on how Highcharts approached making their chart products accessible.

Meta Issue
Accessibility Audit for Kibana 7.0
Make Uptime App Accessible for 7.0

Make Graph Accessible for 7.0
Make charts screen-reader-accessible

Kibana Version:
7.0

Relevant WCAG Criteria: WCAG Criterion
Guideline 1.1 Text Alternatives

[elasticmachine]

Pinging @elastic/uptime

[andrewvc]

We should add a description of the chart, but the individual rect tags will need to be done as a patch to EUI charts.