search

ChartsCSS / charts.css

Open source CSS framework for data visualization.
https://ChartsCSS.org
MIT License
6.21k stars 175 forks source link

Accessibility #13

Closed gregoriopellegrino closed 11 months ago

gregoriopellegrino commented 3 years ago

This approach is very interesting and - relying on tables - could also be very accessible.

However, from a first text with the screen reader I noticed that important labels (thead, th, etc.) are hidden with display:none. This makes them completely hidden from assistive technologies.

Perhaps with another approach you can achieve the same result, while maintaining the high level of data accessibility, for example: https://webaim.org/techniques/css/invisiblecontent/

ramiy commented 3 years ago

@gregoriopellegrino Very good point. I will add this to my TODO list.

privatemonkey commented 3 years ago

You might be able to use the table header for axis names and legend. That way the table header cells are visible elements that will be triggered by the screen reader. For many charts the first th will be the main variable, the following th:s will be either categories which could be used as a legend or a single variable that could be used for the secondary axis.

I guess the calculations for this will be a bit tricky to work with since the preference for layout differ a lot. Still, might be worth investigating.

jasondilworth56 commented 3 years ago

I saw this this morning and thought I might as well have a stab at the most obvious change for display:none issues. I've added a mixin for visually-hidden as described on a11yproject and then used that mixin wherever the project had display: none.

Pull request: #23

ramiy commented 3 years ago

Update: seems like I already addressed accessibility concerns back in Dec 2020, in this https://github.com/ChartsCSS/charts.css/commit/9436f15f3a53854468f5a10ff029f38f1e91b6ca commit.

You could not see it the repo as it was part on version 1.0 that is not released yet.

In any case, in PR https://github.com/ChartsCSS/charts.css/pull/39 I merged all commits which will be introduced in Charts.css version 1.0.

filmaj commented 12 months ago

@ramiy now that 1.1.0 is out, should this issue be closed, or is accessibility still an issue?

gregoriopellegrino commented 12 months ago

I'll check

ramiy commented 11 months ago

Yes, it was fixed.

As of v1.0.0, elements are no longer hidden with display:none, they use visually-hidden mixin.

@gregoriopellegrino Thank you for your valuable feedback.