Devographics / Devographics/Monorepo
Charts inaccessible to most SR users
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
## Describe the bug
Links in the chart views are inoperable by some screen readers. This is because of invalid nesting of roles. This affects a plurality (and [almost definitely majority](https://webaim.org/projects/screenreadersurvey9/#primary)) of screen reader users.
## Screen Reader / Browser
* JAWS 2023 / Chrome 116
* TalkBack 14 / Chrome 115
* VoiceOver / macOS 13.4.1 / Safari 16.5.1
## Steps to reproduce the bug
1. Use JAWS or TalkBack with Chrome, or VoiceOver with Safari.
2. Navigate to [People](https://2023.stateofcss.com/en-US/resources/#people) on the [Resources](https://2023.stateofcss.com/en-US/resources/) page.
3. Choose the "Other Answers" tab, leaving the default chart view.
4. Navigate into the tab panel and into the chart.
5. Attempt to activate the links.
## Expected Behavior
* The names are announced.
* The links can be focused and activated.
## Actual Behavior
* The names are _not_ announced.
* The links _cannot_ be focused _nor_ activated.
## Related code
The chart is made up of this elided HTML:
```HTML
```
The chart has an [`img` role](https://www.w3.org/TR/wai-aria/#img). That means it cannot have child content, and it definitely [cannot have interactive descendants](https://www.w3.org/TR/html-aria/#index-aria-img).
## Additional Context
NVDA / Firefox and TalkBack / Firefox allow me to navigate into the links. This is a courtesy on Firefox's part.
The code as shown violates the following WCAG 2.1 Success Criteria:
* [4.1.2 Name, Role Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) (the links are not exposed);
* [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) (because the nested content is not exposed as alternative text);
* [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (the chart structure itself is lost);
[Firefox recently fixed a bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1728676) that prevented table roles from working in SVGs. With that fix in the current release, you may want to explore adding table roles and removing the `img` role. You can [test the example](https://cdpn.io/aardrian/debug/xxqYyaa#svg-table-roles) I used for that bug report. [Use the editable pen](https://codepen.io/aardrian/pen/xxqYyaa) to play with it more easily.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.