Video details

Ran Bar Zik @ ReactNext 22 - Accessibility in react


ReactNext 2022 Israel's Annual React & React-Native conference
Powered by EventHandler ----------------------------------------- Accessibility in react: Accessibility is not a. charity, and it is an important feature to implement in our application. In this session, we will talk about accessibility and accessibility in react. What automated tools are we using in popular testing libraries (both unit and e2e) to test react components? How can we mitigate a11y issues, and why should we do that? The participants will learn: 1. What is a11y and how it works with react 2. a11y unit testing tools 3. E2E testing tools. 4. a11y with storybook
----------------------------------------- Ran Bar Zik: Software Architect, Journalist (Ha'aretz), Lecturer at Ono Academic College and Haifa University, Author of "Learn Node.js in Hebrew", Father of 4.
----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment


Today. It's a very interesting talk. It will be about fortune, it will be about horror. It will be about accessibility. Yeah, I'm trying to walk around, by the way, I'm sorry for my accent, you know, bowatt. Who am I? My name is LAN Bozek. And the most important thing to know about me that I am a metalhead is one. Yeah. And another thing that I'm a senior software developer at Saluto. If I was in Spain, I was a senior senior software developer architect. And if my last name was Senior, like Ellisino from channel twelve or 13, I was senior software architect, principal. Yeah. It is a day joke, by the way. There will be a lot of day joke. So this is your time to get out. And beside my work at Salut, I'm also a full time journalist in by the Way that I want about tech stuff. Also, I wrote six of the books, all of them in Hebrew. I'm a [email protected], by the way. I'm a terrible wonderful designer, by the way. You can see by the screen. Also I'm [email protected] It's also in Hebrew. I'm father of four, all of them in Hebrew. And we both think by the way, is in the audience, I hope develop it out. And today we are going to talk about accessibility and what I'm going to show you today. Wow, it's going to be a hell of a show, I hope. First of all, what is accessibility? And most important, why it's important to us to understand accessibility. Also, how to create a short introduction about why it's very hard to create accessible components in react with a short code demo, live coding, not really live because I cheated. We would get branches for that. And the most important stuff of the lecture is basic and advanced tools of debugging analyzing components, an entire layout, very interesting. Developing tools and also automated testing and continuous integration tools. This is what I'm going to talk about. So let's start. So what is accessibility will be in this cloud? It's okay. What is accessibility? Accessibility, it's very simple. When you open Wikipedia and look on the accessibility, it's making your site accessible to anyone. But what it means accessible, so it means that anybody can use it. But a lot of people think that accessible is only for people with visual impairment. People that can see very well, but not it's not only for the visual impairment. It's very important to understand that. It's also, for example, like me, I'm old, when I need to click on the small buttons of this application and press and then they pop up and then occurs. Okay, hearing impairment. And people that don't hear very well, a cognitive impairment. People will say Dyslexia, for example. If you push tons of text into their face, they will have hard time to use the application. So it's very important to note know that accessibility is not only for visual impaired people it's for a lot of impairment. When we are talking about accessibility, we have a standard I know it's pretty basic for you, but I will delve on it's important to lay the foundation. So we have the WCAG or waka. Waka has several versions, 2.0 versions, several layers, AAA. Which version should I use? Well, it depends on your local laws. In Israel, for example, you should use at least 2.0 and AAA, it's dependent on the website. In other countries, it's different. How should I know? This is why we have lawyers. We talk with a lawyer and then ask him, yeah, oh yeah, ask the lawyer what version should I use? And then it looks up and tell you the answer. And this is the standard Ed alert that you have to follow. If you look on this link, don't follow this link you will see that the WCAG is a huge document with a lot of interaction regarding the HTML and the attributes and all the stuff. It's very complicated documentation. Let's start to follow it and then we'll not follow it because it's very, very long. We see how can we create accessible even without reading the entire documentation. But before we start working on accessible components, let's first try to understand why do we care? Okay? Of course we care. Because we are decent human beings, right? This is our responsibility as a developers, as human being, to make our site interface, application, whatever, accessible, that everyone should use it. It's important, right? We are developers, we are decent human beings, right? Right. But some people are not very decent. But it means nobody here is product, right? And when I'm coming to my product and then I tell them we have to be decent human beings, but I have the backlog and we need to deploy this feature tomorrow, and tomorrow is Tuesday. If they didn't care because we are decent, but they are not any product here, right? A lot. Don't tell them that. Okay, so we have another argument. We have another argument, okay? It doesn't work our clients. As I said earlier, accessibility is not only for the visual impaired people, it's for a lot of impairments. About 20% to 25% of the population has impairments. And if we are skipping those 25% were losing a lot of money. For example, if I have, for example, $40 million of traffic moving through my application and I'm skipping about 25% of them, or 20%, or even 1%, it's a lot of money. When we are scaling up accessibility matters in terms of products understand very well money and we can't afford to lose it. If, of course, for example, we have 100 people in the application, it's okay. But if we have more, it's very important to catch everyone. Also, accessible interface is nice for everyone. I took myself as an example. I don't have any impairments. But if the buttons are big and clear and there is a contrast, it's much nicer. And if, for example, there isn't any sound interface, it's very useful. When we are surfing the web at 12:00 A.m., doing whatever, it's very useful that you don't have any voices, right? Right. And if I want to watch some video, it's nice that we have subtitles, right? Even if you don't have any impairments, it's nice. Accessible sites are much more nicer, but products sometimes doesn't see that. So we have another argument. The Internet here doesn't work well, we can skip it. Yeah, reload, no dismiss, nothing works. Okay, so we have another thing, the law. Oh, nice. We have the legal and the legal guys are not very nice. And we have legal obligation to make our site accessible, our interface accessible. And if we are not making our site accessible, what will come eventually? The nice C and the system. Someone got it in the past. Well, it's not a very nice experience. You're sitting in your home relaxing Friday night. They always do it in five day night, by the way, like the Cyber Security Guide. It's horrible. And then the product, of course, call you and say, oh, the loyal conduct. There is a 2 million schmacul's lawsuit against us. Deal with it and say what? How? In this lecture, I will tell you how and how and why. But it will come eventually. If you are scaling up, if you are creating interfaces and they are not accessible, the CIS and the CIS will come. And then we'll have to pay. And we don't like to pay. Even products doesn't like to pay. Especially products. Okay, so let's start. How to write accessible react components? It's very hard, but I will show you, okay? I've created yes, I created a react component. I used the KPI Top. It's very nice. Here it is. It's very complicated one. Just close the DevTop. Okay? It's a tab component. Everyone knows how to create a tab component. It's in the Korea causes phase one. I click on A. I click on B. Click on C. Very nice. If it's accessible, let's see to help you develop an accessible software, I'm using the Screen reader add on. You know, the screen reader. It's a small add on. I hope it works okay. There are a lot of screen readers, by the way. There is a Mac screen reader, there is a Windows screen reader. But I prefer that one. The Screen Reader. Just type screen reader. It's very popular. I don't think it's actively maintenance, but nobody cares. No, it's working, I don't care. You can use whatever screen you want to. And then it's operated. And when it's operated, I hope you can understand extension leave. Here it is. I hope that you can hear it. No, you can't hear it, but anyway, it's weird. And also you have the outline, the focus element, it's in the origin. It's very easy. You don't need to listen to it all the time because then your neighbor to the cubicle will kill you eventually. But then you can click on tab and see if it's focused. If you can access every component, every part, it's not bulletproof, but it helps you. Let's see if my simple component use the code. By the way, it's a tab. I created a tab style element with anchor and tab group. It's extremely simple. It's working. Is it accessible? Let's see. I'm going to the React app, clicking on tab and really clicking on tab. Something happening. No, I can't navigate with arrows. So first of all, it's not accessible by visual impaired persons. But also it's not accessible for people without mouse. For example, Linux guys like me. I don't have any mouse. Mouse is for present, but I can use this in place interface and then I'm getting angry. Sorry. If someone really likes mouse sorry. Okay, mouse is good. So how do I make this thing accessible? Right now? We cheat and I will add some accessibility features. For example, that one all and tab index. Allen tab index are defined in the Wece. And when I'm adding those attributes to the interface, to the tab interface and I have the whole presentation here, I can use tab. Nice. Yeah, it's a customer. Very easy. End of lecture. No? And then I want to choose option B and then I click on Enter. God damn it. It's not working. What should I do? Okay, I tried a little bit and then I remember that I'm using the anchor element in the tab here. Enlarge it a little bit here. And if I want to use anchor, I need to use Ahref to make it clickable by Enter. Let's do that. I've already done that. Okay, so in the tab group, I just added Ahref. I can change by the way the tab from a to button. But right now, I just added ahref. And then if I click and press Enter, it charges yay almost. I want to use my arrows. I'm clicking on my arrows. Something happening. No, I don't want to click on tab, I want to click arrows. Why it's opening? What do I need to add? Okay, I will not edit. Why? Because this is in other lectures. Okay? I have lectures for creating. We will talk about that but I will stop here. It's hard, it's really hard to create accessible components. Look, it's just like tab components. It's a very simple component, right, everyone? And look at what effort and I need to remember that I have tab index and read all the WCG. It's not working like that. So what is the solution? When I want to create atomic components, what should I do? I will try to scroll a little bit. Yeah. The best solution use component library like CAA react Material UI. Everybody knows react material UI, right? Okay, so component library if you look on the component library here, if there is a small icon of WTC. It means that it is accessible. What the problem with material UI, by the way? That it's very not flexible in terms of design and every other component library. It's very strong opinion about the design and what's happening. When you want to implement something that is strong opinionated about design, who will come to you? Not a product, much more terrible person. The designers. Wow. Elan is here. It's a designer that come over here to hear my lecture and he will kill me after that. But the designers come and no, it doesn't have the fuxia color. What? No, the round. I want it to be rounded black and then we need to change it and wrap it up. It's hard. You can use React material UI in the hook to make it a little bit more accessible. But there is another solution called Reactit. I will show live demo. But Reactit, it's the small here. Okay, jimmy, try to imagine React. It's a small logo by Versailles. Reactit is a component library. It's amazing. Okay, reactit is a component library that agnostic to design. It means it's only bringing you a basic HTML, but accessible HTML. Let's do some live coding. No, I'm not coding, but I will show the live demo. Okay, so this is reakit tab. As you can see, I provided the style component, but I used the Reactite component, but I needed if I will not pass any style component, it will be styled horribly. I don't care, but the designer care about it. So I need to provide some style element, which is okay. It doesn't opinionated like the react material you are, and I can quite use it. It's very solid component library. It's very nondopinulated regarding the design. I will need to provide my old design, but it will work. Let's see. In Live yeah, you can see that even the arrows are not locking on my keyboard, but my arrow is working. And if the screen reader walked, you should read this is tab a one out of three, completely accessible. Yay. So using react it all react material. I will make a component library. My component total accessible. It's amazing. Right? End of lecture. No. Let's imagine, like John nUnsung. Imagine that there is a place that all the components are accessible. No religion too, but no designers too. No products as well. But I've created two amazing fully accessible material accessible buttons. And then by the infinite wisdom of myself, I've put the two buttons one to top each other. Is it accessible? No. I cannot click on the two buttons because they're very close. For example, I've chose terrible colors. Is it accessible? No. Or in my infinite wisdom, I decided to put a huge sound element when you enter into the site. Is it accessible? No. Okay, so how do I test accessibility? So, we have several tools that allow us to test the entire interface accessibility. The first one we probably know it is Google. It's really short demo. Okay, so probably know Google Arthouse has come built in with the dev tools. Most of the people use it for SEO or stuff like that. But you can also use it for accessibility. It's very simple one. You just check the accessibility, click on Generate report. It takes a little bit of time and it gives you a scope and wow, it's working like here. Most of the time it's much more faster, but it gives you accessibility score. It's very hard because they use reaction. But even issue. What is the issue that I didn't choose? Enough contrast in the header between the tab name and the tab background. So I have here an accessibility issue. You can implement it in the CLI. There is a CLI implementation of Lighthouse. But it's kind of annoying because as a developer we also need to test and it takes time. And if you have crappy Internet, it takes more time. There is another tool called the Q Depth tool or X dev tool should work. X is the engine, the test the accessibility with code, with HTML and also with visual marks. And this is how it looks. You just scan part of the page, which is very important, and scan of my page and scan it. And then it gives me more issues. It makes five issues. The queue depths that can install X dev tools. It's made by accessibility company. It's better than the Google Lighthouse because it's time more issues and it's much more faster. You don't need the Google items to run all over your accessibility, all over your web page. It's very nice to use. So those two tools are very handy when you're creating components by yourself. But there are not enough in terms of continuous integration. And also when you're clicking on stuff and stuff changes. We need to test it. How do we do it? Okay, we can do it by just, you know, just nobody knows. Jess. Oh, come on. You are not testing yourself. Do uni testing. Oh, God. Okay. Suggesting very important. Do a coverage, at least 85% coverage. It's helped me a lot. I'm an old developer and testing is important. Extremely important. Why? I don't like to get calls in the middle of the night. Something is not working. If you like to get calls, don't test, but please. Okay, so just if nobody use it, know about it. Jest is a big is really a cool testing library that everyone should use it with KT app, with neck JS, with whatever everyone uses. And you can use just to check accessibility of components. Yeah. How? With just X. Okay, so this is justx it's just x is an NPM model that you can install like every other just add on. So you can install that one. You have to add the expect extend to have no violations. You can put it in the before all or in just config file you can also configure to proper versions of the WCAG layout or something like that. And this is how it looks like. It's just a simple jest test. You render the HTML and then you expect it to have no violation. Here it is not very complicated in Saluto, by the way. In every component testing that we have, of course all the components testing clicks, opening it's not opening, it doesn't have the attribute, but we also have that one. Pay attention. That the XJ x using the X engine and it tests only the HTML, not the coloring. It means that if I will test that one, that one knows that the entire interface has accessibility issues. We will not get any errors. Let's see live demo okay, I'm using NPM, sorry, not Yawn. Basically like any other jet is running with the other jet testing and it will pass. While it will pass and not give me any variables because it tests only the HTML testing that we have all the proper attributes, the tab index, the tab role, everything is working. I can also test every HTML that I want to. For example, the entire application. If the component changes, change the HTML. If I click on something, something open or something closed, I can do the click and then test for a violation. The result just HTML. You can put any HTML that you want into the jet X. Yay. So my problem solved? No, because I don't get any results on the resolution or the entire interface. So what should I do? I need to do end to end test. In the primitive test we have the unit test and then we have the end to end. And what should I use regarding end to end? Cypress, thank you very much, appreciate it. It was great. Selenium in the old age, in the Dark ages and you use Jquery. Sorry. So Cyprus, if nobody knows about Cyprus cyprus is a really cool end to end framework. Really appreciate it. I enjoy working with it in private of course in Solo, in Verizon, I worked with it. It's really cool end to end framework, probably have to it's nice to play with it. If you didn't have time to play with Cyprus implemented, please do it's end to end and you can do a sanity test. And also really complicated flow. So how it looks like. So we have cypress x. It is add on for Cypress. You install it with any other side and after you install it, you need to put it in. It's very complicated. Put it here. This is the install process. I know it's hard. By the way, the entire code will be available in my GitHub just after the lecture. So after that you put it in the X, in the Etoe JS, you put it explain in the documentation cypress X and how the test looks like. Let's run it. I'm so nervous because the site is very race. Okay. Okay. It's opening the Cypress program. Cypress is a small browser. You can choose whatever buzzer that you want to. I will use home and until it will load up. Come on. It's very nervous. It's working. So let's look at the code. This is the test code, by the way. Everyone that knows Hypert can understand it quite easily. The person that doesn't know Cypress can understand it quite easily because of JavaScript. Okay, I didn't even use the TypeScript for that. Sorry. So you visiting the site and then you need to do the inject X. Again, the X engine is the basic engine, the check accessibility. And then you check that one. Check Ali. Check accessibility ali a eleven Y because developers are lazy. So check Ali and then it gives you the indication. Let's see it live and choosing Chrome. And of course it can be implemented in your continuous integration. Very, very nice. Hey. Just opening and load the test. And will it give violations? Yes or no? Yes, it gave violations. I know that you are amazed, but it gave violations. It can be run in your continuous integration. It's amazing. Along with the jet X, along with the developing tools, along with other tools. It is very useful. Let's discuss about one more tool. I will not do a live demo. We have the end to end, we have the unit testing. What do you miss? The linking. Well, I love linking. Right? I love linking. I could link my life away. So we have the eslin plugin. Jessica ally. It's a plugin that you can install with your Eslin and it evaluates the JS six HTML of entire component. And you can find other stuff in the linking process. So if you want to create a nice flow Es Lind unit testing end to end. And when we are developing, use Lighthouse or the queue integrate the Q A devtool. So to summarize, because we all want to get food, accessibility is not that hard, but it can be hard. Maybe it's not a good idea to try to implement it yourself. Another important tip when you are using tool, any tool of accessibility documented in your reading other accessibility in your project. Why? Because it's the best effort. When the laws come, you can say to him, yeah, I'm using just X, I'm using Cyprus X. I'm using data that and that and that this is my best effort. And then you can continue with your Friday routine. That's it. It's very important. Please remember, that's it, guys.