 the back people in the front I hope you all can hear me, ok great. So accessible data visualization as the name suggests you all must have figured out, I will be talking about accessibility and data visualization. In case someone not very familiar with what exactly I mean by data visualization or what exactly is accessibility I will be covering them in a couple of slides, so we are all on the same page. So coming to data visualization, data visualization is any instance where data has been represented graphically to derive better insights. So what this means is if we had a data set like this which has certain products and certain regions and the sale of the products across those regions. Now if I gave you this data set and I asked you questions like which product did best in the northern region, which one did best in the southern region or in which region did product A do best and which region did product C do worst, you would have to go through all these numbers, mentally process them, memorize them, maybe go back and forth among the rows, columns, make comparisons and then arrive at these answers. And if I increase the size of this data set vertically or horizontally which means more products, more regions, you would take far longer to come out with answers and you would also make more mistakes, you are more likely to go wrong. However, if I represented the same data graphically, you would almost instantly have answers to whatever questions we ask, whether it was about a specific product or a specific region or products across the regions, whatever it is. And in fact, one more thing is in the case of the table you had to memorize or you know go back to the numbers, but in the case of a data visualization you do not even have to look at the numbers to come out with answers. You might not even know the exact value, but you know which ones are doing well, which ones are not doing well and what products they need to focus on. So all of this is possible because of data visualization and what it does is it allows us to process data not only cognitively but also visually. So a big chunk of the processing that we would do in our minds using our brain during using cognitive load would actually be done visually just by seeing and we could see the trends etc. Now data visualization sounds great because it lets us process so much data so easily but comes with a problem which is this. So just as the name suggests data visualization is a very visual element. It depends a lot on graphics and visuals to fulfill its basic utility. And because of this nature it inherently excludes any user who would have trouble with sight. So basically users who are blind and because of this any user whose blind would not be able to access a data visualization they would not be able to use a data visualization and the quick way that a normal sighted user would be able to come out with answers for a user without sight it would be very difficult to process all of that data. So this is why it's important to design specifically for blindness. Now before I go into blindness I'd cover a point about accessibility. Accessibility is actually a broad term. It focuses on multiple kinds of disabilities and also not specifically to digital but also any kind of product. So I think Andy already covered it. Accessibility is basically designing products in such a way that even users with a disability would not have any issues or discomfort or difficulty in using those applications. But I'll be focusing on blindness because this is a demographic that is most impacted in the case of data visualization given its visual. So let's see the traditional ways that a blind user would use access content from an application. The two common approaches are using refreshable Braille keyboards and screen readers. So refreshable Braille keyboards are basically, so Braille is a method of writing content for users who are blind. So it has certain dots that come out from a surface and the patterns actually allow the user to move their finger through it and read the content. So Braille displays basically convert whatever content is on the screen into Braille and the user can still access the content which would be on the screen. And the buttons that you see down, those buttons let them move to the next line, the next paragraph, et cetera, so on and so forth. The more common approach is to use screen readers. Screen readers are commonly used because they are very easily accessible. In fact, they are so accessible you actually already have them in your devices. If you have an Apple device, you have voiceover. If you have an Android device, you have talk back. Someone with a Windows machine would have narrator. And then there are third-party tools like NVDA and JAWS, et cetera. So as the name suggests, these applications, they read out whatever content is on the screen and users would listen to that content. And they don't only read. They don't only read, they also come with some additional interactions. So for example, if a sighted user were reading an article, they would not read each and every word and comma and full stop, et cetera. They would skim through the article and wherever they feel this particular area seems like something interesting which I'm not familiar with, they would slow down and pay more attention to it. But in the case of listening to an entire article or a blog post, you cannot really skim through it. So over there, to make it easier, these screen readers come with certain shortcuts, like pressing the H key lets you jump from one header to the other header. So at least to some extent, you can decide what areas I would want to focus on, what areas I would not focus on. There are many more examples because of shortage of time I won't be covering. But you can jump between links and list items, et cetera, and make it more easier. These features are further enhanced on the web using RAI attributes and JavaScript. So RAI attributes are attributes you add to your HTML to make your webpage more screen reader-friendly. It would structure the content better. And JavaScript helps to create dynamic content. So going back to our example of the data visualization, a common approach is to provide the data below the chart. And when a screen reader is reading this page, when it comes to the chart, it would not be able to read the chart because it is a graphic. But it would offer a sentence like, data table with the chart data is available below and you can access the data. And they can choose to either have that data being read out or they can proceed with the rest of the content. So in this example, what's really happening is that we are taking the chart and we're actually taking a step back. So the actual use case of a chart is to convert data into a chart so it is easy to use. We were actually going one step back, which is we're converting it back into a table. And I'll just play the audio clip of how a table sounds when it is played by a screen reader. So as you could see, it was reading each row and each column sequentially. So what's actually happened is we've converted the table into a list and the screen reader is actually reading the list. You could imagine if a user is listening to this particular audio clip, you know, like North column 1, North, East column 3, East, et cetera. And then you ask the user on, you know, which product is doing best, which one is doing worst. It would be even more difficult and almost impossible for them to actually arrive at answers rather quickly. So what does this mean? This means that using screen readers and the traditional approach of accessibility, we can make data accessible. The user will know that, okay, product 3 sold 30,000 units in the northern region. But it won't make the insights accessible. Is it a good thing? Is it a bad thing that, you know, these many products have been sold? Should I focus on it? Not focus on it? What should I pay attention to? Those answers would not come about just because you have this data. And that is the main problem with data visualization. And this is becoming a very more common problem now because we have a lot of data available to us now in all walks of life, not just business, but also as consumers. Like many of you all would have health apps on your phones, which would have, you know, trends of how well you all have been performing your daily steps that have been worked, calories that are burned, et cetera. And all of this data is actually shown in the form of a chart. Similarly, if you're investing in a mutual fund or in a stock, if you're trying to compare prices of flights online, data visualization is usually almost all of those cases. And it'll only become more common. And the more common data visualization become, the more frequently certain users would be excluded. So this is the problem we discovered here at TCS. And I come from a team named the PXCOE, which is Product Experience Center of Excellence. And it's a hybrid team that focuses on research as well as delivery. So when I focus on both hands-on design as well as research, but I'm inclined more on research and in the area of data visualization. So one of the areas within data visualization has been accessibility, where we've tried and tested different methods of, you know, making not just the data, but the insights accessible as well. There's still a lot more research to do, there's still a long way to go. But there'll be some certain patterns or guidelines or principles that I could share right now, which will help us at least think in the right direction whenever we try to make a chart or a graph or any data visualization accessible. So the first one is sonification. Sonification is the audio version of visualization. So when we make a data visualization, what we are really doing is we are taking data. There are certain values, like in the case of the product sales, we have 30,000 products, 20,000 products, et cetera. And we represent that using a graphic property. So graphic property is a height, length, breadth, expositions, y position, hue, saturation, luminance, et cetera. Similarly, sound also has certain patterns, like pitch, volume, panning, the duration of a peat, et cetera. So using these parameters sometimes, if the use case is favorable, we can actually help access the data or represent the data using sound. So I'll share a simplified example, which is of a scatter chart. So how many of you all know what a scatter chart is and how, what exactly it is used for? Okay, very few I think just one. So scatter charts, the most primary and common usage to find correlation, which means how does one parameter affect the other parameter? So here we've got certain plants, we've got heat input, and we've got CO2 emissions. The scatter charts are seen, I used to see if I increase heat input, does it increase the CO2 emissions or does it decrease the CO2 emissions? So if it decreases, if one decreases on the increase of the other, it's called a negative correlation. If both increase and decrease together, it's called a positive correlation. So when you have a chart like this, which goes from the bottom left to the upper right, it's considered a positive correlation because both are increasing simultaneously. And if you have it from the top left to the bottom right, it is considered a negative correlation. If the chart goes haywire, it means there is no correlation and the data points don't really affect each other. The other use cases to find outliers. So as you can see in this trend, the more I increase the heat input, the more I have CO2 emissions. But there is one particular dot at the start where the heat input is low, but the CO2 emissions are still high. So scatter charts help us isolate such cases. Now for a user with visual impairment to access this data, they would have to listen to the x and y values of each and every data point, which would be very, very cumbersome and they would not even be able to figure out on which point is an outlier. However, the same data can be represented using sound. So what we've done is we've played the sound in the sequence of the x-axis. So the lower the heat input, the earlier it is played, the higher the heat input, the later it is played. And the pitch of the sound, whether it's a lower note or a high note, it depends on the y-axis. So I'll just play the clip. So as you could see, the pitch slowly went high and kept going high. So if you hear a tone like this going high, it would mean a positive correlation. If you heard a tone going low, it would mean a negative correlation. If it sounded like just noise, the data actually would be just noise, there would be no correlation. Another thing I'd like to point out to you is, there's a certain point that I wanted to pay a little attention to. If you could see it was, there are low notes and then there's suddenly a high note and again it goes to low notes. So the sudden high note is an outlier. So when you give this to a user with blindness and you let them control the playback speed, the direction, actually move from note to note, they would be able to point out such outliers and this will be much more quickly and easily as compared to listening to the entire data set. So the other guideline would be leverage technology to do the heavy lifting. So in some cases and some use cases, technology can actually do some of the processing for us instead. So this is a GAN chart. A GAN chart is basically a method of showing a project plan. Here we have the plan versus actual progress of a plan in the month of January. The green bars represent the start and the end dates that are planned and the blue ones are the actuals. So wherever the blue one has exceeded the green one, there has been a lapse. It has crossed the actual plan. And the main use case of a GAN chart is as of today, how is my project going? Am I on time as planned? Am I behind time? Am I ahead of time? If I'm behind time, what exact tasks are delayed and what corrective measures can I take? So again over a year instead of having to listen from a table, start, plan, start, end, et cetera, et cetera, we can use code and technology to actually handpick the most important aspects. So what we can do is we can take the current date whenever this chart has been opened. And the current date can then take all the planned end dates. And any planned end date that is before today and the status is not complete, it would directly list just those tasks up front. And this can be placed as a content below the chart. So when a screen reader is reading content from that page, it would say that there is a chart over here which shows the project plan and the data of January. And then it will read out this content. It will say that three tasks are delayed as on 24th of January. And then it will give you the details of those charts and let you access further details. Apart from that, it then gives you access to the actual entire data as well in case there was something else. So this is a primary use case. It could be a secondary use case where they would be requiring it. So third one is prioritized common use cases and insights. So each chart has a certain kind of use case. Like bar charts are used for comparisons, scatter charts are used for correlation, like I mentioned, pie charts of a composition, etc. So there are some use cases you could always expect given a type of chart that is being used. And you could plan for those use cases by default. So here we have 10 students and we have certain the marks that they've scored academically. Now for this chart, the most common use cases would be one for teachers to know which students are doing well, which ones are not doing well, who are the most least, who came first, etc. And for the students themselves or the parents of the students, they want to know specifically about their child. So before the screen reader can actually read all the content, you can have an option to either listen to it in ascending order or descending order. So you actually will come to the most and the least upfront. And towards instead of reading each and every row and each and every column, you can have the screen reader read just one particular column. And wherever you reach a point that is interesting, you can then further drill down into the other rows or columns of that particular data point. The next one is support with descriptive content. So I'm going a little fast because I'm a little low on time. This is very similar to using all text for images. So if someone's familiar with accessibility design, normally if you have an image, you're supposed to use an alternate text that screen readers would read describing the image. So the only takeaway here is instead of just using all text, that saying is that there's a line chart that shows annual solar module production from 20 to 17. Actually describe the insight within the chart as well. So talk about how it's increasing, how much it has decreased, when did it increase, etc. Points like that. So this was about complete blindness where the users would not be able to see anything on the screen. The other part is about partial blindness like color blindness. So color blindness is where users can see, but there are certain colors that are not easily visible. And the common ones are red deficiency, green deficiency, blue, yellow deficiency. And this is a simulation of how the colored image would appear to different users based on the color blindness. So as you can see, red and green are colors that you should normally try to avoid, because they seem very similar, irrespective of how the charts are, whatever the color is used. And any color that is made up of these colors would also appear differently. So try and avoid those kind of colors. Additionally, try to use something else along with colors as well. Like over here I've used strokes and bars, etc. along with the color. And it acts as a fallback. So for a sighted user, this one becomes a little noisy. So in such cases, make it an option. Like you can access an accessible version or no. And this is just a simulation of how it would look for a colorblind person. So as you can see, certain bars, though they are different representations, they appear to be the same. And over here, at least the strokes and columns, etc., would make it easy. This is another example where because of captions, we've made it easy to access, because at least the captions represent the data. So these were the guidelines. I'd like to conclude with this slide. These are certain people who've made it big, in spite of having blindness. And I'd like to focus a little bit on Helen Keller. So she's someone who went blind at a very young age. She was a few months old. And she didn't only become blind, she also became deaf. So you can imagine data. I mean, she could not access any information, because if not sighted in years, but even years would not. And for her, there was another person who helped her, named Annie Sullivan. And she herself was also blind. But in spite of being blind, she actually taught her and educated her. And she went on to become an author, a lecturer, a political activist. She actually got a master's degree in, a bachelor's degree in arts, etc. And the reason I'm sharing this is because just like Helen Keller had, Annie Sullivan who actually helped her at the initial phase and enabled her to get so much information. Similarly, right now too, we would have many such people who are with a lot of capability, a lot of potential, who can achieve a lot of things. And these small initiatives, like making data accessible, and not just data, but insights accessible as well, could help them to go on and achieve a lot of things. So, yeah, that's about it. Thanks.