 My name is Cristiana Unese and I am a user experience designer and accessibility consultants as well. I have worked with multiple small and large businesses and within the last several years I have been mainly focused on working with government agencies and I'm currently with a government agency a federal agency in the United States dealing with public health information and our business is the dissemination of public health information matters. Being that we are a government agency we have to focus a lot on adhering to very strict accessibility guidelines and regulations. So on a day-to-day basis, I work on different things. I work on making documents compliant. I also work on making multimedia content compliant before they go on the website and I also work with a lot of developers as well. I test websites that we have to make sure that they're compliant. I also test apps as well. So I do a lot of that on a day-to-day basis and then in addition I also present at tech conferences and also speak of multiple panels in the United States and also work on training workshops for accessibility as well. So that is why I am here today speaking to you all. That's just a little bit about me and what I do on a regular basis. So I will today I will briefly talk about what exactly is web accessibility and why you should have web accessibility in mind when you create code and design websites and apps. I will talk about some of the various impairments that people experience and how it hinders them from accessing web content. The assistive technologies that they use as well. Then I will talk about web content accessibility guidelines and how this applies to the code and the websites and the apps that you develop. These are guidelines that you know help make sure that you make your websites and apps accessible to people. And then with dealing with some of those guidelines I'll talk about some of the overall or some of the more general guidelines that deal with color, deal with contrast, images and audio and multimedia as well as forms that we fill out online. And then I will talk about some of the tools and resources that are available for testing and how you can use these during your workflow to make sure that your apps and websites are compliant and accessible to everyone. So in talking about the internet and web content, initially when the internet first started we can kind of describe it as computers, you know, that pass a bunch of information packets back and forth. But as we know, that is no longer the case. The internet now is everywhere. It allows us to have access to people across the globe, you know, everywhere. It allows us to watch shows and shop from home, you know, under comfort of your sofa, you know. So it has changed the way that we access information, the way we understand information and the way that we use information. But how often do you stop and think about people who have disabilities and how they access the internet, you know, because just like everyone else, they are users too. They are consumers of information. They also need products and services, you know. So having a website or having apps that have poor accessibility does pose a barrier to them. So at the very basic description of web accessibility can be described as the practice of building digital content, websites and apps that can be accessed and used by everyone, including people with visual, modal, auditory, speech or cognitive disabilities. Right? So when you think about accessibility, don't think about it as a specific state. Accessibility really is a process as technology evolves over time. There will always be new challenges that come up that you need to take into account when building websites or when building apps. It really is about the human experience, because humans are idynamic in nature, you know. And so you want to build in code for the diverse set of users who will use the the apps that you create or the websites that you develop, you know. The main thing about internet or about the web is about our interaction. It has to do with depends heavily on what we can see, what we can hear, you know, what you can say and you know, what we can touch, especially with mobile devices. So having the assumption that all of your users have all of their senses enabled at all times when they utilize these websites or utilize these apps is basically ignoring a huge range of users who are not able to do so, you know. So you want to think of having an inclusive mentality when you are creating your websites and apps and also it leads to better designs for everyone, you know, and it leads to a wider range of people being able to access you know, what you create as well. So quick show of hands. How many people have ever had their arms in a cast? Okay, how many people have ever had to use the computer while holding the baby? Okay, how many people have ever had to use their cell phones out in the sun? Oh, that's almost everyone. You know, how many people have ever tried to watch a video in a crowded environment or on the train or on the bus? That's just about everyone. So when you think about it, most people think of disabilities or impairments or limitations as a permanent thing, but that is not the case. Oftentimes, most people experience some form of impairment or limitation at some point in their life, be it situational or temporal, you know. So these are some of the things that, you know, you need to keep in mind when developing your code is, you know, you're not just developing some or thinking about accessibility as something that only applies to people with permanent disabilities. That extends to other people as well. That extends to a wide range of people, be it temporal or situational, and how they access this information. So basically, to sum that up, in solving one problem for a small set of people, a small group of people, you extend it to a wide variety of people. So the one statistic that I came across online is that about one in five people, and that is about 20% of the population, experience some sort of impairment when it comes to access in the web or, you know, access in apps. And if you think about it, that's about 20% of the population. That's about 20% of your potential audience that you will be eliminating if your apps and your websites or web content is not accessible. So that is definitely something to keep in mind. But in making your your websites accessible to a small group of people, you really do extend that solution to a wider audience, which is very important. And another reason why you should design and code for accessibility is that it is good business. It's good business practices. You know, like I mentioned earlier, about one in five people on a daily basis experience some form of permanent situational temporary, you know, disability. So making your websites more accessible, it will lead to better search engine optimization and search engine results. It also encourages better coding practices, you know, which is key, especially if working in a team or, you know, developing enterprise type software, you know, it also leads to faster download times for for users as well. Now, another thing that a lot of people don't realize is that it also leads to reduced legal risk. Now, just a quick show of hands again, how many people develop software for or you potentially market to government agencies, myself, okay, or higher institutions or educations of learning schools, okay, or hospitals, the military, or how many there you go. How many people depend on government contracts as a huge portion of their business, you know, that we have a couple in here. So one thing you may not realize is that because of that, you are tied to you're even more legally bound to ensure that your website and your apps are accessible because you might lose their government contract if they're not, you know, in 2019, there was an average of about 10,000 and 59 web accessibility lawsuits just within the first six months in the United States. A current case that we have going on right now is Harvard University has been sued and they're going through that process of potentially losing millions of dollars because their online learning environment is not accessible to students with disabilities. And there are several other major corporations that are experiencing lawsuits right now because of that. So, you know, these are the things you also kind of need to keep in mind as to why designing for accessibility is very important. Now, when talking about some of the impairments that people face, you know, there are multiple categories. They include vision for a fully impaired, partially impaired people who are colorblind. We have hearing impairments. We deal like the death or heart of hearing. We have physical impairments, people who maybe aren't able to use the mouse and have to depend on a keyboard. And then we have cognitive on learning impairments as well. So that can include memory loss or inability to focus. You know, so these are some of the things that you kind of need to keep in mind when, you know, coding the different kinds of impairments and how people with these impairments access the web. So a lot of times they have to depend on an assistive technology and basically assistive technology is any device software or equipment that helps people work around their challenges and promotes greater independence by allowing them to perform tasks they were not able to do so before. So think of people who are colorblind might need to depend on colorblind glasses. That's an assistive technology. The use of captioning and audio. We have voice apps like Alexa. And another big one is the use of screen readers and magnifiers as well to allow people who have low vision to be able to read content and see content. So online. So in dealing with that and how that applies to content that you create online, we have the web accessibility web content accessibility guidelines develop their international recognized standards developed by W3C. And the main principles for these guidelines are that your content has to be perceivable. That means that has to do with the census that people use to access information online and how they, what kind of difficulties they have with their census. The next one is that your site has to be operable. So this has to do with like motor skills and how people access the, what tools they use to access the web if it's a keyboard or mounts, you know, then information has to be understandable as well. So using simple and clear language on your sites and making sure that there are clear instructions as well. And then finally, your website has to be robust. So that means you have to code in such a way that assistive technologies and third party apps are able to access the contents that is on your site. And these, they go in really great detail on the WCAG website and that is also, you know, available online. One thing to keep in mind with these guidelines that there are three main levels of conformance. And that is level A, which is at the very basic level your website has to meet level A conformance. So if we're, let's take video, for example, if we're talking about video at the very basic level, you should have captions with the videos. And then the level AA is usually the level that most businesses tend to ascribe to because it will keep you from a lot of lawsuits. If you don't meet these guidelines, so going back with video, in addition to having captions, you should also have a transcript available. And then at the highest level, which is the triple A level, which is usually the most complex of the level. You should have some like sign language. So the main thing with the levels, the main thing to keep in mind is that each one builds on the other. So the triple A level will have all three. So if your website makes triple A level that for video, that means you have captions, you have transcripts, and you have like a sign language as well. But for the most part, that tends to be very difficult for some sites to achieve. So usually if you try to, if you strive for level AA conformance, then a lot of times that would be good. So now in talking about some of the guidelines that apply to the content online, one of the big things is the use of color. Color is everywhere. As you can see, it's a major form of communication and it's used to convey information and it is used to portray emotion as well. However, despite the abundant use of color everywhere, there are some people who cannot perceive the full spectrum of color. You know, there are people who have color deficiencies. One of the most common ones is the red, green color deficiency. If you're looking at this, for someone who has a red, green color deficiency, you probably see a five on the image on the left. And then if you look at the image on the right, it kind of shows how someone who is not able to perceive the full spectrum of color might see images. So can you now imagine if you have a website where color is the main use of portraying information, how people will have difficulty with that? You know, so the key thing we use in color is color should not be used as the primary means of conveying information. So how this applies to websites, if you have error messages, navigation items, headings, you know, different things, and you should not just depend on color to convey when there is something wrong or convey that information. You should also use, in addition to color, additional like text descriptions as well if you see the image that's up here. If you remove color from your site, your user should still be able to perceive the information and should still be able to navigate their way around and know when there's an error somewhere or, you know, when something has to change. So a key thing too is to test your websites in grayscale mode. So when you eliminate the use of color, is that information still portrayed accurately? You know, that's something that you should pay attention to as well. Now another guideline is the use of contrast. Earlier I asked, you know, how many of us use our cell phones outside in the sun, you know, and that is just about everyone. So can you imagine if the content that you are viewing on your cell phone does not have accurate contrast? It will be very hard to read the text, you know, and see some of the different images and stuff that are on your device. So the rule for this to meet double A compliance, your normal text should have 4.5 to 1 ratio while large text should have 3.1 ratio. Now I included an image on the right over here. This is one of the tools that I use to test accessibility online. It's called the Wave tool. I'm going to go over that in just a little bit. And as you can see, it shows, you know, the content online. This is a site that is not passing the contrast checker. So it's showing you at the bottom here, you know, where there is problems with the text. It didn't pass, you know, contrast check. So this is also something that you need to check as you are testing your websites and apps as well. Now another guideline is for images and non-text elements. This is also a big one. Use of images is a very quick way to convey information. We use images everywhere for different apps, Instagram and Twitter and Facebook. Practically every website has a lot of images. Now, so can you imagine if you are not able to see those images or for someone who has difficulty, site difficulty? Images also apply to graphical representations like graphs, charts, infographics, animations and graphical buttons as well. So the big thing with ensuring that your images are accessible, especially to like assistive technology, you want to use good alt text. Alt text or alternative text basically is describing what is in your image. And this is usually read by screen readers. So a lot of times when I work with developers, sometimes they'll have images and they'll say, you know, image of dog. Okay, that doesn't really describe, you know, how that works within the context of the page. So instead of saying something like image of dog, it can say image of a guide dog at crossroads with, you know, this intersection. So it makes it easier for the person who has to listen to that visual description able to understand and have a better idea of what is in that image. Now, another thing too with images is that it makes it easier when you use appropriate alt text. It makes it easier for that image to be found online by search engines. So think if you are a company and you're selling products and you have images of your products, if you have very good alt text in the description of the images, then Google is able to pull up those images when people are searching for relevant things related to the kind of products that, you know, you have. So when you do Google search and you click on images, how do you think those images come up? It's how those images are described in the background that allows Google to pull up the appropriate kinds of images related to various searches. So that also becomes, you know, very important as well when it comes to images and non text elements. Now, when it comes to audio and multimedia, these are usually intended for people who cannot access the audio, but you can view the content. Or, you know, like a lot of us, you can want to watch a video, but you don't necessarily want the audio that goes with it. At the time, maybe you're in a loud environment and you just want to be able to read to follow along. Captions become very important for that. And basically, captions are text of the spoken word that are in the video content. They can either be closed or open captions. And you should always give reader your users the ability to turn them off or on. Another thing is you should, users should always have the ability to exit the content when they want. Now, another thing that I noticed a lot of the times is you'd have animations or videos that start automatically when a page loads up. And then you're trying to figure out, okay, where is this audio coming from, especially when you have multiple windows open? And you're like, where's this audio coming from? I don't want that. So you should try not or you should not have audio that starts immediately with video, especially like embedded videos or animations. Now, captions are required for all prerecorded media to meet the level A standard or level A level of compliance. And they're also required for live synchronized media contents to meet additional double A requirements as well. Now, another thing to also keep in mind with audio and video is you want to have text transcripts. Text transcripts are simply the text version of all spoken word and important video content in any audio. So think of podcasts. You should always have the text transcripts available. They are very, very useful people, both hearing and visual disabilities, as well as people with cognitive disabilities who might find it hard to watch video content as well. And then also text transcripts make it easy for the content to be searchable, again, to be able to be searched and indexed by search engines online. So going back to captions, another thing I wanted to mention is that how many people here can remember Flash just about everyone? Now, does anybody know why Flash is no longer being utilized or one of the reasons why Flash is no longer being utilized? Well, that is true too. No, one of the big reasons why Flash is no longer available is because Flash content is not accessible to assistive technologies. So, you know, using Flash on your website will get you sued in this day and age. Because, yes, because assistive technologies cannot access that, you know, contents that is on Flash video or Flash content. It was very difficult. So that was one of the reasons why, in addition to it being not on iOS devices as well. That is one of the reasons why I needed to go back because I had to mention that. That is true. Okay, so one of the guidelines to it has to do with visible order and focus. Now, this has a lot to do with how people operate your site. So if someone is using a keyboard only to access the site, they have to be able to see where they are, you know, and have visible focus as they interact with the site. So making sure the way that assistive technologies access information online is similar to the way we read. So it goes from left to right, top to bottom. So you want to make sure that that order is in place as someone is going through your site and using, say, a keyboard only to access your site. So one thing that you can do is you can test your site with just using the keyboard to navigate and tab in through your navigation to see if you are able to get to where you need to go on the site with just using the keyboard. So, you know, in doing so, elements have to have a visible focus on all the elements to let the user know where they are, you know, as they go through the site. And then similar to that as well, we have guidelines for forms, make sure to use labels when you are using forms. One of the biggest mistakes that I see often too is people, developers, using placeholder text as labels. That is something that is a big mistake, you know, you should because placeholder text are usually gray and low contrast. So it makes it very difficult to read. And also using labels allow, make it easier for a user to understand what exactly they are supposed to be filling out, you know, in the forms. And then also with error messages, error messages should not be in color alone. Now capture you mentioned earlier is also highly controversial when it comes to accessibility. So there are a lot of discussions about that as to whether they are useful, but they do pose a huge accessibility problem. So I would just say that they do pose a huge accessibility problem in using capture. So you can see, you know, there is talks about, you know, different options that can be used instead of capture to validate forms as well. Now I wanted to briefly mention the voluntary product accessibility template. Now this is when you are, if you are developing software to sell to the government or you are a government agency looking to acquire software, you want to make sure that what you are purchasing or what you are selling as well meets the accessibility guidelines. So this can be part of a proposal or it can be a part of market research that you are doing if you are trying to procure software to, you know, compare to see which ones have better accessibility options. So this is something, this is a template that is available that you can use to, you know, present your software if you are trying to make a proposal or to analyze and see how the software that you are trying to get, how it meets the various accessibility guidelines. So it kind of goes both ways and then it is something that can be included in the contract that you can hold, you know, a developer or software company, you know, you can hold them to it because they can have to sign off and say, yes, our software meets these accessibility guidelines. You know, so if, you know, God forbid down the road they get sued, you can come back and say, hey, you signed this document saying that, you know, your software met these different rules. So that is, I wanted to mention that as well because that is something people might, a lot of people are not really familiar with. Now, in talking about the various resources that are available for accessibility testing, I mentioned screen readers. They are a big portion. A lot of people do use screen readers. Now, some of the most popular ones are the JAWS, which is primarily for Windows. Then we have NVDA, which is the non-visual desktop access and it's a Windows-based software. Then we have Apple VoiceOver for Mac and iOS devices and then TalkBack for Android. And some of these are available for free online that you can also use to test your site to see, you know, how someone who is using a screen reader is able to perceive the information that you have on the site. Then to do testing of the different elements that you have on your site, there are multiple tools available. This is just only a small list. I will show briefly here. We have the Wave tool by WebAim and it's, I think right now I think they have extensions and you basically enter the URL and click on the extension and it gives you an audit of the page that you're looking at. It tells you what errors you have, what levels the errors are and it's good to do like a quick accessibility audit on the site. Another tool that I like to use is SortSite and it's both a desktop and a web app and it will allow you, it shows, I really like this tool because it does show error warnings and it will prioritize them based on the level of conformance that you have. Then the axe tool and the other tools are, there's an extension and then the other, the last two tools are more developer focused because then you can create a dashboard and have customized settings that you can track, you know, on a regular basis to see if anything goes wrong with your site and where the accessibility guidelines are failing on the site. So just a quick screenshot, this is the Wave tool, the Wave extension that I use. So if you look on here, this is, I think this is a CNN website. This is a CNN homepage and in using the Wave extension to view this CNN homepage, it shows how many errors that they are on the page. It shows contrast errors and then you have these various tabs here, you know, at the very top and in clicking on each of these tabs, it will show you a more detail, it will show you a more detail. So here is the details tab. Here it said you had eight errors, these are the eight errors, you're missing alternate text on like this image. And then if you click on that, on the icon that is there, it will take you to that specific item on the page so that you know where exactly the problem is. They have missing form labels, document language is missing, that's another very simple, easy to fix error that I see all the time. A lot of websites often don't have language specified and that is something that is very easy to fix but often times, you know, is omitted as well. And so you have, you know, different empty links as well and then down here it shows you contrast errors and this is just a screenshot of the page. And these are all different tabs that show, you know, the different elements that it is reading. Now you also want to think, well, how can I test mobile or, you know, mobile devices as well? It does allow you to do that. When you, and using, I often use Chrome a lot of the times and making sure that your site is responsive. You can use developer tools to view different screen sizes and then run that extension to see what errors are coming up. You know, for, I typically do mobile testing on the desktop simply because it allows more screen time to do that. So, and then the other two that I talked about is sort site. I really like this tool as well because it gives you a little bit more detail. It allows you to do more than just accessibility testing. It gives you errors or shows you broken links. It shows where you are compatible with in terms of your code. And then for the accessibility, it gives a breakdown. You know, at the very top here, it tells you what levels of errors that you have. And then if you click on each one of those here, it gives you the error that you have. It tells you how this impacts users. So what assistive technologies will be unable to access this information? It tells you here what rules, you know, which specific rule that this applies to. And then it gives you the page and then it gives you the code line. So if you're working on a document that has, you know, thousands of lines of code, it's easy to find exactly where you need to go and what you need to do to, you know, correct that error. So the main key takeaways are that if you are to make accessibility a major part of your early workflow, it will be easier to correct problems as you go along. You know, keep in mind the web content accessibility guidelines and its various principles. Your code or your site should be perceivable, operable, understandable, and robust as well. And always you should strive to provide alternative ways for users to access your site and apps as well. Always keep in mind to try to test with a keyboard and a screen reader and be consistent with your layout and your navigation. And always, always, always use accessibility tools to audit your sites to see how you can improve and make them better, you know, for users all across the board. And with that, that is all I have for today.