
## Table of Contents

1. [Disclaimer](#disclaimer)
1. [The Announcement](#the-announcement)
1. [The Marketing and Documentation](#the-marketing-and-documentation)
1. [A Few Quick-ish Tests](#a-few-quick-ish-tests)
1. [Some Accessibility Issues](#some-accessibility-issues)
1. [In Summary](#in-summary)
1. [Related Resources](#related-resources)

## Disclaimer

I'm a neurodivergent and multiply disabled expert in web accessibility. I have a software engineering degree and almost a decade of software engineering experience. I am currently a self-employed consultant in software engineering and accessibility. ([Reach out if you want to collaborate](https://semanticfish.com)!)

This article is a few hours of free labor and close to half of what I'd charge for a 1-week sprint in a contract. This is to say I spent valuable time and limited energy doing work that should paid good money. I'm not saying it has to be _me_, but it should be _someone_ with expertise in accessibility.

## The Announcement

On July 5th, 2024, shadcn/ui Charts were announced on X.

<figure>
  <img aria-labelledby="announcement-caption" src="https://res.cloudinary.com/ashleemboyer/image/upload/article-images/announcement_tcyeih.png" />
  <figcaption aria-hidden id="announcement-caption">X post by shadcn on July 5, 2024, at 6:22 pm. Introducing Charts. A collection of chart components that you can copy and paste into your apps. Built on top of Recharts. Beautifully designed. Open Source.</figcaption>
</figure>

## The Marketing and Documentation

On the shadcn/ui home page, there's a new Charts navigation link and an "Introducing Charts" call-to-action in the main content area.

The first links to the [Charts Library page](https://ui.shadcn.com/charts). It contains a few dozen examples of area, bar, line, pie, radar, and radial charts. There is also a widget for changing the color scheme: default, palette, sapphire, ruby, emerald, daylight, and midnight. There are no mentions of the keywords accessibility, keyboard, or screen reader.

The second links to the main [`Chart` component documentation](https://ui.shadcn.com/docs/components/chart). It has an interactive demo and documents installation, grids, axes, tooltips, legends, theming, and other configurations.

At the very end of the page is an Accessibility section. Through one boolean prop ([a React term](https://react.dev/learn/passing-props-to-a-component)), it states the ability to add "keyboard access" and "screen reader support". It also provides a copy-paste-able short example code snippet.

<figure>
  <img aria-labelledby="accessibility-section-caption" src="https://res.cloudinary.com/ashleemboyer/image/upload/article-images/accessibility-section_jz430y.png" />
  <figcaption aria-hidden id="accessibility-section-caption"><code>Chart</code> documentation Accessibility section. You can turn on the <code>accessibilityLayer</code> to add an accessible layer to your chart. This prop adds keyboard access and screen reader support to your charts.</figcaption>
</figure>

## A Few Quick-ish Tests

### Test 1: "Your First Chart" Documentation Demo

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/iBeMgw7NCgE?si=xtTVM-fI2AzCPqHb" title="YouTube embed: 'Your First Chart' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

### Test 2: "Add a Grid" Documentation Demo

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XqO5hG75zF0?si=lEhTy9zE4CwNzKQD" title="YouTube embed: 'Add a Grid' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

### Test 3: "Add an Axis" Documentation Demo

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jVoZYGOVSLw?si=zOX9ep2b1h_jJa07" title="YouTube embed: 'Add an Axis' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

### Test 4: "Add Tooltip" Documentation Demo

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/oKF10Qb2ko0?si=YbS7JkUIIb15cwGo" title="YouTube embed: 'Add Tooltip' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

### Test 5: "Add Legend" Documentation Demo

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/wAnMFmaZgmY?si=h4etkm3y5Meiw3PA" title="YouTube embed: 'Add Legend' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

### Test 6: With and Without VoiceOver's "Quick Nav" mode

Video description coming soon.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Q8jP3jMaoUc?si=WzkINh1p_TeG-L57" title="YouTube embed: 'Quick Nav' test"  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />

## Some Accessibility Issues

1. **SC 1.1.1 Non-text Content (Level A):** The charts tested do not have a text alternative. The only information presented by a screen reader is axis text labels and (sometimes) the tooltip content is reachable.
1. **SC 1.3.1 Info and Relationships (Level A):** When a legend is configured, it has no directly coded relationship to the chart. Since it is placed in the DOM after the chart with `role="application"` there is no inferred relationship. Tooltips are also after the `role="application"` element, so their content cannot be presented by screen readers without moving through the rest of the chart content.
1. **SC 1.4.1 Use of Color (Level A):** Color is currently the only way someone can visually distinguish data in the charts. I have not found documentation for how to make these charts visually accessible with strategies like monochrome palettes, line styles, pattern fills, or extra labels. The tooltips can help, but only if they represent one piece of data at a time. In the videos above, each tooltip represents two bars.
1. **SC 1.4.13 Content on Hover or Focus (Level AA):** The tooltips can be dismissed with the <kbd>ESCAPE</kbd> key, but they are not hoverable or persistent. This prevents _many_ people from perceiving and understanding the tooltip content. They may also accidentally make the tooltip disappear with the slightest cursor movement.

## In Summary

In my quick-ish testing, I found multiple critical accessibility issues with the Chart component. The "keyboard access" claim in the documentation is mostly accurate. The "screen reader support" claim is false. No information is presented about the data by a screen reader when using the left or right arrow keys to navigate the charts.

The documentation also does not describe how keyboard or screen reader interactions _should_ work, which I find irresponsible considering the bold marketing claims this library is "Accessible."

With great popularity comes great responsibility. Web accessibility is becoming more enforced by law and expectations of UI libraries are rising. Most library consumers will take "Accessible" at face value when they trust the maintainers or referrals. Since charts are an "advanced" accessibility topic, many likely don't know how to verify the claim.

As a person who relies on a multitude of accessibility "features" (I don't like the term "accessibility feature" but I can't think of an alternative), it's discouraging to see a popular UI library miss key aspects. When the marketing says "Accessible" but neither the documentation nor the functionality backs it up, it diminishes my trust and the library's credibility.

If the documentation demonstrated effort in it, I would believe accessibility is a priority. But based on my test results, the library's popularity, and my lived experiences: I don't see enough evidence to feel that accessibility is treated as seriously as it needs to be. It feels performative. I'd love for that perspective to change.

## Related Resources

### From the Do No Harm Guide: Centering Accessibility in Data Visualization

- [Summary by Urban Institute](https://www.urban.org/research/publication/do-no-harm-guide-centering-accessibility-data-visualization)
- [Report as PDF](https://www.urban.org/sites/default/files/2022-12/Do%20No%20Harm%20Guide%20Centering%20Accessibility%20in%20Data%20Visualization.pdf)
- Chapter 5: Coding Accessible Data Visualisations (by [Léonie Watson](https://tink.uk/))
- Chapter 6: Creating Better Screen Reader Experiences (by [Sarah Fossheim](https://fossheim.io/))

### From the Web Content Accessibility Guidelines 2.2

- [SC 1.1.1 Non-text Content (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)
- [SC 1.3.1 Info and Relationships (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)
- [SC 1.4.1 Use of Color (Level A)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
- [SC 1.4.13 Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)
- [Understanding "Text Alternatives"](https://www.w3.org/WAI/WCAG22/Understanding/conformance#text-alternatives)

### By Léonie Watson

- [Accessible SVG line graphs](https://tink.uk/accessible-svg-line-graphs/)
- [Accessible SVG tables](https://tink.uk/accessible-svg-tables/)
- [Accessible SVG flowcharts](https://tink.uk/accessible-svg-flowcharts/)


My personal analysis after a few keyboard & screen reader tests.

Posts Related to the "sc-1-4-1" Tag