Accessibility WCAG Level A

[markov00]

This ticket list the tasks required to meet the Level A of the WCAG accessibility guide lines:

• [ ] Guideline 1.1 – Text Alternatives

  Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Build a first version of the alternative text that describe how the chart is composed alone those lines:

The chart is titled NNN, is an histogram chart with 3 different stacked series: series A, series B and series C.
The chart has an X axis interval from May 10th to May 25th 2020.
The chart has a Y axis interval from 0 to 100.
The series A has 10 different values, from a min of 4 to a max of 10, average of 6.
The series B has 10 different values, from a min of 10 to a max of 40, average of 20.
The series C has 10 different values, from a min of 2 to a max of 30, average of 10.

If during a preparatory investigation we found that this approach is too complex and lead us to an higher complexity we should pivot the decision toward a basic table rendering of the chart.

• [x] Guideline 1.2 – Time-based Media

  Provide alternatives for time-based media.

N/A

• [ ] Guideline 1.3 – Adaptable

  Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The legend should use semantic markup to describe its structure. https://github.com/elastic/elastic-charts/issues/613

• [x] Guideline 1.4 – Distinguishable

  Make it easier for users to see and hear content including separating foreground from background.

N/A we are not conveying content using colors https://github.com/elastic/elastic-charts/issues/589

• [ ] Guideline 2.1 – Keyboard Accessible

  Make all functionality available from a keyboard.

The legend should be accessible from the keyboard. The chart itself will not be make accessible with the keyboard due to the technical difficulties and efforts to make an image like that accessible from the keyboard. On a second stage (TODO add step 2 ticket) some efforts will go in that direction.

• [x] Guideline 2.2 – Enough Time

  Provide users enough time to read and use content.

N/A

• [ ] Guideline 2.3 – Seizures and Physical Reactions

  Do not design content in a way that is known to cause seizures or physical reactions.

There isn't flashing mechanism in the chart renderer, although moving your mouse over the legend or the chart cause the chart elements to fade in/out depending on the hovered elements. This can cause quick flesh if you are moving your mouse too quickly but we should investigate if this is considered as a failure or not

• [ ] Guideline 2.4 – Navigable

  Provide ways to help users navigate, find content, and determine where they are.

This should be tackled together with G2.1 on the legend. https://github.com/elastic/elastic-charts/issues/613

• [ ] Guideline 2.5 – Input Modalities

  Make it easier for users to operate functionality through various inputs beyond keyboard.

• add the Abort or Undo on brush

• [x] Guideline 3.1 – Readable

  Make text content readable and understandable.

NA, the language of the page is already configured by Kibana or shall be configured by the chart consumer

• [ ] Guideline 3.2 – Predictable

  Make Web pages appear and operate in predictable ways.

• [ ] Guideline 3.3 – Input Assistance

  Help users avoid and correct mistakes.

We display some errors, specially when hiding all the series or when there is no data input. We should fix the possible guideline failures on in these cases.

• [ ] Guideline 4.1 – Compatible

  Maximize compatibility with current and future user agents, including assistive technologies.

Check markup compatibility to meet the criteria

[markov00]

@rshen91 @myasonik I've did a quick check on the WCAG 2.1 and I've written here the what is missing or to be checked on our chart library to meet the Level A. Can you please check that? Do you think it should be extended with each criterion?

[rshen91]

@markov00 I think this looks great - thank you for compiling this! I didn't find any discrepancies between WCAG 2.0 and what you've outlined. I personally don't think that each criterion needs to be extended (here at least). I think if more description and drilling down is needed, maybe in the legend navigation and alternative text issues we could add the more specific criterion if it's needed? Anyways, I think for the purpose of this issue, extending the criterion might make it noisier without much gain.

[myasonik]

Guideline 2.3 – Seizures and Physical Reactions Do not design content in a way that is known to cause seizures or physical reactions. There isn't flashing mechanism in the chart renderer, although moving your mouse over the legend or the chart cause the chart elements to fade in/out depending on the hovered elements. This can cause quick flesh if you are moving your mouse too quickly but we should investigate if this is considered as a failure or not

I haven't seen any audits that would mark this as a failure so from a compliance perspective I think it's ok.

From a Kibana perspective, the one thing that I would make sure charts support in this regard is Kibana's accessibility:disableAnimations advanced setting.

From a broader perspective, it would also be good to respect prefers-reduced-motion though there's no plan in Kibana or EUI currently to support it (though they should as well). Might be good to make a plan together on this.