Charts inaccessible to most SR users

[aardrian]

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) 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 on the 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:

<svg […] role="img" focusable="false">
    […]
    <g transform="translate(198,40)">
        […]
        <g transform="translate(0,0)">
            <g transform="translate(0,361)">
                <a href="https://adrianroselli.com/">
                    <text […]>
                        Adrian Roselli
                    </text>
                </a>
            </g>
        […]
        </g>
    […]
    </g>
</svg>

The chart has an img role. That means it cannot have child content, and it definitely cannot have interactive descendants.

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 (the links are not exposed);
• 1.1.1 Non-text Content (because the nested content is not exposed as alternative text);
• 1.3.1 Info and Relationships (the chart structure itself is lost);

Firefox recently fixed a bug 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 I used for that bug report. Use the editable pen to play with it more easily.

[eric-burel]

After some digging, this chart uses our "HorizontalBarChart.tsx" component, however the accessibility issue actually lies in Nivo's ResponsiveBar.

@SachaG this is the kind of thing you plan to move to HTML + CSS maybe?

[eric-burel]

@aardrian I am able to remove the "img" role and change it to "table", do you think it would be ok even if we don't set more precise roles for nested elements (column headers, cells etc.)? I think I can also give a role to each bar "rect" element but the priority is to solve this accessibility issue.

Edit: after more digging I can indeed only alter the main svg tag role to use "table" instead of "img" but I can't introduce more precise roles for column and tables. Is it enough to consider the interactivity issue solved?

[aardrian]

I am able to remove the "img" role and change it to "table", do you think it would be ok even if we don't set more precise roles for nested elements (column headers, cells etc.)?

No. Without all the required roles that make up a table, this will be broken in a different way. The reverse order of the nodes, the lack of proximity between the names and numbers, and the axes without context makes this little more than a lot of noise with no way to parse it.

Given the Data tab has a table with proper associations, a short term workaround might be to direct users to the data table.