# Is Observable Plot WCAG compliant ?

**URL:** <https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103>\
**Category:** Help\
**Created:** [July 18, 2023, 8:19am UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103 "2023-07-18T08:19:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://talk.observablehq.com/u/Kris)\
**Post date:** [July 18, 2023, 8:19am UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103/1 "2023-07-18T08:19:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 18, 2023, 8:35am UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103/2 "2023-07-18T08:35:56Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) says:

> The `aria-label` attribute can be used with regular, semantic HTML elements; it is not limited to elements that have an [ARIA `role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) assigned.

---

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://talk.observablehq.com/u/Kris)\
**Post date:** [July 18, 2023, 12:42pm UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103/3 "2023-07-18T12:42:26Z")

</div>

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

What about this ?

> **[Accessibility | Observable Plot](https://observablehq.com/plot/features/accessibility)**
>
> The JavaScript library for exploratory data visualization

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [July 18, 2023, 4:10pm UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103/4 "2023-07-18T16:10:16Z")

</div>

> [@Kris](#):
>
> While writing tests, we noticed that the graph is not WCAG compliant.  
> The graph should be reachable via tabbing.

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](https://marksmath.org/classes/Spring2023DDV/ObsToD3/HelloPlot.html) that I built for a class I taught in the Spring that generates a bar graph with Plot. And [here’s an accessibility analysis](https://wave.webaim.org/report#/https://marksmath.org/classes/Spring2023DDV/ObsToD3/HelloPlot.html) generated by [WebAIM](https://webaim.org/) 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.

---

<div class="post-metadata">

**Author:** ![Kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Kris](https://talk.observablehq.com/u/Kris)\
**Post date:** [July 20, 2023, 11:12am UTC](https://talk.observablehq.com/t/is-observable-plot-wcag-compliant/8103/5 "2023-07-20T11:12:58Z")

</div>

Don’t have anything online right now.

This is my plot code :

```auto
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 …

> **[Accessibility and Observable Plot](https://observablehq.com/@kjhollen/accessibility-and-observable-plot)**
>
> This site is for students in EDPX3200/4200: Data Visualization at University of Denver, though others are welcome to reuse any content as they see fit. Observable Plot uses Accessible Rich Internet Applications (ARIA) to make its charts accessible....