 Thanks a very good day for coming in. I had a good surprise set in the last session today, so I appreciate you staying up there. So among the big horses and workshops and everything that I've taught by the years, one sort of overarching theme is that I'm really passionate about accessibility in general, really. So I haven't been on a list of them, I don't know what you're talking about in those images, but I am a workshop developer over at Detroit Labs. I lead the girl club at Track and Theater in Christ. And apparently, you unplug one nail, that's a hole. We're just going to make this one long. OK. We're going to just let you know at a big point if you can't see anything. Hey! Thank you. One more. Captain, I'm here. I'm here. I'm here. I'm here. I'm here. This is what actually got me into web accessibility. This is a picture of my car on the New York City football team. I had visually impaired athletes. And when I was in undergrad, with the same 200 people every day, which is just ridiculous. There are so many things I could be explaining to get out there and introduce things. And so, instead of studying for finals in my first semester of college, I went out of a bunch of volunteer organizations in the city. And this was where I ended. This was the thing that caught me and kept me for years. Today, every February, I make a special trip to Washington because that is actually one of the largest football tournaments in the country. It happens every year. So, knowing these people and getting to become friends with a lot of blind students, I've been really interested in how I could make it to the bottom better for them. And then from there, better for everyone. So, the things that we're going to do here we're going to find out what it is, what that means, what it entails, how you can serve them. We're going to ask some questions. I'm going to ask you some questions. Hopefully you can ask me some questions. And I hope you ask me some questions. I'm not asking. I'm looking at no cards. And we're going to talk about tools. So, we're going to give you some practical ways that you can kind of get started engaging where your problems are at right now. And also how you can get started learning more about what you can do. So, let's get started. So, what is accessibility? Why is accessibility, what comes to your mind? Like, where's the green code? I just thought, first of all, control K would do a certain thing, like a blending or something. Putting alt tags on the images. Yeah. Sometimes, maybe whatever you produce whether a service or product, it can be a whole different one. Yes. In case this was not clear, that was a great resource. She knows lots. Probably more than I do, honestly. Accessibility for your skill and always learn something new when you talk to someone else or someone who is just learning about it and asks us a question. Wow. I hadn't thought about that. Yes. And that was an excellent point, which I will get to later, and help you do work. So, the way that I think about accessibility is very similar. It is the process of making it easy for everyone to access your content regardless of how they approach it. So, we usually don't care or whether I'm missing a hand or whether I can't shake. Maybe I joined maybe I don't read well, maybe that's due to a language or I'm trying to read something in English maybe it's because I have dyslexia. It could be any number of things. There are barriers between your users and your content. Many of your users and the content and our role, our job, a huge part of our job is to start to break down those barriers. So, why do you need it? We've talked sort of about this already. Why is it important? Are you here? There are some good reasons to be here. Should I have access? Should I just look at it and just sign it or hear it from people or people that can't do it? It should be important. Everybody should have access. The World Wide Web for Concepts. Yes, I can like that. So, I'll start here because this is kind of like this is an obstacle that you're going to come across when you say to your employer or you say to your client, hey, we really need to be doing this. We really need to be making sure that our apps and websites are accessible as we can make them. First thing that you're going to hear is, look how much is that going to cost. And in reality, it shouldn't be that this is part of your process. You're doing it anyway. It isn't an extra thing that you can layer on top. This is just how we build. But in a lot of cases, if you're coming on a real project where that wasn't right or maybe you haven't just inherited this inaccessible code or it could be that you just didn't know. And that's okay. But what's important is that you start doing what you can now to start making our apps and websites more accessible. And a huge part of this is that about one thing, about 20% of users are going to have some form of disability. Some thing. And it's not necessarily a form of blindness. I don't get to perform that later. Something that is putting up one of those barriers. Something that is making it harder for them than any average person to access your content. And so having access to all of those people making so that they can use your product easily and quickly the same way that you and I would means that you have more users which is almost always a good thing. That's what you should do. It makes way better for everyone. It makes your app better for everyone. In the diversity panel earlier, these have a little bathroom stall. I knew a bigger bathroom stall was really for people who are much around. So most desirable bathroom stall is not. It's the face I can look around. I don't have to feel like I'm trying really hard not to touch anything. It's just better. And so making our apps better for people with disabilities just makes them better. Of your point, it is the world wide web. The point is that we are sharing information and we want to be able to share that information with other people. I don't have a touch on this but I want to start to dive into standards that all of this is really based on. There are other standards that you may want to be done on in some cases depending on the industry and especially if you are working on gaming almost. There are traditional guidelines that we can talk about if that is a question that comes up. But we're going to start with this. Can I have 2.0 that is the web content accessibility guidelines? I wasn't sure I was going to remember it. Web content accessibility guidelines. Let's do better though. So these are set of guidelines that are broken up into 4 principles. Your site or app should be perceivable it should be operable, understandable and robust. Those are further broken down into 12 guidelines. So the guidelines are where you are seeing the more starting to see the more measurable goals here and we'll take you through a checklist in just a moment. So your guidelines are going to be okay. You need to have alternative text. What does that mean? And then break that out into successful materials. So we know that we need alternative text for non-text content. What does that mean? And how do we test it? So we're actually going to back over here only desktop that doesn't have the link thing on it. And we're going to look at the if you know the medicine that the worker loves. So while we're talking about his levels so your six criteria are going to have level A level A, level A, level A, and level A. That is that is the indication of largely the impact that meeting that success criteria will have on the accessibility of your map. People tend to think of these as being exactly sequential which is not the case. Level, you're not necessarily what you can have a level triple A success criteria related to a particular edge. So what we want to make sure that we're doing in an ideal way is your level A criteria and on the level level A criteria. If there are a triple A criteria that are relevant to the athlete in reading and they might not all be the goal should be to meet those level triple A criteria as well. There's no instrument commission. Because it's trying to it's trying to connect to accessibility. Why a problem? I've forgotten it as many times as it comes. It's mine. This is my life today. We are going to pull up a reference screen. There we go. So this reference is essentially what I use to help people have start to feel more comfortable with the islands. If you just try to tweak them all at once then you get overwhelmed. That's too much. It's very specific, very technical and dry. It's just dry. I admit that. I literally run a course on this and I had to take it in jumps. It was too much. But this tool is really cool because it lets you interact with the guidelines and always see the perks that are relevant to you. So, if you are on a team then you can say, OK, we have this type of content that we can use these filters to go around the left-hand side to do that. You might be saying, I only want to see the guidelines that are relevant to the designers. You might say, I'm going to see the ones that are relevant to the developers. And so you can filter that way. And then this section on the right is only the guidelines that you need to worry about in that moment. And you can share this among your team which makes it really easy to stay online on what you're working on. So, let's break this down real quick. The first color, first principle over here is perceivable your app. Your content needs to be perceivable. And the first guideline here is text alternatives. We need to provide text alternatives for any non-text content. So it can be changed into other forms that people need, such as large print, rail, speech symbols, or simpler language. So, if you have sorry, there's someone else still downstairs. Oh. Oh, yeah. I'm sorry. What did you do there? It's so cool. It's the same. It's not so... Oh, you need to have something like this. Yeah. That's lovely. That's baseline. That is like a low-hagging fruit that's single A. Sent into the user has a text alternative. Now, note, this is accept. A number of these are going to have exceptions. There are going to be cases where it doesn't make sense for you to provide a text alternative. For example, if I have an image that is purely decorative, there is... I don't need to say they are the surely thing in the corner of my webpage. I don't... personally, I would probably put it there in the first place. A little bit. But do pay attention to those exceptions whether they come up. Any questions so far? Where about 18 minutes left? Did you at least click that one? Just curious. Yeah. So this will break it down for you. This is what it really looks like. It's not all from issue at once. You can say, okay, I know that one. I can do this. Or you can say, show the description and you can see the examples that they get. And you can also then show techniques, failures, or that specific success criteria. And it will give you all kinds of examples. And situations. So in this case, the situation me. I don't know if any of you can see this. If the description cannot serve the same purpose and doesn't have the same information that has a non-toxicant effect. So this is if you have a chart or a diagram or something like that. This is how we would go about providing that potential alternative. I'm sort of emulating your screen reader. How do I know what one person is doing? That's an excellent question. You're going to talk about what we're going to talk about now. You can just use a screen reader. Set a bunch of the more popular ones are. You can just use them out of the box on any Apple product. Oh my. Firepower server. Does it? Does it come with a browser or an app? Yes. And you can just have a smartphone and you can go and turn it on. Okay. Okay. Oh no. I'm like... I'm a protective of a teacher. If you have questions, please stop me. If you have something to ask, please stop me. Okay. So, yes. You can absolutely use this screen reader and if we can find it later on, we can find it. Anything else? This is a cool program. So if you want to know just that way, if any of you are working on work, have any of you heard? I see a couple of knots. That's cool. If you haven't, that's cool too. But no. I thought this was kind of interesting. The way that this is worded implies that we are either skipping those or that we or that it is obvious that the level of AA includes it. But just, again, knowing that that's not always the case, they're not... they don't quite work that way. The level of AA is not necessarily more than an equivalent level of AA rentier. I will talk about these next year. The other thing that you might find on any sort of exercise or a little website, but I am going to do this on the screen. But using my keyboard and everything, I don't know what this set is, unless we're in touch on this and I have some alternative jest. So, these are, and this is where my questions for you get started. So, do all of your energies. It's a simple, easy thing to do. Every time you create an image, everything you have can be shared out at this alt attribute and give a brief description. You do not need to write a paragraph about the exercise. That's probably fine. Nobody needs to know unless it is relevant to your content. Nobody needs to know what she looks like. They don't need to know what kind of room unless you are describing your gym better by all means. I want the better paragraph somewhere. Unless it is relevant to your content, you don't need to get too deep into the description. Just make sure that you know what that image is there, why it is there. Mostly for me, this is probably the biggest thing. It's a managed paragraph. Make sure that your markup reflects the hierarchical structure of the page. Especially if you are having I think it was one of the organizers Fraser really loves and especially if you really try to push the envelope in terms of design. This is where you want to pay attention. The tendency at least in my experience is to sort of sponge the information architecture of your app when you are trying to do something in terms of design and that can really hurt the accessibility of your application. You want to make sure that you are using all of the types that make sense in the context of your app. So if you got a header use a header instead of doing it if you have a button it's a button element. It sounds so simple, but in a production of applications shocking to me how many see that don't do these things, that don't use the semantic markup that we have built into us. And that can be a huge step to the integration in terms of design. Another super simple thing, is that your color especially when you are talking about text could last enough. And that's where the success criteria is. It's an absolutely measurable thing to run through a checker you can run a lot of it and talk about those tools. And you'll know it's not something you have to guess at and then distribute content. So this is where we get more towards the marketing, more towards the copyright side of things. Does your content speak for itself? Are your titles descriptive? Do they display what we all the content is about? Or are you getting kind of or are they catchy? Are you trying to grab someone's attention but not really telling them what's coming next? And my personal technique here is click here buttons or links. When you use a link your the text that you're surrounding in those link tags is what's going to be read in 2% to your screen reader and I'm getting very keyboard. So if I hear link click here. It's not going to tell me anything I put it there. And I want to know before I start cooking things randomly. So we're through some practical applications. One thing that we haven't exactly talked to yet is adding some padding around your clickable elements. This is great for a number of reasons. So one, all the stuff that you're making is responsive, right? Yep. There's been a lot of blanks there. So I don't think the answer is yes. All right, yes. Absolutely. If you don't know what's happening that I'm going to hear responsive websites and applications just mean that we are able to take any cookies and it's going to respond to the size of the device so I can look at my slides hopefully I've never actually tried this. Hopefully I can look at my slides on my phone or my iPad or whatever and they will look reasonably okay. If I'm looking at a site that has got any amount of time to think it's going to look great on either either a mobile phone a tablet or any size of laptop that's happening. It's going to be an insane experience. It's going to be able to lead to the experience that I would get on any other device which is also what we want in terms of accessibility. So in this case this is I mean recently I ran a couple of albums is going to be great one for anybody who's using an automobile device because I personally have very large fingers and I want to give them a click and not the thing next to the thing I want to click on I'm having a little bit of failure on that so you can see here this is a link but that gray area that darker gray area is the clickable area and so beyond the link itself I can see that I'm able to click it's also good if you have users who have lack of motor so if I have a little bit of a timer the bigger the clickable area or less sort of the greater my margin of error I can miss and still hit when I'm going you also want to make sure that you're using your entire application and that's something that you can accomplish if you want to make sure that that's the case if I should be able to tap through every interactive element of your page I should be able to use my screen reader and get to everything so it's does the clicker shift is the screen reader going to know and is it going to start reading in there is the keyboard going to get access to an alpaca the answer should be yes in the whole cases but that's just one example and captions are another so if you have any video content making sure that this is very bad this is a video about making captions on youtube um if you have to do a comment making sure that you have captions making sure that the captions are accurate and there are a number of ways you can do that including if you're paying yourself to do that too so thinking how I consider some of the kind of touch on the first is motor so if I've got a charm or if I'm missing a hand or more hands there are a number of assistive technologies that people can use to continue to be able to access the web and we want to make sure that we are counting through those not just about captions that's really what I'm trying to drive home here here also copying the difficulties that put up some of those barriers is your user dyslexic do they have other the learning disabilities is a lot of moving content or spinning objects that will distract you from the content probably even if they don't have those kind of difficulties like that's probably distracting anyway there are again standards to help you gauge that when you get here are you making sure that there is textual there are textual alternatives to your audio content and in terms of testing there are a number of tools that we're going to have to talk through that we're going to touch on rather than run audit what's my audio here saying I think it's also important to do manual testing as well with users with some of these utilities again that's something that you can hire out that's something that you can solicit and it's also something you can do yourself you can learn to use a screen reader and it works through your app on a regular basis work with your QA it can happen to learn how to do that or even a bunch of people on the lab who are working on making sure that everything we're told is switching controls which is really, really cool please try to get on that but we can't see that we can totally talk to you so we've finished some tools that you can use web-aim color background sticker you've already got colors that you want to make sure are cool run through here and it will tell you whether you need the template or the AAA or both in this case they actually need to use so the AAA is a little more straight come see if you're just kind of exploring and maybe you're building something new with this tool you can paint your background color and then choose the foreground color and the questions that you do will be from client based on the conversation so there's actually an NPM just so if you're working in JavaScript you have another project you can use this to automatically audit your sites and you can run it against your app while it's in development and just keep checking and making sure that you run along with all your other tests and last we have AS which is a tool applied to people and both I've kind of been checking out a lot of their stuff they do a lot of content they do a lot of training so if you're interested in learning more not only is this a great tool but you can put it on their products so your homework for today find one thing that you can do out of all of the things that we've talked about from now on one small thing that you can do to make your apps your work more accessible so research is here please feel free to ask me about these after I will be giving two slides to the organizers so you can follow up with this and you're done great job time for people that awesome so one of my favorite tricks is to use a set using an image I use it as an image background in a way I don't have to force constraints on my people uploading images is that bad for accessibility should I add an alt tag if I'm doing something like that still so yes you were putting the image you're using the image as a background but it is itself so I would know if it did for something and I'll use it as a background image rather than having an actual image there that way I can set it to always cover the open space that it is rather than sticking to what the image ratio is okay I would maybe use CSS for that and yes if you must you can so one technique is to have a screen reader willing office that you then provide to the text that describes it yeah in my case I would probably still just use the image background with alt text personally there's a time for people to use two quotes oh yes so you know so it's clear that way you know your mark will update and her name you only do that you really don't want to do that as content you don't want to be like a meaningful piece of the it's usually that images of the body could be just a background but it's an added value in any way it's called the content best there's never missing alt text but everything I wanted to add is fine language and they content so much more usable and we are accustomed to using whatever we do whatever business we're involved in but those evidence are known to people who are coming to your page explaining the acronym on your homepage but they come to your page and you're using P-A-T acronym that they have no idea what that is so whatever you use and also do you explain language that makes it easier for people to understand and a good example of that not happening often is out of date you know and research images that can be really difficult and obtuse to read then as we said unfortunately it's made it simple for people to read your content write short sentences write short paragraphs use how to use appropriate language to know and now in the UK that if you're specifically targeting customers in the area do you want to say an extra word do you know of any other that you said you're okay I think you're a huh that doesn't happen I mean I would be sort of I'm not sure are doing anything government I can see an education institution there is so there's actually 508 508 508 you are going to follow those not that's all of your your we're going to be in if the session by the way that's passed for the students following so you so thank you