 So hello, folks. Next up, we're going to be spreading the DevRel team at Microsoft, and we'll be talking about accessibility for all, and programming for accessibility. Thank you so much, and it's always great to be here at Parkcon. This is the third Parkcon that I've spoken on, and it feels like family. It's such a close-knit community, even more great reason for us to do this talk here, because if we're a family, then we want to actually bring everyone into the talk, and the talk I'm doing today is very dear to my heart. It's on accessibility. I have acondroplasia, I have dwarfism, I'm four foot one, and I've been speaking on accessibility in programming for the last four to five years. In this talk, you can follow it. I've got all the slides, the demos, all of that. You can go to aka.ms forward slash four dash all. You can use the QR code. It is going to be available at the end when we do Q&A. You can also follow me on at Rory Pretty, and just a brief introduction, I'm a developer advocate for Microsoft. I'm actually a Java developer, but I also do accessibility advocacy, and you'll see today that I'm doing all of my demos in Python. Yeah, I know. Let's get started. Having dwarfism, I've always had to bolt on my worlds, and these are my car pedals on my midlife crisis, my 335 by BMW. That's really the story that I want to tell you today is that accessibility has also been handled as a bolt-on, being able to look at it after the fact. I now make a plan. He has me lecturing at a university and trying to reach the screen, and he has me trying to get some coffee. You can see that I really like coffee. I know as much as whiskey, but I like coffee. We've also seen this happen a little bit in the software industry, and people have been tired of doing bolts-on. The first kind of real change that I've noticed when it came to accessibility was the inclusion of agile into software development, because agile also promised to change a lot. You can see here, he has the manifesto for agile software development, and it says we're uncovering better ways of developing software by doing it and helping others to do it. Through this work, we have come to value individuals and interactions of the processes and tools, working software over comprehensive capabilities and documentation, customer collaboration over contract negotiation, responding to change over following a plan. That is, while there is value on the items on the right, we value on the items on the left a little bit more. The agile manifesto really came about because people wanted change, but the problem was that what we saw is that the change didn't happen exactly like we wanted. He has an agile open office where someone put a fish tank in it. Can you imagine having to clean that in an office environment where the fish suddenly decided to be more agile and jump out? We've also noticed with agile, with software that we have whiteboards everywhere, and these magnificent whiteboards that now you have to learn how to clean and use the right cleaning material. We also learned how to post sticky notes. I've been on two courses, two courses on how to post sticky notes, and you hold the note in your hand, you take your finger, and you slowly kind of push the notes off and take it off to not disturb the glue. But what is going on? Why did I have to learn about sticky notes? When all I really wanted to do is create agile and accessibility, but the truth is that we all suffer from the same hydro, the same kind of bugs that came about. If you don't know the hydro, it's a Greek mythology, whereas if you chop the one head off of the monster, another head kind of grows up, and this is the same with accessibility, that as soon as you chop one bug off an accessible bug and you program towards it, another one actually comes about. The promise of agile may have not really happened, and this is the crux of the talk is. Instead of bolting on the software to make it do, how do you start and actually get your software being accessible from the start? Once you have accessible software, and once you have your agile process, then you can also look at how you start with aligned autonomy. If you don't know aligned autonomy, it takes alignment and autonomy, and it gives people three different purposes, autonomy, mastery, and purpose. Now, with autonomy, mastery, and purpose, it gives people the need to actually create accessible software. It's also part of Ikigai. Ikigai is the pursuit of what you love, what the world needs, what you can be paid for, and what you're good at. Now, accessibility, you might be asking, what does this got to do with accessibility, Ori, because if you look at accessibility and you say, hey, who wants to make accessibility software? Put your hands up. The only people put their hands up are preachers, bank robbers, rollercoasters, cops, and DJs, because unfortunately, agile is not the only problem that we have to do. We also live in an empathy bubble. Now, you've never been a dwarf like me. You've never had dwarfism. You can't really understand what it's like to have to create software for me because you're just not living in my shoes, and that's called an empathy bubble. So how do you get around that? And we're going to take, look at agile, we're going to look at how to incorporate agile, and also how to use agile methodologies to cater for and remove that empathy bubble, because if you don't remove that empathy bubble, when you try to chop the hardware's head off, you're going to fail, and you're going to create an inaccessible software that we don't want people to actually use. You can see here he has an example on accessibility fail, where they try to create a wheelchair ramp, and obviously they didn't actually manage. So I've got a plan. I've got a plan for you today. We're going to define accessibility. We're going to understand your organization's unique accessibility motivators. Then we're going to set achievable interim milestones, and finally we're going to implement tools. And once we implement the tools, we're going to measure and improve and automate with those tools. I'm going to show you some DevOps tool chains. I'm going to show you the immersive reader, some very nice demos that we're going to go through. So let's define accessibility. Accessibility is the design product services environment so that everyone including people with disabilities can feel experienced. Now that's not designing for accessibility. That's designing for everyone. And we believe at Microsoft that once you do that, you do inclusive product and service design, you actually innovate. And I'm going to show you the process on how it creates innovation when you program with everyone in mind. In truth also, we need to define disability. Now, disability is not a personal health condition. When you go to a doctor and you say, I'm not feeling too good. He doesn't say, hey, I know, I think you have the disability. The only time that you have disability is if you have a mismatch human interaction. Now, I bought a BMR scale. I've lost 16 kilos recently. I jumped on the BMR scale before I lost that weight. And I put in my details, four foot one, and I weighed 66 kilos at the time. And I put in all the details, and I clicked, you know, measure me. And it caught me horrible names. And I felt disabled at the time because it had mismatch human interaction. So that's accessibility and what disability. Also, there's principles with accessibility. The first principle, and these are based on the WCAG, the Web Center for Accessibility Guidelines, is perceivable. Can you see it? So if you have visual impairments like I do with my new fancy glosses that I have here, can you see it? Operable. Can you use it? So motor impairments. Understandable, can you understand it? And we've also seen the inclusion of ADHD and autism spectrum in also accessibility preparations. And finally, robust. If you're going to create accessible software, it can't break when you have future technologies, especially since most people who use accessibility software don't actually use it on portrait mode. They use it on landscape mode. Now that we've got our definitions, let's look at our motivators. First, stick and carrot. So stick is if you're going to tell a dog to do something, you can either use a stick and pound them or you can use a carrot or a piece of meat and you can tell them what to do. So the first is the stick, the legislation. So the 21st century digital experience act from the American federal government. And then the EU parliament directory on digital accessibility that says that by next year, if you don't have accessible software and you're publicly facing a civil sect, meaning government or a civil society, then you can get up to like the what the Canadians have done $100,000 per day fine. Yes, stick. But I like to think about the carrot rather. And it's best summed up by the quality of life quote by Bill Gates, one of our founding chairmen. For most of human history, we put our innovative capacity into improving the quantity of life more, more, more, more. Because we're living longer, our focus is starting to shift towards improving the quality of life, making an altruistic approach to make things better. And once you have that the quality of life, then you can also start to look at the awareness of other's difficulties and start instead of pity, go to sympathy, empathy and compassion. Remember what I said to you about that empathy bubble. And you create and you pop that bubble by looking at your customers and your people that use your software. So here is something called empathy personas. And in these empathy personas, we have Claudia Ashley and Ron, Ron is a 82 year old retired, multiple conditions arthritis, losing his hearing, failing our sites. You take these personas, if you create persona labs, and you look at your software, and you try to actually get out of that empathy bubble by applying them, you can go to that URL that you see there and download these software, these personas. So once you have your personas, then you look at the inclusive design steps. First of all, we recognize exclusion. You create your persona spectrums, and then you superimpose them on your software. You solve for one extent to many with the persona spectrums. And finally, learn from diversity and adjust your software platforms to cater for that. So we've got our persona spectrums. I think I've got an MPT who has lost an arm from an accident. Then you have an arm injury, someone on motorbike accident who's got a temporary disability, and then a new parent. Because we know all new parents financially, mentally, physically, all kind of have accessibility issues. So you've got these persona spectrums. If you go to your manager and you say, I want to cater with someone with an MPT, and he's going to say, but there's only 26,000 of those. And this is the U.S. Center for Disability Statistics. But if you look at the temporary numbers, there's 13 million. And you have the situational, there's 21 million. That means that if you cater for one persona spectrum, you're actually going to cater for 21 million individuals. Now, when we look at the broad people who have accessibility to requirements, there are over 3 billion people. There's 1 billion people with accessibility requirements. And then there's an additional 2 billion people who are heavily invested friends, family loved ones, who really want to see that software be used by their loved ones. That means that if you don't cater for accessibility software, you're really negating nearly a half of the world's population. Once you've got your persona spectrums, then you superimpose them over your software journey. So the software journey that we have here, you've got a ticketing scenario, registration, navigation, and check out with not exactly in the COVID climate, but to buy an airline ticket. Now you've got the Omnidry and everything changes. You've got when you go in the beginning, you've got Responsive Designer, Capture for Registration, Font and Color Options, Accessibility Help Desk, Single Sign-On, Callback Help, Voice Search, SMS and Email for Ticketing, One Button Access, and an AI Adjustment. Now I did a talk on sarcasm as a service. You can go look it on my YouTube video and I showed how we're creating AI that has become more sensitive to individuals. Because if you start screaming at an AI saying help, help, help, and the AI doesn't respond in a sensitive manner, it can't actually be a part of your process. Once the AI also understands that, then adjust your flow. Let the AI go and adjust the flow and really change it for their person's personal accessibility requirements. Let's look at the next section, which is milestones. So normally you've got your milestones, which is accessibility right at the end. Remember the bolt-on with me and my coffee and jumping on there and my 335R. And the accessibility, you've got the SHIPL project and you send it through. But we've seen a new move to shift left. And shift left really says instead of a large investment at the end, do a small investment throughout the process, test encoding, design and backlog. And you now actually start to see that we're adopting agile. We're adopting an agile accessibility process. We've looked at how to burst that empathy bubble. And now we're doing it through an agile process. We do that also and through that process without tooling. The first tool I want to introduce to you is X-Core. Now we've partnered with DQlabs and a lot of our accessibility software uses the X-Engine. And we've open sourced our software, which I'm going to demo to you also. And the X-Engine is a JavaScript line where you can run it from any other language also. I'm going to show you how to run it in Python. It's an NPM package. It scans a rendered DOM. So whether you have a web application or a Windows app or even an Android app, it will scan your application, reports back results at JSON and the same engine as accessibility insights inside your code. And I know what you're thinking, wait, why can't I use this for DevOps? Yes, you can. I'm going to show you how to actually use this in a DevOps engine. So you've got your developer in your DevOps pipeline. You do your Yarn test as part of your release pipeline. Then it tests your page. It might be a touch script in HTML. And then it actually runs in Selenium or servers, et cetera. And then prints back the results in your HTML errors. And you can see here, it has it running in X pipelines. You can go and play around with it, gitapp.com, Microsoft, X dash pipeline samples. You get your results back there. You push them through to the testing team or your development team. But that's if you want to do testing at the beginning of the development. But what happens if you can't? If you can't actually test and you've got an existing site. Now, introducing the immersive reader. Now, this uses our cognitive services in the background to take your site and to convert it for you without you really having to do much effort into a accessible software that is WCAG 2.1 compliant. And what it does is it scans your page and uses cognitive services to create a rendered version of that page that is accessible. Now, you're using it already because you're using it in Microsoft Teams, in Microsoft Office, in Microsoft Excel. It already is there. So you just click on immersive reader. And it gives you the ability to create an immersive experience from your inaccessible software. So what can it do? It has multiple language. And I checked it has Hindi. It has Arabic. It has English. It has all of these different languages. And it can give you the ability to also to be multilingual. It has translation up to 60 languages and more every day pronunciation. And it reads back that. So it can actually do reading back in a language and also a voice of your choice syllable breakdown and then finally also pictures. So you can get and this is being used heavily in our learning environment for our schools also because kids also want that immersive experience. So enough talk enough slides. Let's do some demos here. So let's get out of here. And I'm going to minimize that if I do make mistakes on my Macintosh. This is only the third month that I've got a Macintosh and I'm still learning. So the first demo I want to show you is a page here with accessible and inaccessible. So the accessible version here. And this is a W3.org the accessibility home page. You can see here that this is the accessible version and it's got alt tags and it's got the right font and everything. But the inaccessible version looks exactly the same because all they've done there is that they've done terrible HTML here. So if I go look at the the list I can see and I go inspect, you'll see there that with the inspect they've used BR tags rather than lists lists tags, which is terrible, which means that a screen reader would never be able to read that. And also on the alt tags, if I mouse over there, it doesn't tell me what I'm looking at. So screen reader can't see it. Now I'm going to use this little icon here and that's free to use the accessibility insights for web and that uses the X engine. I can click on that. Now it's got all of these other options here, automated checks. You can go all the way through to if you want to do assessment to give you a very detailed assessment that you want to that you want to do. We don't want to do assessment right now. We want to do fast pass because I'm going to show you in under five seconds how to check with your accessibility. I'm going to click on fast pass. It's going to run through. It's going to tell me what's not accessible here. And then I'm going to go back to my page and it's highlighted there. Now I've got all of my page there and I can click on that. It's going to say there's no alt for that text. You can inspect HTML. You copy the failure detail or file the issues and I can file it all the way through to GitHub and tells me how to actually fix it. I can also go and look at navigable and I can click on that. Tab stops. And if I want to tap through here, and this is the inaccessible page, you see that the tab stops just ends there. But if I go to the accessible page, then you can navigate there. You can click on tab stops and you can see how that page there is accessible. And I can go through that. So this is accessible inside for Edge and Chrome. And now let's put this into DevOps and let's put this into Python. I've got plenty time still with my demo. And the first demo I want to show you is, no, not that one. I want not the floss demo. I want to show you how to run this with, there we go. Yes, in your DevOps tool chain. So I've got a page here that I created in page of HTML. And if I look at this page here, so let's go validate open, I want to open this with open integrate terminal, open that. There we go. No, I don't want to do that. I want to just open this in Finder. Okay, well, you can kind of see. So it's got an HTML page. This text box has no accessible label and it's violating a rule because you need a label. This one, the color contrast is too low. And this text has an invalid role attribute. So role attributes are used to actually tell screen readers what to do. So this is a bad HTML site. And I've got this page there. And I want to run this now in my, my Python fixtures here. So you can see there, I've got my Chrome driver. And then I've got my test example page here. This is all available in the links that I've sent you. And I'm going to run this against there. And it's going to bring back in my DevOps tool chain, the errors that that page actually had. So I'm going to run it there. And I'm going to run all my scripts there. And I actually want to run it once. And then I'm going to debug it. And I'm going to show you what happened. So it ran and it failed. But now I want to check exactly why did it fail. And it stopped there. And I can go look at my data. You can see the violations there are exactly what I thought would happen. So let's go back into data. And we want to go violations. You can see they all ensure elements have a valid role attribute. And it gives you all of that details. And then in JSON, then you can actually go there now and send that back to the developer. And this is available in the accessibility axillenium tool chain that I sent you. And so, so that's in DevOps. But what about immersive reader Rory? So we've looked at how to test it on the front end with your testing team, how to do it in DevOps. And the second one is the last one, sorry, is how to do this with the immersive reader. So now I've set up immersive reader beforehand. And I've used the tutorial here. So start the immersive reader using the path ensemble project. You can access that in Azure cognitive services. And I created my immersive reader beforehand. And it's pretty human. It's free for the first million times you use it. And then $10 afterwards though. So it's pretty, pretty great. So I've got this immersive reader running there. And I've tied it into it. And I've integrated it with my project. Let me just close this. Go my project there. And not that project. There we go. And I've got my app.py. And my app.py then just gets my secrets to speak to my immersive reader cognitive services. Pops my message. And then J7ifies the results. I've got my index.html there. And the index.html has some text there. The immersive reader is a tool that implements proven techniques to improve reading comprehension. And then it just calls a JavaScript to get the token and then handle the immersive reader and then pops up the immersive reader. And this is everything you can get online via that tutorial. Now, to run this, and this was a little bit difficult, not knowing Mac and everything like that. I had to run Flask. Run. Had to install Flask. Had to read that. We'll run. Oh, okay. Of course it's not going to run. Let's go to bash. Bash. Flask. Run. Okay. It's running on port 5000. Now I'm going to click through here. Come on. Click. And let's move that into that. Just went into the wrong screen. Minimize that. And we want this, the immersive reader path in a quick spot. Yes. But we want you to come into this screen. There we go. No, that is already in this right screen. Move to built-in written. Okay. So now I've got the text that we created about immersive reader. Remember, immersive readers are tool that implements proven technologies. And this isn't maybe not fully accessible. And it's got some languages there also. It's got Chinese and Arabic. Now, to click on that, that's just the button that I selected and make it bigger. And I just click on that and it goes in and it scans my page. It creates an immersive experience. Hopefully the Lord demos actually works out. Connect to my cognitive services. And I've got an immersive reader. And I don't know if you can hear this though, but it's actually going to speak. Immersive reader is a tool that implements proven technologies. So it actually is reading it out to me. And I can go in and change the font size, do the text preferences, the grammar options, the reading preferences. Also, I can click online for a focus, choose a language. So let's do this in Hindi. There we go. By document. And it will go and translate. Hopefully that will work. There we go. And I can mouse over there and get the English version of that. And that's everything with Azure Cognitive Services. I just translated and made it immersive into Hindi. So that was the demo that I wanted to show you. It's a bit bigger. So in conclusion, we still have a bit more time. I haven't taken too much of your time now. Empathy. Empathy bubble. And being able to really, really create those persona spectrums. And let me just correct. I know that there's questions. Get your questions ready so far. Let me just find you. There we go. So get your questions ready so far. And let me go back to PowerPoint. There we go. And pop that empathy bubble. And create those persona spectrums. Then next, shift left. Start testing. You've got all these testing tools that I've showed you today. You've got the immersive reader. You've got the accessibility insights. You've got the testing tools in Python using the X engine. And then automate. Creatability to measure and automate your process. Thank you so much today. I look forward to your questions. Please, if you can, send me some questions. I'll be on Zulip also to take your questions. And let's do exactly what we want to do. Let's create the world that we want to live in. I can't hear you. Oh, sorry. I was muted. Thank you. So they're not very interesting at all. They're some very amazing tools. Hope you can use them for that. So now let me know if you have any questions. Right now, no one has any questions. Okay, well, homework. Yeah, homework for you is to go to the and do the path and demo that I just did. So you can access that path and demo and you can go to HTTP aka.ms forward slash for all and start playing around with the immersive reader, start playing around with the X engine. I'm not a path and developer. I did all of that and got it working in half an hour on my PC. I've got immersive reader, I got the X engine, and I was very impressed. It's got really great path and support. Now, if I wanted to create a path and script for a customer, I can create that immersive reader, click on it, and I would cater for those three billion people that had accessibility requirements. And I could do it even if I wasn't a path and developer. So you're following me on Rory pretty, and I'll leave the QR code here. Thank you so much for everything today. We're waiting a little bit for some more questions. And then I'll take some more questions on Zulip. Zulip is very busy. Wow, there are a lot of people in there. I'm like, I feel like a kid in a candy store. I want to say hi to everyone there. There's a thousand people on there. Thank you for that talk. I hope you see more accessible websites with Zulip. Let me chat again. There's still no question. So maybe you can read on Zulip. We'll take the questions there. And I'll hang about. I'll be in the Microsoft booth also. If you want to come to the Microsoft booth, we've got some wow incredible speakers. If you want to catch Chloe Condon and Cassie, and if you missed Chris and everything like that, they were just incredible speakers, really experienced advocates and great stuff to show you today. I think Daniel is also having a special time now there. But after this, in five minutes, we'll be starting with the lightning talks. So head over to the back of the booth stage. Until then, you can go to that working within the sponsor booth during the Microsoft booth. And they'll be meeting you after the after the lightning talks and after the time 30 PM.