 So good morning everyone. Can you hear me? Okay? I feel like a standard committee something like that Can you see my position right now? This is so relaxed, but thank you so much for joining. I really appreciate that you can join With me today to present this because I'm really happy And I would like to share with you a couple of things before to start From Costa Rica, so a really a small country that I couldn't find there when I needed to To like to to use the sticker so I needed like to move to the left because my country is not there So definitely it's a pleasure for me to be here. So I'm representing Costa Rica. So it's a pleasure. So my name is Merari alvarado is like a Ferrari but with a name so it's better to remember you will never forget So thank you so much for joining. So before to start I would like to know What type of assistance we have so developers Good managers content creators Good testing area design Good good. I'm glad. Thank you so much for joining. Okay. So one more thing. Have you Work with accessibility before or is it like the first time you are like Trying to understand accessibility Like yeah, that's the the most accurate answer right like I kind of know accessibility Good. Good. Okay. So in this case, I would like to share with you some important information about accessibility Because accessibility is not a feature It's a process And sometimes we think that accessibility is just something that we can add at the end of almost We are finishing everything, right? And we notice that it's difficult to go back to design or it's difficult to go back and programming Everything again because we are contemplating accessibility as a feature But it's a process and we will learn that today. Okay So I would like to start with this specific quote. It says data visualization is not your creative outlet Data visualization is making data understandable. Are you agree with that? I want to see your hands Okay, so definitely it's something that We need to be like Very How can I say it? We need to be really clear with the type of information that we want to present. So in this case It's also A thing so even though the quote says that We need we we cannot be created. We have to be created in terms of accessibility and we will see that in a minute because it could be kind of complicated sometimes Okay, so before to start I prepare some material for you. This material is also accessible So you can access the short link to the Right your left and also the QR code. So you will have access to the presentation And you will have access to some of the exercises that we are going to try today Okay, good. So I will give you one more minute. So do you have it already? good Just in case if you don't have Access to that. I have some print materials for you. Okay So moving forward, what is accessibility? How many of you have the opportunity to attend like the flash talk about accessibility and ai yesterday? Did you have the opportunity to take it? No Okay, oh you have okay. Good. Good. So let's try to understand a little bit about accessibility So we have two ways to understand accessibility We have the first point which is accessibility is a human right It's not something that you think Uh that they needed to be integrated to the code and that's it accessibility is a real human right So it's important for us to understand the second point Now we are here trying to cover the second point. We are trying to create an opportunity for inclusion So we are learning about how to create accessible products for people with disability and in general create accessible products Then we have the other way to do it or to see accessibility which is like Now as part of Many countries and also there are some policies acts And everything that is requiring mandatory accessibility. So how many of you are from europe? beautiful panel Okay, so uh from europe there is a new regulation that indicates that for two for 2025 Every product needs to be accessible. It's mandatory. So now you know Just in case Okay, everything needs to be accessible and it's mandatory and this is important every content needs to be accessible and now regarding to the design part Every project needs to be usable but accessible at the same time And sometimes it's quite difficult to create something that can be accessible and usable at the same time Okay So now let's try to understand Some types of contents that will be really important for us And why is this important? Because we are designers. We are developers. We are content creators We are not usually working with people with disabilities, right? This is not part of our Job description, right? This is not common, but it's really important for us to understand that There are several types of disabilities that are around in internet And sometimes our products will be Interact or they have a certain type of interaction with people with these types of disabilities So right, I don't know. Where is where are the glasses? Okay, so in here We are not emulating People with disabilities because there's there is not our right thing to do But in this case we have some mulators Of visual disabilities So you can take a look after the presentation if you want to know more about that Because it's really important to understand that we have the most common disabilities are visual disabilities Mobility so many people cannot use the mouse and sometimes we are creating this sign that is only Predictable with the mouse not using the keyboard and we are going to see that in a minute So learning and cognitive disabilities. This is really common and probably some additional situations like Cognitive loads probably after a full Call morning. So maybe you have 12 calls Then you need to take a decision at the end of the afternoon and you can not because you have Like a lot of information into your mind. This is something important So that's why some of the products needs to be accessible also for this view. Okay So why digital accessibility? Let's try to understand that usability is when we need to create a project To look beautiful, right? You can correct me if I'm wrong, right? Hello You are the designer So usually the design part it's Has like a really great responsibility into creating usability or usable products, right? And then in terms of accessibility is how the user Interacts the usable part With assistive technology like a screen reader Magnification tools or using only the keyboard for example Okay So What is usually the definition in terms of usability testing? So we think about Learnability efficiency the way that we can prove that the application is working or not Through errors, right and usually it's really necessary to use some type of Heuristic evaluations right because it's necessary to understand the way that we want to create the information But in the case of accessibility in the case of testing or accessibility testing in general It's trying to test the capacity of the system With assistive technology So are you familiar with voiceover? Yes I can see that not so happy faces at the back So yeah, I can I can understand that But yeah, definitely it's something that we need to think about okay Perfect So there is another important concept that you need to know for the developers It's really important to understand that the way that you create the information In your screen or the the layouts that will be the exact way that the assistive technology will read the information So if your code is not Like coded correctly if I if I may say it in that way So the screen reader will not be able to understand the information So it will be not possible to read the content in a hierarchical way And also in a structural way, okay Now for interaction, what does that mean? So I'll probably use it. Obviously it's keyword right. I need to use the top Easy, but sometimes it's not that easy So we have the keyword interaction usually for native components That's usually the most common and what are native components like drop downs checkboxes radio buttons, right Those are usually html native components and in the case of assistive technology They are usually familiar with that. So assistive technology can easily Understand this type of navigation But what is going on? When we have complex components when we have Grabs when we have some different types of visualizations Or now with the customized or the extremely customized Sometimes permissions that we provide with our with our products, right? So what are the three things that we need to keep into consideration? You need to keep into consideration the structural navigation The spatial navigation and the targeted navigation Probably is the first time that you are listening to that and I'm glad Because this is important because usually we think about usually We are focusing only in the first one a structural navigation We think that everything needs to you stop like this Right in a linear way, but sometimes with the with the graphics The complexity is different the comprehension of the information is different So at the beginning we talk about the creative things, right? And with accessibility sometimes we need to be really really creative Okay, so Those concepts are really important So when we are talking about accessibility supported It's when the screen reader by default is recognizing Like html native components So usually the screen reader will always Identify those those components But in the case of programmatically determined in these cases that you sometimes need to test With the voiceover with mvda with just or in your devices To validate if the application of the or these specific components. It's fully accessible So it's important to take that into consideration now What is data visualization mean to do? Usually the common barriers for visualizations are that Sometimes we are really happy Like applying all the colors we want all the palette colors Right because we want to have a beautiful graphic But what is what is happening when we have a color blend user? Or when we like Let the user to customize the graphic and we cannot provide an accessibility matrix that says if you configure like a little bit Extra of that You will not have an accessible component or an accessible content. So that is important Okay, so now when we need to understand is like Usually the user need to perceive the information in a proper way And also the content needs to be intuitive, right? So this is important There are two questions that I really would like To invite you to like take a screenshot Take a picture because those are really important when you are designing Or when you are planning or when you need to work with your Colleagues in terms of development What are our users going to do with this? That's usually the question that I ask all the time What is the purpose of this graphic? What is the purpose of the information? So i'm working for a company that is usually working with process management So a lot of data going on So usually the visualization parts. It's the most difficult thing Can you imagine my conversations with the developers, right? They are not always funny And this is something that is important, right? Okay, the second question. How are we going to make this accessible? Even to start designing or even starting to any type of planification in terms of developers because In terms of development, okay Because it's important for us to plan in accordingly and also the developers need to have access to the different assistive technology as well Okay, so some accessibility truths Through it's my god, sorry. I'm from Costa Rica. Spanish language kind of a thing for example Usually try to create an Access a graphic that will be accessible. Sometimes it's really complicated. So I can understand that I will be not punish any developer about it So we will have so many conversations, but That will be part of the process as well When we're talking about accessibility doesn't mean identical. It means equivalent. So that's why we have like spatial navigation We have a structural navigation or target and navigation because it depends on the graphic and of course The type of content that we are choosing the library is the code the best practices that we are going to use that is also important Okay, so we are going to practice. So are you ready with the information? With the cure code. So for the ones that I just joined, let me just go back to the to the initial presentation So you can download the information or access the information in here Okay, so you will have different type of Documents in case you want also the printed versions. I have the printed version here What we are going to do You will have a document That looks like this. Maybe you can see it or not This is a data visualization So you will have an specific information. So in this case, this is a graphic that is not accessible But below that graphic you can see three types of solutions that can make this Uh, this graphic accessible Then you will have other two documents You will have like a specific easy check or checklist Where you can find multiple Elements or consideration considerations questions that you can probably Take into consideration Again, uh to review your graphics. Okay and of course I Create a specific documentation with some shortcuts including for Assistive technology in this case screen readers for voiceover for mac users mostly most of you as I can see Are also for mvda For windows sorry using a tool that is called mvda Okay, so what we are going to do so let me just put the mic a little bit for me Can you hear me? Yes. Yes Okay, so this is the document I already shared with you. So you have bubble chart So now what we are going to do is try to check The specific documentation that I share Regarding this right the easy check So I will give you two minutes. So please try to understand what uh, what we need. Okay So for example, so what we can see here So we have multiple colors What we don't have in here That you can maybe See that is not accessible Exactly. What is that? The legend. I'm talking without microphone. Good So, you know that I'm super excited, right? So, yeah, we don't have Delayant right what else we don't have Color choices like we have a lot and we don't have the meaning we don't have any description below the graphic Uh, what else we don't have What do you think we don't have? Labels. Yes labels legends A lot of beautiful colors, but maybe not useful Right and what else we don't have So yes in this case exactly So now What is going on if we are accessing the information using an screen reader when the screen reader is not able to access this information at all Visually so it will be a complete challenge because we cannot access to basic Um, structures or basic information from the graphic, right? So What we are going to do So if you notice we have one graph here So what do we have in this graphic? We have the legend What else we have labels Title what else colors may be a little bit more structure. Yeah, right So when we talk about the solutions the solutions So We have multiple ways to create A solution that can be accessible so we can use Title description color choices, right legends that can help us to create an accessible Um, um graph also when we can provide alternative html ways because sometimes I can find like a multiple websites including a screenshots of graphics Without any alternative text So an screen reader we just read blank No explanation at all and we have like a multiple information here. So for example It's a really common that when we have complex visualizations. We can create like a Like like a version of a table so we can create a table that can be exported So the user can also Take the graphic of the information of the graphic as a table So it will be really easy for them to download the information and read it with the screen reader. Make sense Okay Good So now I want to show you An example right now of an inaccessible Sharp so So in this case, this is a real graphic from jira So I will try to Navigate this graphic using only the keyboard. I will not use my mouse And I will just enable the screen reader but Just like this speech viewer for mbda, which is from windows So you can take a look. What is the screen reader reading about this and what we can do and what we can't do Okay Okay, as you can see this small window Can show us The way that the screen reader is recognizing the information So I will start my navigation with tab key so you can just read what is going on. Okay, and also if makes sense to you, okay So please take a look now descriptions Like or descriptions, but not clear like super ambiguous Okay, I guess I'm so fast with this Okay, so we have some landmarks. It's really great. Well, it's a really good idea if you can structure your code using landmarks Because it's one of the best ways for the screen reader The screen reader users to access the content. Okay Now move here as you can see I'm not using my mouse. So that's why it's quite complicated Okay, perfect. So now, uh, it's time to access the graphic. So what is going on? I don't have access. I cannot access the graphic at all beautiful, right beautiful So I cannot access the graphic. I immediately jump from the three dots at the right side Go directly to the edit button So the user was not able to access the content. So I'm not able to read So what other thing it's important to take into consideration? The interactions with the graphic are only available with mouse This is a blocker This is something that will be considered a violation and you can receive a lawsuit just for that And this is important. Okay I'm sorry Yes, it is So it is uh, yeah, so jira has some problems right now So you can you can send some comments to them Okay. Yeah, but this is a jirai issue right now. So in this case sometimes it's necessary for us to always Validate what type of information we have if you notice it looks beautiful. Probably you are familiar with jira, but you Don't like maybe you didn't you didn't think you didn't You the okamon So probably you have not The opportunity to test jira itself because you're using for job or for your work, right? But in this case I am testing that thinking about a developer with disabilities or we cognitive with disabilities So it is important that also our the tools that we are using to create content must be accessible as well So this is important. Okay. So let's think about other scenarios Just a minute Okay, so now the colors What is happening if I need to test colorblindness? Some of the change some of the colors change that probably make doesn't make any sense, right? Or what is going on if If I test using like for example Some of the glasses that I share with you are emulating certain types of disabilities that can also Think something like that Uh, usually people with some type of site They are using this Or they are using something like this So, no, thank you No, no, no Okay, so if you notice definitely this is something that we need to take into consideration from the design perspective Usually it's necessary to validate how the users can access our content Keeping into consideration inverted colors or using just like the dark mode all the time Because sometimes that that is really important and you will have a really a really good Process, okay, perfect. So is there any question? Yes Yeah, when yes, so when you when we are using colors alone That will be a problem. But for example in this case if you mouse over the The bars you will have like visual indications that There is something like linked to that color, right? But usually it's better to link values with visual indicators or With some screen reader only categories in your code So the screen reader user will be able to read the values that you have visually Displayed on your screen or your layout And also the screen reader will be able to understand the information So many pictures I feel so important So, okay, perfect. So is there a Yes, yes To each other So I wanted to ask What about the differences between the hues and saturation? When you are using those inverted gray scale or yellow and black well now when when some users need to invert the color because they need they have like a special like um Reading needs or accessing the information in different ways One of the most important top the most important things are The visual elements because we have multiple disabilities. We have we can have people with um Visual disabilities low vision, but also they cannot hear correctly So they cannot use an screen reader to read the information as well So everything needs to be on the screen So even though we cannot perceive the color if we have a really good heading uh title of the uh of the um on the graphic the labels those can be helpful Additional elements that can um can help the user to understand the content also elements that are like annotations Or tool tips are really great because some of the users can access to those elements And they will be able to understand the context in general So one of the most important things when we are creating complex data is the context If we are providing good context the users will be able to understand what we want to say, right? Okay, so I will move to the presentation again, and then we will have another time for questions. Okay Okay, perfect. So I guess one of the most difficult things when we are creating Complex data or complex visualization is the way that we present the information. How clear is this information? So we need to think what is the purpose of the information? What if if the specific selection of the graphic or the presentation is the correct one To just transmit what we want to okay, so it's really really important okay, so I always ask Let me choose the other mic because I really would like to do this. It's like I like it So I think one of the most important Considerations is like always ask the purpose of the visualization What we want to achieve So also it's like is this intuitive enough To properly have my mind focused on the information So I'm just relying on the colors or I'm just relying on on the way that of the data that I want to Present instead of the construction of the information. This is really really important. So I know this is like a super flash crash course right in terms of visualizations But for me, uh, was a pleasure to present this And so I would like to move to some of questions because I guess we have a couple of more minutes So any question? Yes Because I was thinking the possibility of replacing the colors with a pattern Like a visual pattern Is it possible or should we always add some text Related to that color or pattern for example that dimension of the chart? Well, yes, I know I know sorry the answer is like weird, but for example Um, you can use texture To create some content that will be accessible Easily to recognize that would be really really good to have this Sometimes you will have the patterns so you will require the patterns together with the visual indicators But sometimes for assistive technology You can use only the patterns and maybe the indicators for the screen reader can be only in the code They shouldn't be visual Will the assistive technology recognize the patterns? Yes No, they are sorry the patterns will be not recognized But the but the code that you can add Or the screen reader category in your code will be able to say okay Even though we have a pattern there In the code if you have the attribute for the screen reader They will be able to recognize that in the code or using the code as reference not the visual presentation Would there be any difference if the pattern for example, uh, instead of being an image It would be an svg or how else I could describe that I don't know if I understood the question But for example, if we are using images To create that graphic we need to have We need to create two ways Okay, we need to include an alternative text to that image But this alternative text shouldn't shouldn't say like This is a graphic including x y z no you need to you need to be as Descriptive as possible. So in this case, you need to think about a tweet So 140 characters. Do you notice that I don't use Twitter, right? So usually 140 characters will be usually their recommendation when we have Like complex data and we are using just images of that But sometimes you can also use like some accordions below the graphic with a bigger explanation So some of the users can just directly access to the description below your graphic Instead of like having like any Any type of attribute in code so they can just refer to the description So there are some ways as I can say you need to be creative with the solution sometimes I was thinking about the difference between raster images and vector images Does the assistive technology recognize that difference? Because as which is our vector images and you can actually go through the structure and the tree of the pattern Yes, well, well actually there are so many images that you can use in your in your in your code, but I guess the most important thing is that if the image Is not including the attribute We have multiple scenarios The screen reader user will read the source of the image completely. So it will for them will Doesn't make any sense Right and also will skip the image completely, but we don't want that We want that the user will be able to read the information. So that's why we need the alternative the alternative text So it depends again The purpose of that visualization it will be decorative It will be not necessary to have the alternative text. You can have a new alternative text And also it will be like partially descriptive with us with a short all description will be enough But you need to just check the case that will be applicable to you. Okay. Any other question? Yes Thank you, uh, could you recommend to us Some easy sources of information about about this topic Absolutely. So I would share right now with you. So take notes So one of the first sources that you can use is apg this is like a specific web accessibility initiative Page that you can use for native components So in this case, you will have like a full gallery of the most common html components And you can see in here Multiple options for example with the checkbooks You can notice specifically the accessibility expectation Some examples of a component that are accessible And also some keyboard interactions that will be really useful for the design perspective And also the code that will be required To implement this component in a in an accessible way for assistive technology So this resource is really really great another tool or another reference is DQ web accessibility checklist So How many time? Okay Okay, so you will have this resource in this case You can use the web accessibility checklist and you will have per type of Section for example, all the best practices for accessibility Approved by the WCAG or the web content accessibility guidelines For example, if you ask to the if you access to the page title You can see what are the problems that can be considered a violation That could be affect your company and also what are the most important topics in terms of best practices So you can use this as reference and it will be really helpful Another important thing is that in here You will have this page that will be the w3 org And in this case, you will have multiple resources So you will have a design and develop section Where you can find multiple Tutorials where how you can create an accessible content and you will have also tools for designing For designing. Yes. So you will have multiple references in terms of content creation As well, this is really important for writing So for content creators, it's important for you also to create accessible content Okay Perfect, then we have dqx Is that plug in Okay, this is a really really great plugin and that you can use to test your pages You can use the The free option and it's really it's really nice. You can like create that Like create the code or create the page and run this Specific plugin and that will be really really helpful because you can obtain some some type of a reference from your code And also improve the code as needed in terms of accessibility Okay, so those are the most common and Most important resources. Oh, of course, I have more So just in case you want like the entire list I have in terms of plugin in terms of informations You can contact me or we can chat around I will be here the entire day So I can share with you all the information that I have And also I guess one of the most important things here Is like always try to contact people with disabilities As much as possible. I know that sometimes we want to do it all Right, and probably we have the experience and and also the capacity to do it I've been working in accessibility for more than 12 years So I cannot say that I have enough experience to create multiple sites But definitely the support from people with disabilities will be the best Okay, so always try to talk with people from From the deaf community, for example from the blind community So those will be really great resources for you to understand What will be the real challenges for people with disabilities to access the web? So you can have some type of perceptions Okay, so Yes, another question good Hi Now that it told us everything about preparing your website to make it more accessible Is there also new developments in terms of the reader using AI for the Disabled person to basically Preview the website better for that person because from my point of view, it's much easier if we have a smart reader For disabled persons than everyone optimizing the website for it Well, I have news for you There is No tools well if you had the opportunity to To attend the training just well this the flash talk About accessibility and AI There is a tool there that was showing like the accessibility to be honest don't use that So sorry But it looks that it's a good tool But it's a tool that is like overlapping the real experience of the web So if you don't have a good code best practices You will get a loss of it because of that. So these tools So I don't I don't saying that accessibility is bad. I'm saying that accessibility Is it's like an overlapping tool? So you need to definitely create A content that will be accessible and usually Take time we don't have So we don't have a specific set of tools that can help us with that like right now Uh, but the plugins that I shared with you and also some of them that I have can help you But it required It'll require time So and practice So that's the only thing that I can say sorry. I don't have like like a magical pill to share with you But at least a couple of resources Okay, another question because apparently I have time I Run learn that run Hi, is there a um, so let's say a worst case scenario the graph for example you could not You could not create the accessible elements for a user to use is there a is there a way of By passing that element completely obviously like you couldn't use aria hidden if you had anchors in it because they're Focussable items etc. Is there a way to make it easier for people to Skip the crap and get to the content they want It is But it depends of the context as well, right? For example, one of the tips that I can give you is know your audience right because uh, if we understand that audience that our audience we uh, usually has like a um High technical skills sometimes a prepare Graphics in a way that will be extremely accessible or not extremely accessible accessible and it will be like super complicated Probably will be not the best idea, right? So know your audience that will be the first uh, the first thing also try to understand the context What would you like to share with your graphic? It's just like a like as I said before it's just like a decorative thing So we can just create like an element or attribute in the code. So the screen reader just skip Uh, the visualization But if that is not the case we need to add a little bit more context, right? And the other thing is that we have something and you need to know that because it's really important There is a document that is called vpad Are you familiar with that? No Okay vpad It's an specific accessibility report or compliance report So if you want to uh, share your awesome services to uh, public uh, public Institutions, you need to present something like that So this report will include the real information in terms of accessibility of your data So In this case you will uh, you will indicate that you are supporting or not Certain type of accessibility best practices in your site for example You can have a list of exceptions because uh, for example, there are some graphics that are a third party And you can't you don't have any control on that graphic So you can create an accessibility exceptions document or plan and you can include that specific graphic there Because it will be not accessible. It will be not possible for you to create this graphic accessible This is something that you can have And if someone like tries to say that's graphic that graphic is not accessible You you can say we have an exception here, but if you need an alternative way, we can create something for you But it will be up a request. Yep Good Thank you for all the questions. Please continue to keep the conversation going By reaching out to mirari after this for all your questions. So this is the end Do you have anything to close you sure? No, I have thank you Okay, thank you very much mirari before you leave. Here's a token of appreciation from us. Thank you so much