Accessibility

[00:00 - 01:52] Alright, so I'm really excited about this video. We're going to talk about accessibility. So usually when you're talking about accessibility with web browsers or charts you're talking about is the font size big enough for me to read it or is the contrast strong enough that I can read the text or see all of the data elements. Those are all very important but stay I want to talk about something that I think is covered less frequently which is screen readers. So there's a lot of people who browse the web using a screen reader and basically the screen reader just reads out the content allowed to the user and I think as well developers it's really important for us to take responsibility and level the playing field as much as possible so that people using screen readers can still get information out of our charts. So what I'm using is called Chrome Fox and it's a Chrome extension. If you're using Chrome it's free I recommend it or if you're not using Chrome you can either Google your operating system plus screen reader if you want a software or your web browser plus screen reader if you want a browser extension and for it to only work within your browser. They all work a little bit differently but there are some standards that make them pretty similar. There's the standard that's used on the web for accessibility it's called YAria so all the screen readers are going to be able to read something if we put it in that format. Yeah let's go ahead turn it on and see what happens when we focus our chart right now.

[01:53 - 03:00] >> Autocompletion, 1,3,10,16,27,30,6,40,50,1,30,7,40,3,40,2,32,20,25,Me, Chrome Fox is now inactive. Okay so as you can see it just went in our SVG element and started reading all the text that we have in there. Now this is more accessible than say a raster image which wouldn't give any information at all unless you had an alt tag but it's still not very meaningful it's kind of just reading numbers without any information about the context. So the first thing we can do is assign a role to our chart so for our wrapper we're going to add a role attribute. And let's tell the screen reader that this has a role of figure. And what role is doing is it's telling the screen reader what type of content this is.

[03:01 - 07:45] Alright so the other thing we want to do here is make sure the screen reader knows that this is an element that's tabble too so in order to do that we'll add an attribute for tab index and set that to zero. Now with tab index you can really set any number that you want and this is going to when you're tabbing between elements in a web page it'll determine in what order they are tabs too so items with a lower number will be tabbed to before items with a higher number. Generally you want to stick with either zero if it's tabble or negative one if you don't want it to be tabble so for whatever reason if you don't want a button to be able to be tabbed to and you generally want to stick with zero or negative one otherwise it gets a little bit hacky if you're setting each tab index individually. So now we can see we can tab to our chart tell by this black outline in chrome that it's focused and the second thing we can do is we can add an SVG element called title. Now this isn't in our SVG elements cheat sheet because it's not going to render anything and it's just there for accessibility purposes to tell users whether it's the title of our chart a little bit of information about it so we can append a new title element and inside of that let's just add a little bit of information about our chart so this is a histogram looking at the distribution of humidity and we're looking at the year 2019 alright so histogram looking at the distribution of humidity over 2019. Alright so let's see what happens when we turn our screen reader on again. Okay so this is a good start we have it announcing kind of a overview of what the chart is so the person using the screen reader can decide if they want to explore it a little bit more or if they don't . Alright so the next thing we want to do is let's go down to our bins group so this is all of our elements and what we want to do here is first of all make it tabble and give it a roll of list so that the screen reader knows that this is a list of items and then also add a label so they know what the list is of and let's just add this roll it's a list and we also want it to be tabble to tab index index and let's set that to zero so that you can tab to it. So now you can see we can tab from our chart in general to the list and items with the roll of the list will have some special special features for this screen reader so they'll read out the label so let's say this is the list of histogram bars and then the user will also have an option to skip the list or to read out the individual list items so let's see what this sounds like. Histogram looking at the distribution of humidity over 2019 histogram bars mean 0.30 histogram bars list with zero items. Alright so that was the special functionality.

[07:46 - 09:55] For list it'll say this is a list and this is how many items it has and you might have noticed that it has zero items right now that's because we haven't added any items so let's go ahead and for each of our bin groups let's make sure they're tabble too so let's just grab this tab index here so now you should be able to tab through each one of these bars. Let's assign a roll so instead of list this is going to be list item and then we'll also want a label for each of these list items and we want to give the user some information about the bar that they are focused on so because this is a D3 attribute we can grab the data point and let's say something about there were let's read the count so that is also Y accessor of that item so this is the same thing we're doing for these labels where we're grabbing that Y value and so there are this many days between and let's also tell them the bottom the lowest humidity and the highest humidity within that bar so that's going to be D dot X zero and then we also want the top of that bound so D dot X one let's just say humidity levels so let's see what this sounds like when it taps through each of these list items.

[09:56 - 10:15] It's not right it's not grab bars list with 14 items all right so 14 items now so let's >> There were one days between 0.3 and 0.35 humidity levels. There were three days between 0.35 and 0.4 humidity levels.

[10:16 - 10:23] There were ten days between 0.4 and 0.45 humidity levels. There were sixteen days between 0.45 and 0.5 humidity levels.

[10:24 - 10:28] >> Okay. Great. So we can tab through them quickly as well.

[10:29 - 10:47] >> There were five days between 0.95 and 1 humidity levels. Filter. Histogram looking at the distribution of humidity over 2019 histogram bars mean 0.30 0.350.40.45.

[10:48 - 10:49] Chrome box is now inactive. >> Okay.

[10:50 - 10:54] So we learned two things there. One is that this label is great.

[10:55 - 11:11] It's reading out the count for each bar and then the bottom of the top humidity level for that bar. And it also lets the user tab through them quickly if they're trying to get to a specific humidity level.

[11:12 - 11:46] The other thing we learned is that when the entire SVG is selected, it's still reading out all of the text in there, other than the ones in our list, which includes mean and our x-axis labels. So the way we make sure that it's not going to read out, say this mean label, is we can go ahead and set it to have a role of presentation, which it's just a presentation element.

[11:47 - 12:15] And then, so let's set that, a role of presentation, and also there's another attribute to make sure our screen reader is not reading it, which is ARIA hidden is true. So while this mean label is nice to have visually with a screen reader, it might just be too distracting and also just out of context for it to read that.

[12:16 - 12:27] So let's also grab these and put them on our x-axis as well. See if this works.

[12:28 - 12:33] And also that label. Alright, let's see what this sounds like.

[12:34 - 12:44] "Hissedock Ram Looking at the Distribution of Humidity over 2019 Histogram Bars . Chrome Box is now inactive."

[12:45 - 12:59] Alright, great. While this isn't perfect, this is hopefully a good foundation for you to make your charts at least basically accessible to a screen reader.

[13:00 - 13:28] So that right now they can learn about the chart in general and then they can tab through each of the individual bars, say there were a specific data point that they were interested in. [ Silence ]