Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility WCAG Level A #621

Open
4 of 13 tasks
markov00 opened this issue Apr 6, 2020 · 3 comments
Open
4 of 13 tasks

Accessibility WCAG Level A #621

markov00 opened this issue Apr 6, 2020 · 3 comments
Labels
:accessibility Accessibility related issue enhancement New feature or request meta ...meta issue

Comments

@markov00
Copy link
Member

markov00 commented Apr 6, 2020

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.

  • 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. #613

  • 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
#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.

  • 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. #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

  • 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 markov00 added enhancement New feature or request :accessibility Accessibility related issue labels Apr 6, 2020
@markov00
Copy link
Member Author

markov00 commented Apr 6, 2020

@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?

@markov00 markov00 added the meta ...meta issue label Apr 6, 2020
@markov00 markov00 mentioned this issue Apr 6, 2020
10 tasks
@rshen91
Copy link
Contributor

rshen91 commented Apr 6, 2020

@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
Copy link

myasonik commented Apr 6, 2020

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.

@monfera monfera changed the title Accessibility WGAC Level A Accessibility WCAG Level A May 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:accessibility Accessibility related issue enhancement New feature or request meta ...meta issue
Projects
None yet
Development

No branches or pull requests

3 participants