 Invisible Visualization.Title.Heading.Left Brace Font Family.Bitter.Geord. Invisible Visualization.Invisible. Visualization.Creating Accessible Information Graphics. Doug Sheeper's W3 Degrees Celsius.At Shephazoo. Screen Reader Experience.This is how the web sounds. Imagine your entire experience of the web is to a screen reader. You're reading an article and you're very interested in the topic. Imagine you're reading an article and you're very interested in the topic. Then the author decides a picture is worth a thousand words, and they provide a useful chart or diagram. A chart showing the relative understandability of a chart by different audiences. The article then proceeds to draw conclusions based on the graphic. As you see, not all audiences are able to process information graphics with the same degree of success. But you don't see, because you couldn't see the graphic, and the author didn't describe it adequately to me. I'll text, hey, at least this author was thoughtful enough to provide. I'll text three dot many authors don't even do that. You see the problem. Now, show of hands, how many of you want me to do this whole presentation using a screen reader? You are bad people. SVG voicing test in line SVG. But I am going to do just a couple more slides with a screen reader, just to give you a sense of the experience. This is some SVG in line in HTML, even non-visible metadata. Text in SVG is readable with a screen reader. Even if it's on a text path, this is a circle. So, all that just sort of came out at you, right? The stuff in the little dotted line is all SVG. It read out the SVG, it read it on the text path. I had a title attribute. I had some metadata on that circle, and it read that out too. So that's not particularly interesting. Not anything for the ellipse there, because I didn't put any metadata there. This is actually a really critical piece of information. Why is it interesting that you can read text in SVG? It's an HTML format. Of course you can read it. Screen reader experience accessible SVG chart. This is why it's interesting. Hours working on this presentation. Saturday, 8 hours, Sunday, 6 hours, Monday, 4 hours, Tuesday, 12 hours, y-axis labels, 1, 2, 3, 4. Less than SVG, X, M, L, and X equals. Let's stop this thing. Http colon slash slash extensions tab. No. Enabled checkbox, not checked. Okay, so that was slow, right? People who hear is actually seen slash heard somebody using a screen reader for reals. That's awesome. If you've really experienced it the way they've experienced it, they speeded about two, three times what you and I could comprehend. It goes really fast. And they don't just sit there and wait for the sentence to finish or anything. They're skipping ahead. Especially when they're doing menus. Okay, yeah, yeah, yeah. Get very impatient with it. And I would too. So here is what I did to make that SVG chart accessible. I use text. Have you heard of text? Anybody here use text? Then with the fancy graphic, I made a path. I did all the stuff I would do. And I just gave it a title. I gave it a meaningful title. And suddenly, it's not a great experience. But at least they can get the basic information, right? At least they can pull out the basic information. Now here, I got down to the X and the Y axis labels. And they don't care about that. Well, they're just going to skip over that. But it's actually better if you can indicate to them some way that this bit is not important. And I'll say a little bit later how you could do that. So before I start talking about the obvious aspects of accessibility, I'm going to talk a little bit about how our brain works. Well, how my brain works. I don't know. I can't speak for you. So it turns out there's something called the picture superiority effect. And 75% of our sensory processing is actually visual. So tactile, hearing, taste, smell, all those things make up just 25% of our sensory processing. And that prejudices our brains towards processing information visually. So the picture superiority effect specifically says, well, one of the consequences of picture superiority effect, memory retention after three days, if you're watching a presentation, three days later, how much do you remember about that presentation? If they didn't use images in their presentation, about 6%. If they did, about 60%. This tells you how powerful data visualization is. So not only does it help with the memory, there are other benefits as well. This effect increases as you get older. And I'm not saying like, you know, elderly people, although them too. Little kids aren't actually as visually oriented as adults are. Adults get more information and keep more information longer as they get older. So as we all get older, accessibility is one of those things we should all be carrying about for ourselves. So there's another aspect of visual processing. Here's a little game. All right. Who here has played Small World? Yeah, a few of you, not very many. It's a board game. Me and my wife and my friend Jerry were playing a game. I'm giving you the information because I'm about to quiz you. Game lasted about 10 rounds. And the range of scores was from 3 to 13. Okay, so I'm going to count for three seconds to myself. I want you to tell me who won the game. Don't shout it out. Just keep track for yourself. Who won the game? I'm going to show you two different visualizations of the data. Okay. And for three seconds each. Okay. Who here is confident that he got that? Who won the game? Okay, now. Who's confident? Right? Same information. Right? Same information. I didn't give you the totals in either case, but because you visualized it, because you saw it, bam, immediately your comprehension of it was enhanced. Visualization is useful for people who have cognitive disabilities, who have difficulties in learning. Visualization is actually, it is itself an accessibility win. So hey, what happened? Oh, I see. So in this case, Jerry, I had a really strong lead at the very beginning. I had some 13-point rounds. And Jerry decided, okay, I'm going to go after him. So he started killing all my guys, right? And then my wife, who's very quiet, secretly just scored consistently good scores, right? And she won, of course. But the fact is Jerry made his information based on faulty information. So it's important that you not only have the information at hand and can apprehend the information at hand, it's also important that the information that you present is correct. And so that's another aspect of data visualization. Make sure that when you are presenting the data, you're actually presenting the right data. And that's not, it sounds trivial, but it's actually not trivial. And then there's another aspect of how visualization is useful to people and how it's helpful to us. I know I said talk about accessibility. I'll get to that. This is all accessibility. So there are actually four different learning modes. You've got your visual learning mode, auditory, tactile, and reading and writing. And when you combine any two of those, the multiplier effect on how effective you are at learning and retaining that information is actually profound. So by having a data visualization, you are engaging at least two of those modes, usually reading and writing and visual. And so this is a real way to get across to an audience what you're looking for, what you're trying to do. And there's another aspect of it, which is an emotional connection. If you can make an emotional connection with somebody, and combined with any of these other modes, it actually becomes much more powerful. So this is why it's important not only to use data visualization, but to make your data visualizations beautiful. You wouldn't think that beauty is an accessibility requirement, but actually in this case it is. A lot of people see accessible websites and they think, oh, that's hideous. I would never do something like that. Accessibility doesn't have to be ugly. And in fact, it's better if it's not. We actually have a predisposition to trust things that we find attractive. So your website, your data visualization, anything, if people find it attractive, it will actually work better for them, and they will trust it more. So here's another little interesting aspect of when you're presenting information, the visual bias. When you just look at that pie chart, it looks as if yellow is actually about as good as red. And it looks, in fact, in some cases, depending on your impressions, it may even be bigger than red. But it's clearly not, right? Same data as a bar chart. This is because bright colors make a stronger impression. And so when you're considering how you're visualizing things, don't just think of the aesthetic aspects of it, but think of the impression that you're making. I'll get a little bit more into colors later. This also shows that pie charts suck. We have a visual vocabulary. We didn't start with this information, right? Nobody started understanding bar charts immediately. Little kids, they don't understand a bar chart. We learned how to process this information, especially things like more complex things like gantt charts or flow charts or pie charts, really. No, I'm kidding. But this is a vocabulary that when you learn how to express yourselves, and one of the earlier people talked about the types of visualizations, when you learn how to express yourself, you can be really effective. And just like you learned language or reading or writing, just like you learned math, you can do things in an elegant way or you can do things in a prosaic or ugly way. And if you do things in an elegant way, you're going to reach people with a cognitive bias or with a cognitive impairment much more easily. So think of your data visualizations as poetry and not as a novel, right? Put just what you need in the data visualization. Make your point effectively, and you will reach a much broader audience. This also applies to people who have visual disabilities, of course, because the simpler a chart is, the more easily they're going to be able to extract information from it. So let's talk a little bit about the visual aspect. So this is the experience that many people, not blind people, but people with low visual acuity, this is the experience they have. So let's just doot, doot, doot, doot. And again, somebody earlier showed, I was too busy making my presentation to pay much attention to everybody else, but he pointed out, and I forget your name, I apologize. He pointed out that this doesn't really mean much out of context and yet this is the way many people, they use screen magnifiers and so they have to see little bits of the screen so I don't know what value these are, I barely know what relationship they are to one another. I can go down here and I can sort of see, but then I lose the context and so keep in mind that recontextualizing things is really important for people. So how you might do this, if I didn't run out of time I was going to show in this demo how I could give the values there at the bottom of the magnifier. So when somebody has zoomed in, maybe you've got plenty of space now, go ahead and give the values for that dot, for example. And also when you're doing things like a scatterplot or any kind of thing like this, keep in mind that people are colorblind and that's 10% of males in the US, I think something like 4% of women. So don't just make the distinction one of color, but also consider the shape of the symbol or the pattern that you're using because those things will give sighted users and people without visual impairments will give them more of a cue on what's going on, what data is in that information. So a little bit about colors. Who here has used the Brewer palette? Okay, I didn't figure out how to talk much about it. The Brewer palette was created by Cynthia Brewer. She created it for mapping, actually, but it's been used for data visualization. It's actually a really good set of hand-picked colors. You've got your qualitative ones and the qualitative palette is things that are not related to one another. You've got your quality... Oh, that's supposed to say something else, but it says qualitative, and then you have your diverging. The second one is sequential, actually. So you see them in a sequence and if you have two things, if you have the first and the third and the fourth color here, people are going to think that those two things are related, especially if they're contrasted with purple. So live up to their expectations. When you're presenting information, use the appropriate color palette and you can read up on Brewer palettes and how best to use them in data visualization. So here, I've taken Australia. I've applied the Brewer palette and there's another thing... Let's see if I can get this to go. Yes. So you should make all your visuals. I told you to make everything attractive. This is what I mean when I say attractive. So this is overkill, but there's a reason why you might want to have extreme patterns on some things and I'll show you in just a moment. Using subtle patterns can actually make things much more distinguishable, especially when it comes to the tactile world. So this is a tactile map and I actually have an example right here. Catch me at the break and you can actually come up and feel that. This is a tactile map and this map, is anybody... Be careful with that. It's on something called swell paper. They print out this map. The colors, they use media queries for at print. When they print it, the colors turn into patterns. They define a set of patterns and they take this map. They put it on top of a touch... So they print it out. On the map, all the blacks rise up higher. The thicker it is, the higher it rises. They put it over a touch screen. As they're moving their hand over the touch screen, like if they mouse over the... Or as they hand mouse, as they hand over the water, they'll hear a sound, they'll hear water, or they might hear the name of the water. As they mouse over one of those roads, it will actually say the name of the road. And when you're printing, you can always print with a Braille font. And that basically makes these... It takes no extra effort to just print with a Braille font. Go ahead. Yeah, it doesn't work for everybody, honestly. In fact, you say people are... It's actually... It is a myth that the daredevil... The daredevil effect, where all of somebody's senses are increased when they lose their sight. In fact, it's not usually the case. They often get different compensatory factors. Sometimes it's spatial. Some people can do echolocation. They click and walk, and they can kind of hear where things are around them. But it's really rare. In fact, I actually have a blind friend who has neuropathy. He can't read Braille anything. Neuropathy is a deadening of the nerves. He can't read Braille. He has difficulty with haptic tasks. So there's no guarantee, but this can help with some cases. And those people will have the equipment and the printing. That swell paper costs about a dollar a sheet, and then you have to have the other stuff that goes with it. So it's not a guaranteed solution, but if you're talking about a specific audience, it's a possible solution. So I'm also going to talk a little bit about interactivity. We've already heard a lot about interactivity already. And the navigational challenges... The navigational challenges for mobile... And by the way, when I showed you that magnifier, effectively you can think of people using magnifiers, the same people who are using a mobile device. So many people have a mobility impairment. They can't move very well. Their hands might shake. So they can't click a button either responsively or they can't do a lot of tasks. Some people have a two-way switch. Basically the only way they interact with the world is they have this little straw. They put it in their mouth and they blow or suck. And that is how they navigate around a page or around a visualization in this case. People might have a visual impairment. We've already talked a little bit about those. There might be a... Most many people only use a keyboard. I mostly use a keyboard. Probably if you're a programmer, a lot of you mostly use a keyboard as well. Adding keyboard navigation to your visualizations is actually useful for everyone, of course. And the easiest way to do this, especially if you're doing something that's element-based, like SVG or HTML, or as you'll see in a moment, canvas, is to use tab index. If you use tab index, it lets people get from one element to another much more easily. So, specifically, canvas and the shadow DOM. Who here has used the shadow DOM? Knows what it is? Couple people. Shadow DOM is this idea that beneath the DOM, in the land of Mordor where the shadows lie, there is the shadow DOM. And the shadow DOM is a piece of the document that's hidden away from the normal DOM, but which is accessible through APIs. And SVG uses this concept in its use element, which is kind of a clone of another element. You copy it and then you have a visual representation and then you have the shadow DOM. So then you can go back to the original element and get all the things that are inside of it. There's something called the component model. And the component model is probably going to transform the web if we get it right. And the shadow DOM is a key component of that. So basically you would make your own HTML element or SVG element or whatever element. You make your own. You'd create a script that attaches that thing to particular behaviors. And so then you can extend the set of HTML elements. So you can make your own UI control. You can make your own whatever. And it's treated as sort of a native component. And then if those become popular, we may even standardize those particular elements. So in this case, we've got a shadow DOM for Canvas. And so this is just a Canvas drawing. Actually, this is not a very good visualization per se, but it's a UI control. And so I click on it. Oh, I have to draw my screen here. Yay! I know you all liked that. Boop, boop, boop. Canvas and audio interactivity tab. Fan speed, low. Radio button checked, two of four. Radio button group. Fan speed, medium. Radio button checked, three of four. Radio button group. Fan speed, high. Radio button checked, four of four. So there's actually a bunch of divs underneath that. Yeah, I know. Program with divs is bad, but I didn't write this demo originally. I would have used list items. But there's a bunch of items, individual items. They're just text. And you attach ARIA attributes to them, and you basically control the interactivity. So you shadow, you mirror the logical representation of it, of what you're drawing. You mirror that in this shadow DOM, and people with accessibility APIs can get at it. No, no, no, no. Extensions tab. No. Enabled checkbox, not checked. Oh, that's my favorite sound. So who here knows about ARIA or has used ARIA? A few of you, good. So pop quiz, what is the difference between these two buttons? Well, this one is not a button, because it's not using ARIA, it's just visual. However, if you add the attribute role equals button, actually it should say blue, not green. I changed the slide so that I could take advantage of the lack of red, green color blindness. If you add role equals button, accessibility APIs. Accessibility API is the OS level functionality that somebody uses to do screen readers or to do all these accessibility navigational things. So if you add role equals button to your button, let's say you've made the button out of a div, or you've made it out of a paragraph, or whatever you've done. If you add role equals button, as far as accessibility is concerned, as far as accessibility API is concerned, that thing is a button. It acts just like a button. You change it to ARIA pressed equals false, or it's ARIA pressed equals false is the default. Once you click on it, you change that attribute, ARIA pressed to true, and with some CSS styling, you can even style based on attribute selectors. And suddenly the accessibility API knows that thing has been pressed, and you've got a real button. This is interesting for a reason I'll get to in a moment. There's also something called ARIA live, and it's an attribute. You put it on an area that's going to be updated frequently, a chat window, or a Twitter feed, whatever, something that gets updated. If you say ARIA live equals polite, it won't interrupt them when they're reading some of their text, but at the next opportunity it will say, hey, this thing has been updated, and it will read them the new text. And just adding a little bit of code, decorating your code with some ARIA attributes actually lets people know about these things. The reason you would want to add ARIA live is because they may be doing some other task on the page, and they may not know that this section has been... You don't want them to have to reread the entire page. They wouldn't understand it. ARIA live updates it, and it lets them know that you've got an update. And with the data visualization alive feed, you can see why this would be useful. So also, again, make everything a tab-focussable. So what's coming up in the future? That's sort of where we are with accessibility in the... You know what? This is... There's something... Oh, you know what? For some reason, I'm missing one of my slides. What happened? Oh, I'm going to have to go because that was actually my favorite one. Just a second. Ooh, how did that happen? It begins to dawn on me. So this is a... When we look at this chart, when you look at this chart, first off, who can tell me what this is? If I'd added a label, it would have made it a lot easier. Always add labels to your charts. But even still, you know what it is. And you knew that instantly, right? You looked at the trend, you looked at the dates, you said, bam, I know what this is. A blind person can't do that, right? They can't just understand the trend. Even if you read them out the numbers, it would be very difficult for them to process, oh, this thing is trending down. But I'm going to make sure that this is not... You thought the screen reader was annoying. Wait till you see this demo. Oh, okay, there we are. Yeah? Oh, thank you. I told you it was my favorite. I wrote that this weekend. This is something called sonification. And it basically lets them get at a glance, as it were, the trend of the thing. Now a good sonification app actually would let them, for example, stop on a particular point and get the data at that point, get the other information. It would set the bounds of the thing. It would let them know when they had hit an increment. And that actually would be good use of ARIA Live. I could just say, ARIA Live over here, you've hit a new bound. You've hit a new bound. You've hit a new bits. It's Q1 2009. So you've got this audio-lization, sonification, and with this thing, there could be different data types. There could be different chart types. You could have it ping for it. You could have it read out bar charts, various things. In this particular instance, I mean, it's SVG, of course. And it's just an SVG polyline. I've got an intersection library, which was written by a friend of mine, Kevin Lindsey. And as this line goes across, it finds the point on the path. As this cursor goes across it, it finds the point on the path, and it sends it to the Web Audio API. Has anybody here used the Web Audio API? Wow, that's awesome. What are you using Web Audio API for? James. Frequency analysis. Okay, cool. So the Web Audio API is one of the groups. Actually, not just in the SVG working group. I'm in the Web Audio working group. I'm not a great audio person myself. I'm mostly a facilitator or coordinator. But this is available in WebKit. Firefox has started implementing it. We've got interest from Microsoft in implementing it as well. Opera, well, okay. Opera is going to do whatever Chrome does. So, which is actually, in this instance, nice. Google is the most advanced. There's a brilliant engineer working on the Web Audio API. It's going to enable all sorts of audio things like games and also like frequency analysis. You don't just have to use it for playing audio. You can generate audio, but like somebody said, you can do frequency analysis, pull that audio out, and do data based on that frequency analysis. If you've got an app, I'd love to see it. So, with sonification, you actually make a... You give them the chance, you give blind people the chance to get that same at-a-glance characteristic that we want. So, a much overlooked aspect of data visualization is the olfactory sense. You can have scratch and sniff inks. Now, these are only screen printed inks, but you can make scratch and sniff... Okay, it's true, there are scratch and sniff inks. I swear to you, but this is not a serious accessibility issue. I don't know how the slides got skipped. So, I did research on scratch and sniff inks for you. I hope you appreciate it. So, I talked a little bit already about ARIA and what it can do, and I talked a little bit about the different... the vocabulary of data charts. And one of the things we're going to do in SVG2 is we're going to standardize on the vocabulary around ARIA. So, you'll be able to say things like, this is an axis, and they can choose whether they want to read out the axis or not, or they can get the two ranges of the axis, for example. You can say this is a bar chart. You can say this is a pie chart. You can explain... You can just pepper an attribute, describing key elements of your data visualization, and the screen reader will be able to get them, not just in a big chunk, but they'll actually pick them out and actually go between different kinds of information. For example, if you have a bar chart where one bar is highlighted, and that's the reference bar. You see these all the time. It says U.S. compared to other countries with X or Y factor. And the U.S. bar is sort of the central bar. They would be able to know, okay, the central comparison bar here is this one, and they would be able to compare that bar with the other bars in the same way that we do visually. So, we want to sort of categorize these things, and we're not going to be able to boil the ocean, right? We just want to hit the big ones to make it easier for certain visualizations to take place. And then the last thing I'm going to talk about with SVG is connectors, and I have really hurt myself here because I opened up the wrong Chrome window. There we are. Interactivity. Navigation challenge. Canvas in the DOM. There we are. Why did I skip over that stuff? That was the good stuff. Let's see. Right. So, oh, well, the text got cut off, but this is the K33 graph. Many of you may be familiar with this one. It's maddening because you want to untie the knot, and you can't. You can't do it. It kills me every time. But those are connectors, right? This is a graph. A graph technically, a graph some people use, or we all use it to mean a bar chart or whatever. But technically, a mathematical graph is a node and an edge, and it could be directed. So in this case, the ones with the arrows are obviously directed. So you've got the nodes, you've got the dots, and you've got the edges, which are the lines, the connectors. So this is a little script library I wrote, which, by the way, crashes Chrome, so I can only show you a couple of the demos. It's Chrome's fault, not mine. I swear. So there's also another aspect of... If you've done things like circuit design or the audio API, for example, there are different ports so different things can connect to different other things. This connector here, it can only leave from this connector, and this connector should only connect to one of these three, although it doesn't actually connect it. So I've defined connection points for this shape, and it will only... It doesn't just draw to the edge of the shape. It actually goes to the specific point, and there's actually a semantic aspect to that. Of course, I can move all these things around. I can also define points that the connector itself has to go through. So the idea of SVG, of adding these as a primitive in SVG, giving you the automatic visual approximation of the line, as well as a semantic one, is to get people to make their data charts, their flow charts, anything that's like a graph, more accessible, but also easier for them to do. So... Let's see. So graphs... There's all sorts of things, family trees, networks, social networks, schematics, org charts. All of these things are graphs. In fact, there are things like subway tubes, subway maps. Those are also graphs. The schematics... The architectural schematics for a house. Blueprints, that's it. The different points, the waypoints, the hallways, et cetera, those are graphs. Roads are graphs. Anything that can be connecting up one point to another is a different way of connecting. Not only... Let's see. So they wouldn't just be visual. They would also be semantic. So right now, if I drew in SVG or Canvas or whatever, if I drew a circle and I connected it to something else with a line, you and I would know that those things are connected, but a blind person wouldn't. So... And there's actually no semantic characteristic there. So by adding connectors to SVG, we can actually let you connect together two places. And so if I were on, for example, if I were back on this slide, and... Well, this is a bad example because there's only one connection from each point, but if I were on a particular node... Oh, graphs. If I were on graphs, it would list out to me what my navigation options are. I could add a title to each of these lines. And one would say networks. I would say org charts. I would say flow charts. So I could say, oh, I want to go from graphs. I want to go to org charts. And it would, by tabbing, or by doing a navigation to the second one of the options, that's the one I would select. So it would actually walk me through the graph. And so you can imagine all the things you can do with data visualization and connectors. So what we would do is we would let you style the appearance of the line or even draw your own line with the basic logic that you've given underneath. And we would, as the thing moves, we would give you the straight line that connects those two points. What we would not do is we wouldn't position the nodes automatically for you. There's any number of layout mechanisms you would want to have. We wouldn't avoid intersection with the lines. You'd have to do that yourself for version one. And what we're considering adding automatic drag and drop to SVG so that you don't have to think about this. HTML added drag and drop, but it's really terrible. I don't know if you've used it. It's a terrible interface. So why would you do connectors? This was one of the, when SVG was first created, this was one of the primary things that a set of people wanted to do. This was one of the original inputs. They never got around to doing it. There is no standard for graphs. There are ways to denote graphs, but there's no way to say how a graph actually looks and is represented. And of course, as I said, it aids accessibility, and there's just a lot of common use cases for it. So if connectors is something interesting to you, Inkscape, by the way, which is a graphical authoring tool, it's like Illustrator, a free version, free as in puppy. They're actually implementing this as the first draft. I'm actually the editor of the spec, so I have a particular interest in this specification. If you're interested in connectors, come and talk to me. If you're interested in standards in general, if you're interested in the Web Audio API, if you're interested in giving feedback on SVG or Canvas or HTML, W3C really wants to hear from you, and one of the ways that we want to reach out to you is with Web Platform.org, which, if you haven't heard of it, it's a website for... You don't want to read specs, but you do want to look up documentation. And so basically, it's there to document the Web, and it's a wiki, so any of you can also contribute. And if you're interested, come talk to me about any of these specifications. We also want to reach out to people through Web Platform.org to help them get their feedback into W3C in a more efficient way for them. But if you're interested, you can come talk to me. And also, I have stickers. I realize that's probably why all of you are going to... So the Web is really taking over a quarter of the people in the world use the Web, 1.6 billion people that's growing all the time. W3C's community, we've got 32,000 mailing list subscribers. We've got 1,500 working group participants actively working as members of working groups. This is actually old. We have nearly 350 members now, and 65 of us try to make sense of that. About a half of us are technical staff. So we are definitely interested in... I mean, you guys outnumber us a little bit, and you've probably got more hands-on experience with the technologies that we are defining. The Web is actually your thing. You guys are the ones who have to build with it. We want to minimize the pain that you have, please feel free to give us feedback, and I want to thank you for your attention.