This video is available to students only


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.

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 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.

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, to alert it that this element is a chart. (This code can go at the bottom of the Draw canvas step).

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.

There are only two tabindex values that you should use:

  1. 0, which puts an element in the tab flow, in DOM order

  2. -1, which takes an element out of the tab flow.

When a user tabs to our chart, we want the screen reader to announce the basic layout so the user knows what they're "looking" at. To do this, we can add a <title> SVG component with a short description.


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.