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.

Sign up for GitHub

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

Jump to bottom

Accessibility #13

Closed
gregoriopellegrino opened this issue Mar 18, 2021 · 7 comments
Closed

Accessibility #13

gregoriopellegrino opened this issue Mar 18, 2021 · 7 comments
Assignees
@ramiy
Labels
enhancement New feature or request
Milestone
1.0.0

Comments

@gregoriopellegrino
Copy link

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

ramiy commented Mar 18, 2021

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

@privatemonkey
Copy link

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

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

ramiy commented Apr 25, 2021 •
edited
Loading

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.

@ramiy ramiy self-assigned this Apr 26, 2021
@ramiy ramiy added the enhancement New feature or request label Apr 26, 2021
@ramiy ramiy added this to the 1.0.0 milestone May 4, 2021
@filmaj
Copy link

filmaj commented Oct 25, 2023

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

@gregoriopellegrino
Copy link
Author

I'll check

@ramiy
Copy link
Collaborator

ramiy commented Oct 26, 2023

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.

@ramiy ramiy closed this as completed Oct 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ramiy ramiy

Labels
enhancement New feature or request
Projects
None yet
Milestone
1.0.0
Development

No branches or pull requests
5 participants
@filmaj @ramiy @privatemonkey @gregoriopellegrino @jasondilworth56