 So according to the Cambridge Analytica, what is accessibility? Some fact to be able to reach, understand, obtain something, right? And we see a lot of accessibility applied in our day-to-day life. Like the wheelchair ramps to the buses or wheelchair ramps to the buildings, to some, I don't know, like shops, etc. And the question is, why not make the same for the websites? Why not make websites accessible too, right? And what is actually web accessibility? So the initial definition states that people with disabilities can perceive, understand, navigate, and interact with the web. But after digging into this topic a bit deeper, I changed it slightly because I think everyone, it means that everyone can perceive, understand, navigate, and interact with the web. And web accessibility has four core principles. That means that your website has to be perceivable. And that means that all information presented on your website should be perceived by any user. So for example, if you are like hard of hearing or you're deaf, and the website has some video content, so the user should be still able to perceive the same information using the video captions, a parable. So there are users who don't like to use mouse, for example, or they can't because they have broken their arm, so they prefer to use just keyboard. And your website should be a parable, so that means that all the actions that you can do with the mouse, still you can reach the same effect just using the keyboard. Understandable, the content operation is understandable in performed and predictable ways. So I think nothing more about that. And robust, so you know, like the all, like technologies evolve every second, every moment, like people tend to use different devices, different user engines, different browsers. But your content on the website should be still accessible regardless of which device your users use. So, but why is it important, like, why I'm breaking this topic to you? So I really like this quote from the team Berners-Lee, it's the inventor of the World Wide Web. So he thinks that the power of the web is in its universality. Access by everyone regardless of disability is an essential aspect, and I really support this quote, because you know everyone in this room are going to get aged. You're going to have, like, low vision, hard of hearing, and everyone in this room at some point in our life will need to use the website, and we will need it to be accessible for us. So that's why accessibility benefits for everyone. And a little more statistic, do you know that, like, 20% of users of people, sorry, World Wide, they have some kind of impairment? And it's like 1 billion users. And it's like every 6% on the world. Quite a significant number, right? And 70, around 70% of users with disabilities, they click away from the website with access barriers. So at the same time, they display this income, like, $12 billion to some other accessible websites. So what I want to say is that what we create is useless if it's not accessible. And while we're talking about accessibility and we want to implement it, it's important to know what kind of disabilities can your users have. Another four common types, like visual, it's people from low vision to the totally blindness. Auditory, it's from the heart of hearing to total death. Motor mobility, you can have, like, injured, your wrist, broken arm, or you have the paralyzed body. And cognitive intellectal, it's like you have some impairment with development skills, with logic, with memory, like dyslexia. And I want you to consider these three persons. Please, raise your hand. Who do you think, like, this of three people has some limited mobility? So raise your hand if you think it's a boy in a wheelchair. Raise your hand if you think it's a girl with a broken arm. And raise your hand if you think it's a woman with a big back of groceries. If you raise your hand three times, you're correct. Like, have you had, because, like, all of them, three of these persons, they have either permanent or temporary or situational disability. And have you had the situation when you were, like, holding some back of groceries, and at the same time you were trying to do something on the phone, a bit uncomfortable, it's hard of using. But I want to, you know, this, like, moment of, like, when it's uncomfortable. And I want you to remember this moment, because for people with some kind of impairment, this, they feel it all the time when they use the website, which is not accessible. And so the people with disabilities, they use some software and hardware which helps them interact with the web. And this is called assistive technologies. And there is, like, wide range of them, like, it can be bright terminals for the blind users, or screen magnifiers for users with low vision, also eye tracking devices, specific touch screen devices. And also you have, you know, the Stephen Hawking who had used the really big range of different assistive technologies. And the most popular which are screen readers, the software programs that people just install on their computers, and they read aloud everything displayed on the screen. And the most popular for Windows are the Jaws and VDA and Rater, Orca for Linux, WhiteSoft for macOS, and Chromebox for Chrome, which actually works for NOS. And, you know, like, this, this topic of accessibility is very, very broad, and it's really easy to get lost in it. So we really need some guidance on this journey how to implement it. So the World Wide Web Concerts, which is more or less the government body of the web, they created the Web Accessibility Initiative. And they created the Web Content Accessibility Guidelines. It's the most popular guideline with the kind of documentation which can be really, really overwhelming, but I really advise you to get through it because it has covered all the important topics which needed to help you to implement accessibility to your website. And how is actually assistive technologies works with the website? How do they help people? So you see, we have the application and you know, like, the web page is transpired to the dump tree and at the same time, it's transpired to accessibility tree. So the assistive technologies, like screen readers, they can consume this information from accessibility tree and translate it to the user in a meaningful text. So for example, if you use UL Analyze element on your page, which are the list. So assistive technology, it will know this is a list and it will just save the user. So this is a list of three items. But what if you want to build some kind of the menu? And in the same way, we can use the UL Analyze tags to build the list and style it a bit. But still, like, the screen reader will tell that this is a list but we want the user to know that this is, like, the menu. So wouldn't it be cool to have kind of these attributes, like role, very specific file that we have the role menu and the menu item. So this is possible through the area attributes. And why area is a specification? They define additional set of attributes that can be applied to HTML elements and they improve semantic and accessibility and add additional accessibility where it is lacking. So area stands for accessible rich Internet applications and as I said, it's just a set of additional HTML attributes and they also have the very rich guide where they describe in details how and when to use these attributes. And so how the accessibility tree will look now is kind of adding these augmented attributes and it makes more rich accessibility tree and so the assistive technology will get more information from it. So as I said, area is just a way to add missing semantics and there are, like, three types of these attributes can be roles, like menu and menu item, states, like, for example, if you have the combo box, it can be expanded and collapsed. Also the properties, they just describe some characteristics of the element and they like a bunch of them. And don't get started out. We'll go with baby steps and it goes through the more core principles which will help you just to make some initial improvement for your accessibility. So the first one, declare the language. All you know is attribute length and this attribute is not only great for the sale or for the translation tools, it's also very great for assistive technologies. So you see I have this paragraph and I added the length in French. So when the screen reader will go through this paragraph, it will switch automatically language to French and just will read it with correct pronunciation. Second, use semantic estimate. So all you know is tags, like divs, pan, that are widely used, also like buttons, footer, section. So we kind of can divide them to semantic and non-semantic. And usually we tend to use like div instead of button when we want to build the button. But better to avoid this and if you want to build button, use the button tag. So I want you to consider these two looking similarly buttons. And if I read the button on the left with screen reader, it will just say search. But for the blind user, what is search? What is the intent of it? Is it a text? Is it somebody know information? Is it a button? What the hell is search? So it's just because I used the div tag and I added just this text and style it so it looks like a button. And then for a second, it will read search button. And because I just used the button tag. So it's not only advantage of using button. For example, when you also add on click handler and you know like for the button, they are already built in on key down handlers. So when you do, when you're pressing the space or enter it will trigger your on click handler. But in case of using div, you will have additional handlers for the on key down. So better to use like just what is already built in and it's ready for you and better for everyone. And also navigation landmarks. The navigation landmarks, it's very useful to show organization and structure of your page. Like using nav, like tags, main, header, using headings. So the system technologies like screen reader users, they report when they first time land on some unfamiliar page. For them, it's very useful to navigate through different sections of the page to get information what is the website about. And they just use this like pop up the open with from screen reader and they can jump to different sections and get information from it very easily. Tapkin navigation and tab order. So what is a tab order? The order in which elements are getting focused when you press the tab, it's called the tab order. So you know when you have some form and you're filling some inputs and you're pressing tab, the focus goes like in correct order. And the elements like input, button, links, they have this tab order. They implicitly are in this tab order and this element can get focus. But for example, if you build some interactive element, for example, combo box and you use a deal, but the user who just use keyboard, they still should be able to get to this element. It should be focusable, so the users can interact with that without mouse. So for this purpose, and to make the elements focusable, you can add the tab index equals zero. So it explicitly adds this focusable behavior to the element. And the bad practices also, like using outline known and float right, is for breaking your focus. Let me show you quickly a small demo. So I have here the three paragraphs and as you see I added tab index zero to them, but in real life you will never need to add tab index to the paragraph just for interactive elements. So you see I can tab and the focus goes from left to right. And usually what we can do, like in CSS for example, we want to move some element and if I add float right to the first paragraph, it will be the last one. So when you try to tab, the focus goes again to the first one, but it looks like the last one, so the tab order is broken. So never use CSS to move your elements. Use CSS just to style your elements. If you want to move something, just move it in the DOM directly. And also, like you see the button has also this focus and sometimes like designers can say, like this focus ring is looking like not good for the design, it's not matching, let's remove it what we can do like we said outline on. So when user tries to tab, this button is in focus, but the user will never see that the button get focus, so he has no disinformation. So instead of just removing outline, try to style it and try like to match this, like you always can style your outline, your border, but the user still have disinformation that the focus is on the bottom. Like I style it, it looks ugly, I'm bad designer, it does an example that you always can make changes for that. So moving forward, using area attributes. So here we have a guy in two buttons. With his trash icon, we can assume that we can, when you click on it, it will remove something, but for the blind user, he has no information and he can only rely on screen reader. And for the button on left, screen reader with button. Why is that? This time I used button tag, but there is no text, there is, I just added this icon like with styles and that's it. And for the another one, it reads delete button because I use this area attributes. So as I said, area adds additional semantic and for example, use area label and the screen reader will read everything that you can put inside it. First, control focus with keyboard. So for example, you have some selectable list and it's like long list. So very long list, it's very, very long list. And you probably don't want your users to tap through all the list list and tap shift back. And if you want to go somewhere, back to some sections upper, it can take like enormous time. So try to avoid it. Just add navigation with arrow up and down between the list item. And use like tap and shift up between like bigger sections. So it's more like intuitive way for navigation with keyboard. The sixth one, keep color contrast. There's like standard of the reader for the small text and the large text. But you'll never can remember this numbers. So there are like many, many checkers online where you can check the color. For example, this checker is from the web aim.org. It's a very great website with a lot of resources around accessibility. They also have this checker. And you see this test felt with the light gray on the dark gray. And I made the text a bit lighter and now the test pass. So it's very easy to check. And isn't it beautiful? Oh yeah, I really like it. So keep in mind the color blindness people. Like for example, the green, red color blindness. So for this person's text on the left, everything will be just gray. They wouldn't see anything. So keep it in mind. Then with green and red. And for example, for this presentation, you know, like when it's everything like color selection should be done on the design stage. And for example, like for this presentation, just use the background, foreground and accent colors. Just few colors which keep this contrast and they are good for everyone. Sorry. Testing a tool. Of course, when the Neoplement Accessibility is supported to test it. And there are a bunch of tools for that. And a lot like browsers, extensions, AxeWave and Lighthouse. And you may know that Lighthouse is building in-depth tools in Audit's tab. So there are like many, many tests that can be run against your website and to check if you complied accessibility standards. And also if you want to automate your testing and you want to run the automated test on CI doing every like merged master, you want to check if you haven't broken any accessibility things. The AxeCore is an open source library which you also can use for that purpose. And of course, some manual work. Like for example, for the users who are using JustKeyboard, try to go through your website JustKeyboard. Can you perform all the actions that you can do without mouse? And download the screen reader, take a sleeping mask, go to Google, try to search something. How far you can go? Just try to fill it how it is. And also recommend the Snowcuff extension. It's really, really useful to test some visual effects like some blurry or for people like with low vision. And for the rest, keep calm. It's a lot of information. Accessibility is very, very broad topic. And as far as you go, as complex it can be. But sometimes don't give up if you can make some element accessible. Like just try to think what, how you can do it in a different way. How you can bring the same information for the user but doing it in a different way. And just try to search for alternatives. And remember that small changes make a big difference. When you just replace your divs with a button or add additional area attributes, it's just a small chance but already a big difference for someone. And this is like the resources I really, really recommend you. But I will share you this presentation later. And the best tip for today is like style all your new project with accessibility in mind because design is always cheaper than redesign is usually more effective. And now it's your turn. So I wanted to be aware about it so you can start. And every change you make, it's already a first step to make your website, your product user friendly for all of your users. So set the standard in your industry and keep accessibility in top of your mind every project you start or any redesign you make. Now it's your turn. Thank you.