 So yeah, hello, I'm gonna talk to you a bit about accessibility and yeah, the most important thing I would say is That we should yeah, not think about accessibility as an afterthought or as a thing that we do for people with disabilities I mean we do it also for these people, but it's good for your app or for your application and Website in general. So it it makes it more stable and it makes it more searchable and makes it more usable actually so This is cool gang on the on the internet called the W3C and they wrote these web content accessibility guidelines And yeah, so if you ever see someone flash this, you know, they know about web accessibility so you're in in good company and Yeah, these accessibility guidelines if you have read through them sometime They're pretty long and they can be pretty complicated. So if you're already tuning out There's some pretty good tools including Wave, Axe and Lighthouse that you can install as browser extensions And it's very easy to remember because that's exactly what you need for really bad B-list horror movie So that you can install So the four rules of the web content or four main things of the web content accessibility guidelines is Something that we're gonna go through real quick So you know how to use these tools and how to interpret these issues So this is about perceivability of your app about operability about understanding ability and about robustness So let's just start with the first one perceivability It's basically about yeah being able to see or that the screen reader can see or interpret what actually goes on in your app and two things they're important to talk about there is Easiest thing that you can do is with your next app Just use our core CSS variables that we have so that the contrast like For example, you have variables for for color for text color and for primary color and when you use that Automatically the contrast will be proper to wcag a a a is like a level for conformity And then another thing is having meaningful outtext. So oftentimes These extensions will tell you there's no alternative text and then it means you have this out tag missing Oftentimes the only thing that's needed is actually an empty out tag So for example, if you have decorative images or something But whenever there's an icon like an action like an edit icon where there's no text next to it You need to have an alt tag with Explanatory text like edit or edit comment or something Okay, next thing is a probability That's basically pertains to keyboard and mouse or any other input methods Yeah, there's two big things easy things that you can check with Easiest thing is unplug your mouse deactivate your touchpad and just test with a keyboard use the tab key to switch along the different input elements and use enter to Activate them as a click basically and that already. Yeah Makes it clear it makes clear a lot of problems that you might have and then the other thing is of course Also, don't forget the mouse Yeah, we have this rule of 44 by 44 pixels minimum clickable area that comes from The mobile guidelines, but it's not only for mobile It's also for desktop because yeah, people are not all exact and Yeah, some more space for clicking. It's pretty cool and The third thing is understandability and yeah, basically one of the big things is make your app translatable There's some people I won't mention them by name They can help you with that But yeah, I'm just pointing in the general direction We can help you with translatability and Yeah, make an app translatable because it's always easier to For people to use in their language and then also don't use jargon like don't use the disk floppy disk icon for meaning save For example, like no one of the generation after us or even now generation knows what a what a floppy disk Or your L for example a URL no one knows what the hell that is just called it link for example And I know you're already saying oh, it's a different thing. Yeah, no one no one And the first thing is robustness. So yeah, use the standards again like look through our design documentation This is yeah documented elements. Yeah, John's very happy about that So for example have navigation other elements popovers It also makes your life much much easier and whenever there's updates It's much more robust and then we have the good old H2 and poly elements that you can use It's just web standards basically and Yeah, that's basically how you break barriers, but I hear you Can we automate all this? It's so difficult and to that I say no problem made There is an MPM module for acts that you can set up with your CI process and Yeah, you use I think was looking into that So whoever wants to help them with that, please talk to him And yeah, there's a blog post also by the axe people and access also open source for example And then if you want to know more, there's a really great website called accessibility project calm It's a one one one project calm. That's how you abbreviate accessibility not a very accessible acronym But actually I need to change the font of the two ones to make it even visible that it's Once so anyway go there really good tips really easy to digest and yeah We already had a the workshop so a lot of people can teach you how to use acts Thank you