Devographics / Devographics/Monorepo

Charts inaccessible to most SR users

Open
#266 3 comments 1 reaction 0 assignees View on GitHub
a11y charts nivo results
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.