- [Anthony] Good morning and good afternoon everyone. My name is Anthony Priore, the Digital Marketing Specialist at TPGi. We're gonna wait one more minute as people sign in, and we will get started briefly. And I still see a few people trickling in, so we're gonna give it just one more minute as everyone starts to sign in and get settled. Okay, I think we're gonna go ahead and get started. I see some greetings and hellos going through in the chat. It's great to have everyone here. Thank you all for joining us today for our webinar, "Why is Web accessibility Important?" with Vispero's Amy Albin, Learning and Development Coordinator for Vispero. Before we get started, I do have a few housekeeping items I'd like to get to. So, firstly, this session is being recorded and we will email everyone the recording after the event. Secondly, we have captions available, so feel free to use those as needed. Next, we will have time for a live Q&A later in the webinar. So please use the Q&A box and we will answer as many of those questions as we have time for at the end of the presentation. And lastly, if anyone needs any accessibility support, training, or usability testing, we will send out an email with a link to schedule a time to speak with one of our experts. So with that, I'm going to turn it over to Amy and let her get started and provide an introduction for herself. - Thank you, Anthony, for the wonderful introduction. I am Amy Albin. I have been blind since birth and I am a proud JAW user. So that's an introduction for me. So on slide two here, so what is web accessibility? So web accessibility is the ability for people with and without disabilities to have access to the website, and not only the website, but also, the knowledge of how to use the website. So what does that mean? You could have a website that is itself very accessible, but if the user manual for that website says click the yellow notifications button that is an icon of a bell, that is not going to be accessible because to a screen reader, a blind person won't capture that as a bell. They'll just see the word notifications. So both of those things are important. And then assistive technology is hardware and software that allows people with disabilities to have access to mainstream technologies. So not all of accessibility is about technology or the web. Although we do focus on web accessibility in this webinar, we do have a few examples related to other types of accessibility. Okay, so now on slide three, accessibility ends with the letter Y, but it also, has to begin with the word why, as in W H-Y. And then why are we doing accessibility? It turns out that if you implement accessibility for the right reasons, you get better results. You get a better R-O-A or return on accessibility. We'd love to talk about ROI or return on investment, but the R-O-A is a return on accessibility investment. And in the next several slides, we're gonna talk about different reasons for accessibility. So first on slide four, here, we have the moral reason. And this is implementing accessibility because it's the right thing to do. No one should be unable to access a website because they have a disability. And from the moral perspective, if even one person is excluded in that way, it's not fair and it's not right. So if you wanna do the right thing, make your websites accessible. The second reason on slide five is the legal reason. And there are laws and regulations, for example, the Americans with Disabilities Act in the United States that require organizations to implement reasonable accommodations for both their employees and their customers, and part of that is accessible websites. Although nobody likes to talk about it, there have been websites that have been sued because of inaccessibility. And we have a link on this slide discussing some of those. So if you do wanna protect your company, it is important to be accessible for that reason, as well. So now we're gonna have on slide six, a little interactive activity here. I'd like you to put in the chat what percent of the world's population do you think has one or more significant disabilities? So we have Alt + H for Windows, Command + Shift + H for Mac. That's how you enter the chat and put in your guesses there. I'll give you a few more seconds to do that. Okay, well, now I'm going to go to the next slide and give you the answer on slide seven. So the answer is 16%. Imagine if 16% of your potential customers didn't buy your product because they couldn't use your website. They would go elsewhere. Imagine if 16% of your potential workforce didn't work at your company because the job application was inaccessible or because once they got the job, they were required to use an inaccessible website. They would go elsewhere. They might even go to a competitor. If they can't access your services, if they can't access your website, they can't generate revenue for you either through buying your products or through working and bringing their talent to your organization. So accessibility actually gives you a competitive edge. So, let's see. Wait, I missed... I'm just gonna tell you one more story there on slide six. So there was someone named Craig Radford and he wanted to buy a truck. And he knew what truck he wanted to buy. And so, he was deaf. He went to the dealership. He told them, you know, this is how I communicate. They sort of whisked him away and they said, "Come back in a few hours when we'll have "a more affordable truck." Now, first of all, you gotta understand this dealership, we can call it dealership X, insulted him by saying, implying that he couldn't afford the truck that he wanted because he had a disability and that he was not clued in enough to know that he couldn't afford it. Well then he went to dealership Y. In dealership Y, they were very courteous, respectful. They treated him like they treated everyone else and he was able to make the transaction. Now what did Craig do? He told all his family and all his friends about the dealership X that was not accessible and dealership y that was accessible. And many loyal customers previously to dealership X vowed that they would never go there again and many others traded in their vehicles to dealership Y. So this is a concrete example about how accessibility gave dealership Y a competitive edge and can give you a competitive edge. So in the next couple of slides, I'm going to be telling some personal stories. And each of these stories has happened to me within the last three years. So I want you to all, first we're gonna talk about leisure. So I want you all to raise your hand if you've ever heard of or played the game of Wordle. Anthony, you wanna tell me how many hands we got? - [Anthony] Yeah, we have seven up currently. - All right, well anyway, so, Wordle is a game. Y'all can put your hands down, now. Wordle is a game where you go online and you have six tries to guess a word, and you get clues each guess you make. When this originally came out, it was not accessible. There was since an extension that works with JAWS, but the problem is that there are many spinoff games to the original Wordle, ones that give you more options, guessing more words at once, playing more than one time a day. And none of those games are accessible with JAWS. So these games, I love playing with my family, but I have to ask a sighted person for help or to play with me anytime I wanna play that game. It shouldn't be that way in 2023 because entertainment should be accessible. Now, on slide nine, we talk about banking. So I was using an app to send money from one person to another, pretty well-known app, and it was not accessible. So I should be able to navigate the screen and hear the options such as send money, request money, check balance as an example. But actually what I was hearing is unlabeled button one, unlabeled button two, unlabeled button three. So I had no way of knowing where I was and therefore, and therefore I had to ask another person to help me make the transaction, which required that it had to be someone that I trusted both to be honest, and someone that I was okay with them knowing my private financial transactions. It shouldn't be that way in 2023. I should be able to have the independence to send money by myself because banking apps should be accessible. All right, slide 10, we talk about education. I am a recent college graduate. And when I was in college, I was taking a course with one of the major textbook publishing companies and they had a homework website that went with the textbook, which my professor chose to use for exams, to administer his exams. And this website was not accessible. And my professor didn't know how to make the exams accessible. And when we called the tech support line, we got no answers. So what happened was I was required to, instead of taking all the exams throughout the year, wait until the end of the year to take one big massive exam in a Word document to cover all the exams that I hadn't taken throughout the year. It shouldn't be this way because education should be accessible. And on slide 11 we talk about work and employment. When I was in grad school, I got a job at a forensic psychology lab and the job was to be a very administrative type job. We had articles and we wanted to categorize them into different folders, so maybe folders like pretrial detention, youth in the criminal justice system, length of sentence, et cetera. And it was supposed to be my job to read the article or read the abstract, figure out which folder the article went into and put it into that folder. And I was very good at figuring out which folder it went into, but unfortunately the file management system that was being used by the university was not accessible with my screen reader. So and again, so the result of that was that they couldn't get rid of me because they had the inaccessible website, but they put me in a different job for which I was less prepared. And it shouldn't be that way because everyone with a disability who is qualified should be able to work at the job of their choosing using accessible technology. So in each of these examples, from entertainment to personal banking to education to employment, I've shown you how inaccessibility has personally impacted me in my life. And remember, it's not just me. Remember what the World Health Organization said that 16% of the world's population has one or more significant disabilities. So think of my stories and then think 16%. Let's make things accessible. So on slide 12 we talk about reactive versus the proactive approach to accessibility. So in the reactive approach, you are waiting until you hear about a problem. Maybe you get an angry customer, maybe you get a legal challenge, and then you try to fix the problems that are already there. But with a proactive approach, you're making it accessible from the beginning. So there's a a phrase that is by an organization Benetech that is born accessible, which means that it is accessible out of the box. You're making it with it with accessibility in mind throughout the entire software development lifecycle. You don't wait until someone with a disability uses your website because you assume that people with disabilities are going to be using your website. And so, you make them accessible from the beginning. Now we have a chart here on slide 13, which is made by our very own TPGi, which shows that while the reactive approach is less costly in the beginning, you're actually gonna get a better return on accessibility over time with the proactive approach. That's what that chart shows. Now, you may be wondering, I am a totally blind JAWS user, how do I know what the chart says? Well, what I'm gonna do now is I'm going to share my sound and show you the answer. We talked about what's not accessible, now let me show you what is. Let's do this. One moment. - [Screen Reader] Your screen sharing meeting controls. - All right, you should all be able to hear JAWS now. - [Screen Reader] PowerPoint slide show. - Anthony, you can hear it, correct? - [Screen Reader] Slide 13 dash retrieved. - All right. - [Anthony] Yes, that's correct. - All right, perfect. So I want y'all to look at this chart. And by the way, before I start showing you, it's gonna sound for people who are more familiar with JAWS, it's gonna sound very slow. I have it at the slowest setting for those who might not be familiar. But keep in mind that I ordinarily listen to JAWS at a much faster pace. So we have the chart here. Let's listen to how JAWS describes- - [Screen Reader] Slide 13, TPGi Proactive versus Chart demonstrating the level of effort for two opposing management styles, left paren, proactive versus reactive, right paren, across the ASDLC, left paren, plan slash design. Develop slash build test image. Deploy slash release monitor and remediation, right paren. Proactive shows higher level of effort in the early stages of plan slash design, but overall reduced efforts over time image, versus quote reactive quote, which shows less effort in the early stages, but significantly more ongoing remediation effort, image. - All right, so what you all just heard is something called alternative text, also known as alt text. And JAWS did not figure that out on its own or generate it automatically. But the person who created the chart added that alt text in there. And what it is, is a special feature that allows screen reader users to hear a description of the image while it is being displayed while the image is being displayed on the screen. So we will get more into that in just a little bit. But while we're on the subject of web accessibility, I wanna give you a little bit more demonstration of how I might do a web search. - [Screen Reader] Windows end, desktop. - So I press Windows end. - [Screen Reader] Folder view. - Y'all know I use the keyboard, I do this fully by the keyboard. I don't use the mouse at all. - [Screen Reader] G, Global V-P-N-G. Google Chrome. Enter address in search bar. Enter, bland. Google dash Google. - When I got to Google and I heard that pop and that's how I know I am in the edit field and I can type my question which is. - [Screen Reader] P-E-R-C-E-N-T space O-F... P-O-P-U-L-A-T-I-O-N - Disabilities. - [Screen Reader] Enter percent of world, alert- - Now, we already know the answer to this, but I did not know the answer to it when I was preparing this, I had to Google it. So what do I do? I go, I press CTRL + Home to get to the top of the webpage and then I press the letter H. And what's cool about the letter H is it takes me through the different headings. It's a very useful key. - [Screen Reader] Access filter, featured, snippet, key fact, disability dash World Health Organization, left paren, right. - All right, now that's the website that I want. But let's just pretend that I wanted to see what else is out here. - [Screen Reader] People also ask heading level World Report on disability 2011 heading- - I know that's not what I want because it's over 10 years old. - [Screen Reader] Disability inclusion over heading left fact sheet disability. - And then I can cut it off. I can cut JAWS off by pressing the key quickly. - [Screen Reader] Disabled. - But okay, let's go back to that website. I'm going to go back in the other direction. I'm going to press Shift + H. - [Screen Reader] Disability World report on- People also, Disability dash World Health Organization. Enter. Disability dash World Health Organization, left paren, W-H-O write, dis- - Now when I go onto this website, I can also press H. - [Screen Reader] Disability Facts heading, list of bullet, an estimated 1.3 billion people experience significant disability period. This represents 16% of the world apostrophe S population comma, or one in six of us, period. - There you have it. And I wanna say a definite call out to this website. One thing that makes it really accessible is that the heading structure allows me to press H and find what I want. You might have heard about heading structure and wonder why you have to do it and that's because if you don't do it, I won't be able to find what I want and skim by pressing H. I'll have to, you know, press my arrow keys down the whole page to find what I want. Even if you bold it and make it look visually like a heading, if you don't implement the heading structure, JAWS won't pick up on that. This website does, so that is very good. Now let's imagine I want to, you know, put this finding in a Word document to summarize it to someone, Alt + D. - [Screen Reader] Alt D, address insert copy selection. - Alt + C, so I copy the link, then I- - [Screen Reader] Search box W. Word add enter. - Document. - [Screen Reader] Menu, blank. Escape, leaving menus. Document one blank. Space, one, six... Enter. Pasted from- - And... - [Screen Reader] Top of file. I found that 16% of the world population has one or more significant disabilities. The link is below: H-T-T-P-S- - And there we go. We don't need to read the whole link, but it's there. And then if I wanted to, I could save that document. I'm not gonna do that, but what I am gonna do is, you know, that should have been a good demo so you can really see how web accessibility works when it is working properly. I'm gonna show you one more thing that you can do to be part of the solution in less than five minutes. - [Screen Reader] Disability, PowerPoint screen posted on May 16th. Webinar link dash word. May 16th webinar. Mysterious picture two of three, enter. - All right, so I'm opening a document and imagine someone sent, someone made this. It's a post, it's, you know, an email, it's something. - [Screen Reader] Here is a cute picture to make you smile. Bland, unlabeled image. Bland. - What is the picture? - [Screen Reader] Unlabeled image. - Unlabeled image. Very disappointing because y'all see a picture here and I have no idea what it is. But there is a solution for that. And I actually have a description that this person wrote for me and I'm gonna demonstrate how I turn that into alt text. - [Screen Reader] May 16th webinar link dash word, the mysterious May 16th webinar, May 16th... Mysterious picture alt text from me may, enter. Mysterious picture alt- - I'm going to, I know this is what it is, the only thing here, so I'm gonna CTRL + A. - [Screen Reader] Selected. - To select all. - [Screen Reader] Copied selection. - CTRL + C. - [Screen Reader] May 16th web, May 16th, mysterious picture dash word. - Going to select the image with CTRL + Shift + O. And since I know it's the only one there... - [Screen Reader] Please wait, processing one items. Inline objects dialog. List one, list view, creator, six, enter. Mysterious picture selected, unlabeled image, six, Shift + F10, cut, remove through items. Press up or down arrow key. - Right-click for applications key or in my case, Shift + F10. And then I know that in this menu... View alt text. But I also know that this is also where I can add the alt text. - [Screen Reader] Enter, leaving menus, mysterious picture, alt text, description, edit. - I'm going to make sure it's empty. I'm going to paste with CTRL + V when I copy it there. - [Screen Reader] Pasted from clipboard. - And then I'm just gonna press escape. - [Screen Reader] Escape, a cat sitting- - Now, let's see how it is now for me. - [Screen Reader] Here is a cute picture to make you smile. Bland, a cat sitting on its belly with its striped legs out. The cat has large round eyes and slightly drooping ears. Image. - So that is one thing that you can do when you are, you know, creating products, posts, emails, tweets, whatever with pictures. You can write a description to make it accessible for people with screen readers. It's not the only thing, but it is something very simple that anyone can do with minimal training. Okay, so. - [Screen Reader] Mysterious picture alt text from- - I'm going to go back to my slide show. - [Screen Reader] From May 16th, May 16th webinar document, disability dash PowerPoint, slide show slide. - I'm noW going to stop sharing my screen at this point, but I do wanna show you my last slide. And I'll give you a sneak preview of how I make a presentation and listen to JAWS and also say what I'm saying. I'll have you note that it was on the entire time, I just didn't start sharing my sound until I was ready to do the demo. - [Screen Reader] Slide 14 dash- slide, slide 16 dash conclusion, colon. - All right, so this is just a wrap up of how to get a positive R-O-A or why you get a positive R-O-A when you use a proactive born-accessible approach. - [Screen Reader] Using list of several bullet, reduced accessibility, cost- - Reduced accessibility costs because you are doing it from the beginning; it's part of your regular process. There's less cost than something that you have to add at the end. - [Screen Reader] Bullet, decreased costs of lawsuits. - Decreased costs of lawsuits and legal challenges. - [Screen Reader] Bullet, increased revenue from customers with disabilities. - You get increased revenue from customers with disabilities and increased- - [Screen Reader] Bullet, increased brand loyalty. - Brand loyalty, so, remember the dealership story where, you know, he had told all his friends to go back to the dealership that was accessible and they never went back to the other one. - [Screen Reader] Bullet, increased diversity of talent. - You'll also get increased diversity of talent through your workforce, that qualified people with disabilities will be able to work in your organization. And a lot of people with disabilities have learned to adapt to a world that's not made for us. And while it should absolutely not be that way, those skills of adaptation and innovation are also crucially important for how to make the next big decision in your business. So, you definitely want that diversity. So, there is a benefit to that. - [Screen Reader] Bullet, satisfaction- - And finally, the satisfaction of doing the right thing. So, when you put all these things together, implementing accessibility in your websites gives you a positive return on accessibility, a positive competitive edge. And that concludes my presentation. And now if anyone has questions, Anthony will read them. - [Anthony] Thanks so much, Amy. So, yeah, as Amy said, if you have some questions, please go ahead and share them in the Q&A box now and we'll be happy to answer them. Yeah, it's a really informative and educational presentation, Amy. I think everyone enjoyed it a lot. - Thank you. - [Anthony] Okay, so we do have a question here. Jacques wants to know, assume that an image on my website is non decorative and it includes important text. Assume that the text is 500 characters. How many text characters should I include in my alt text? - Okay, so here's how I'm gonna answer this question. So alt text does have a character limit, but in that case I would say just create the, you know, just put it in plain text on your document, you know, just put the text and that way everyone will see it. You could put it above the picture, below the picture, and the alt text could be something like see full text description above or below. And then if you have any more questions about that, someone will follow up with you if you want more technical assistance. But thanks for the question. Any others? - [Anthony] Reading through them now, a lot of compliments and praise over your presentation. And a couple of them how informative it was. I'm not seeing another question. - All right. - [Anthony] Someone would like to connect with you on LinkedIn. Looking for a website tester who's totally blind and uses various screen readers and browsers. My manual testing work is where accessibility meets usability. And then they linked to their account. - Okay. - [Anthony] But it appears that is it for questions, so. - All right, perfect. That's awesome. - [Anthony] Yeah, so thank you all for attending. Okay, we do have a follow up here real quick. Sorry. The dilemma is for Jacques who was following up on- - Okay, yes, Jacques. - [Anthony] Alt text question. The dilemma is that the text is easy to read for a sighted person, to reproduce it above or below the image would aggravate viewers, I believe. - Okay, so I, you know, I would say that it probably, it may aggravate viewers, it may not. You'll never know until you try. But again, you know, someone else can follow up with you on the more technical aspect. But the one thing I do wanna comment is a lot of people say I can't make my website accessible because, you know, it will make it worse for sighted people, but a lot of times it is actually found that when things are accessible it makes it better for everyone, you know, for sighted people and for people with and without disabilities. So it does add value to everyone, generally speaking. But thanks for the question. And we can have someone follow up with Jacques on the specific issues regarding a website. - [Anthony] Yeah, we will certainly reach out to you afterwards, Jacques. But otherwise, I think that answers all of our questions. So, Amy, thank you for a wonderful presentation. And everyone, thank you for attending and have a great rest of your day. Oh, sorry, real quick. One more question. We had one just pop in last second. Someone's asking about reading a map. - What's the question? - [Anthony] It says, how would you read a map. - How would I read a map? Okay, so those are hard to do online, you know. But, you know, I've had tactile raised line drawing maps on paper, but that is something, you know, on the, you know, if it's technology, if it's on the web, you know, if you could give, you know, descriptions. I like Excel spreadsheets to sort of give me a spatial layout because you have the rows and the columns there that you can figure things out at least two-dimensional. It's not a perfect answer, but that is the place to start. And then if you can do a physical raised line drawing, that can be helpful, too. - [Anthony] Follow up question would be like, reading the data table? - Yeah, data table. So JAWS is able to read spreadsheets in Excel, so that does work. Like, I use a up and down arrow to go, you know, up and down, and then then left and right to explore across. And then there are different commands like, go to like, which is CTRL + G to go to a specific cell and other things like that, as well. - [Anthony] Okay, great. You're getting a ton of compliments and praise in the chat right now, Amy, for your presentation. So job well done. - And if you could send that to me, that would be awesome, too. - [Anthony] Yes, I will absolutely send them to you afterwards. - Perfect, thank you. - [Anthony] But thank you all for attending and have a great rest of your day. Bye now.