Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: Accessibility
description: "This is a great lesson, and one that's hard to find good content on. We talk about the ways to make our charts accessible to screen readers, and walk through changing our histogram."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/ejo8xpqeg9
codeFolder: course/module_02/lesson_02.09/protected/code/03-making-a-bar-chart/end
---

# Accessibility

<CodeSandboxEmbed
  src="//codesandbox.io/s/y1ep6?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

The main goal of any data visualization is for it to be readable. This generally means that we want our elements to be easy to see, text is large enough to read, colors have enough contrast, etc. But what about users who access web pages through screen readers?

We can actually make our charts accessible at a basic level, without putting a lot of effort in. Let's update our histogram so that it's accessible with a screen reader.

If you want to test this out, download the [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) extension for chrome (or use any other screen reader application). If we test it out on our histogram, you'll notice that it doesn't give much information, other than reading all of the text in our chart. That's not an ideal experience.

The main standard for making websites accessible is from **WAI-ARIA**, the Accessible Rich Internet Applications Suite. WAI-ARIA roles, set using a `role` attribute, tell the screen reader what _type of content_ an element is.

A>We'll be updating our completed _single_ histogram in this section, without the extra credit code.

The first thing we can do is to give our `<svg>` element a `role` of [`figure`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role), to alert it that this element is a chart. (This code can go at the bottom of the **Draw canvas** step).

```javascript
wrapper.attr("role", "figure")
```

Next, we can make our chart _tabbable_, by adding a `tabindex` of `0`. This will make it so that a user can hit `tab` to highlight our chart.

A>There are only two `tabindex` values that you should use:
A>
A>1. `0`, which puts an element in the **tab** flow, in DOM order
A>2. `-1`, which takes an element out of the **tab** flow.

This is a great lesson, and one that's hard to find good content on. We talk about the ways to make our charts accessible to screen readers, and walk through changing our histogram.