Accessibility

[gregoriopellegrino]

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]

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

[privatemonkey]

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]

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]

Update: seems like I already addressed accessibility concerns back in Dec 2020, in this 9436f15 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 #39 I merged all commits which will be introduced in Charts.css version 1.0.

[filmaj]

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

[gregoriopellegrino]

I'll check

[ramiy]

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.