Is Observable Plot WCAG compliant ?

Community Help
1

Hi,

Recently we started using Observable Plot, more specific the y-bar chart.
While writing tests, we noticed that the graph is not WCAG compliant.
The graph should be reachable via tabbing.

The generated html looks like this :
<g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"><!-- ... --></g>

The error I get :
→ aria-label attribute cannot be used on a g with no valid role attribute.

Is there a way to fix this ?

Thanks.

2

Thank you for using Plot! I don’t have a precise answer yet, but agree that there are things that can be improved. Can you point to the WCAG reference for this particular issue? And what do you think the solution would be in SVG?

Note that aria-label - Accessibility | MDN says:

The aria-label attribute can be used with regular, semantic HTML elements; it is not limited to elements that have an ARIA role assigned.

3

I think the WCAG ref is this one :
https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=211#keyboard-accessible

What about this ?

4

Do you have a pointer to a notebook or webpage with a graph generated using Plot that exhibits the problem? A precise description of the tools you used to analyze the plot would be nice as well.

For example, here’s a small webpage that I built for a class I taught in the Spring that generates a bar graph with Plot. And here’s an accessibility analysis generated by WebAIM that generates no errors.

Of course, the analysis includes a disclaimer:

Manual testing is still necessary to ensure compliance and optimal accessibility.

That can be platform dependent, though. I’m able to tab to the graph in Chrome, for example, but not in Firefox.

5

Don’t have anything online right now.

This is my plot code :

return Plot.plot({
      color: {legend: true},
      marginTop: 35,
      marginRight: 35,
      marginBottom: 75,
      marginLeft: 85, 
      insetTop: 10,
      ariaLabel: 'Grafiek',
      ariaDescription: 'Grafiek met data van het geselecteerde punt',
      style: {
        fontFamily: 'Flanders Art Sans, sans-serif',
        width: '100%',
        maxWidth: '800px',
        fontSize: 'calc(1.2em - 0.5vw)'
      },
      x: {
        tickFormat: '',
        tickRotate: this.showXLabelVertical() ? -90 : 0,
        grid: false,
        label: this.finalOptions.xAxisLabel,
        interval: 1,
        line: true,
        labelAnchor: 'right',
        labelOffset: this.showXLabelVertical() ? 70 : 40
      },
      y: {
        tickFormat: tickFormat,
        grid: true,
        label: this.finalOptions.yAxisLabel,
        line: true,
        domain: this.bepaalDomein(this.data),
        labelAnchor: 'top',
        labelOffset: 30
      },
      marks: [
        Plot.barY(this.data, {
          x: this.finalOptions.xAxisKey,
          y: this.finalOptions.yAxisKey,
          fill: this.finalOptions.barColor,
          title: d => `${d[this.finalOptions.xAxisKey]} : ${tickFormat(d[this.finalOptions.yAxisKey])} ${this.finalOptions.yAxisLabel}`
        }),
        Plot.text(this.data, {
          text: d => (d[this.finalOptions.yAxisKey]).toFixed(1)
        })
      ]
    });

When I enable ‘voiceOver’ on my mac, it’s not reading any of the text I defined in ariaLabel or ariaDescription …