Welcome to the conference. So we don't have any further ado. Let's get started. Our intro react accessibility, essential for developers, how to make website accessible for everyone. yeah, little about me. My name is Rohini Samara. I'm from Indonesia. I work as a software developer, but right now, currently, I'm assigned to front end deps. Atelcom Indonesia and I've been working in it industry in web development more than five years right now. yeah, and I've been specialization my, in, in my skill in front end. you can also follow along with my links, my social media. I have a podcast as well on YouTube. You can listen. There's a code of cares. you can follow me on the link in Instagram or check my website as well. yeah, that's about me. Let's keep moving. So today's agenda, the topic that we're going to cover up is, this is the main topic. So there's six main topic, but also each main topic has a sub topic that we're going to cover up as well. One is what is accessibility, how user navigate a website. Three is the third is like accessibility principles. What are the benefits to all of this and how you measure the outage web for accessibility? We're going to see in real action. Of course, in this topic, we're going to do with React. And then we're going to also see how test your components to pass in accessibility aspects. All right, so let's keep moving. Let's dive in. So first thing first, what is web accessibility? Okay. And what is the accessibility itself? When you're saying the accessibility, you can also like pronounce Ali or a 11. Why? Basically it's number name, number password, yeah? If you count it, there's character 11 in there. So it's same kubernetes, like k4s, and also internalization, like i18s. Yeah, you can also check, other things in number name, but the accessibility itself has the meaning of the quality of being able to be answered or to be accessed by the public. Including, people with several. So when it meets web, it combined to something like web accessibility is when you tooling, when you design, when you develop your website so that everyone can access, can, use your website, including people with disabilities. More specifically, they can like proceed. Understand, navigate, interact, even contribute to the web itself. There is some quotes from Maripet Tadapo. she was like one director IBM back then. People, for people without disabilities, technology make things easier. For people with disabilities, technology make things possible. If we take a look in this modernity days, yeah, technology make things easier for people. For us, for people with disabilities, for people with disabled, technically make things possible, even better. in the past, we never thought that we can get this, get those things, but like now it's always a better when it was designed for disabled. Then it also make better for everyone else. For example, in real life case, you know the story behind the clear cut and sidewalk So it was back then it was back to the American pattern in World War two They have back to the country Some of them end up in wheelchair So they have to walk with wheelchairs and walking stick but when they want to try to Go to the road, there's no like curb cut so they can, walk, or answering to the access the sidewalk. Okay. they need to go to the edge of the road to find like ramps or something to lift off their weight. But, and then they wanted a fairness. So some architect design, like the curb cut in the middle, right on the road. So when it was Designed for disabled. It's also made things better for everyone. If have stroller or bike with you, you can just leave off your things with you along the way with, going to the sidewalk, not, you don't have to go to the edge anymore to find the Rams or something. And the other real life case is the talking calculator. it was meant for people with vision problems. And then if we see the application right now, it was like, it was like, inspired from the calculating the talking calculator. you can right now, go to somewhere without any, without having no. the path of the place itself, you can just guide it by some navigation in your pocket in your phone, right? Because there's the same concept, the same technology they use, which is tech to speech or, voice to tech system for us to take a concept. The other thing is the caption, closed caption or subtitles. Right now, you can just easily understand how people, talk or speak in the contents because you actually turn on the closed caption and you understand, without any, hardly to know it anymore. So how we get involved with this community? what we can do about it? How can we make? we're better place, but we need to understand first how actual user navigating the website, right? Before we jump into, how we built the website can, accessible to all the user. We need to also first thing first, we need to know how actual user navigating the website. First, the answer is to this using the assistive technology. And adaptive strategy when you're saying about the, adaptive strategy is more to the, Peters on your web application. you have, Jumi and Jim out many magnifier. Settings on your application, you can change the phone color, phone size, setting, etc. It's like more strategy of your, how your website approach to the problems. And, when you're saying assistive technology is more combining of the software and the hardware itself. All right. So like this, hardware like keyboard, touch screen readers. even more, more, more expensive, device like SIP and POP device. Yeah. so many, so many headwear, so many, devices that can be used for, disabled people. But the common things, they face in, in, in real life case, the common problem they face is lack of keyboard accessibility. And the website. So when they're trying to, navigating the website, especially for, physical disability cases, the company is the easiest device for them, which is the keyboard. But in the field of reality, keyboard is not fully support by the website. It just, few percent, I know in the world website, they can. The, access by the keyboard. So for example, they want to navigate in the website, but, the keyboard is not functionally, correctly in, in that, in those website, the other common problem they face is lack of visible focus. The keyboard is there, working, but they couldn't see, which, the item, or which, the page, or which the button they currently, hovering on, or, yeah, they couldn't see which, the focus they, Right now, stay. Okay. And the other thing is the focus order. Maybe the focus is not, it's not quietly correct, like when they trying to hovering or navigating to button A and then the focus is in the button B or something like that. So it's just quite a problem, right? And the other problem is for visual and physical disabled. Disabilities is the same, the keyboard accessibility, like a visible focus and focus order. So here's this example of the expressive device that are, as if technology that I mentioned before is zip and pop device. The other thing is physical and personal disabilities, also they face the same problem, but right now there's some additional, which is the anchor links and buttons, and then I'll, the third, the second one is the illogical. Focus order and for possibility focus and least not, but last but not least is the missing the alternative contents. Okay. So for people with problem in their visual, they couldn't find. Alternative content for like their images for their, tags or for their voice. So, this is problem for them when they want to see the image, but. The, but the website couldn't tell what is in the image because they missing the authority, which is a problem. So the other thing is physical and physical disabilities. Is this, this case is completely blind. the problem is the same like previous, but there's some, additional like unclear structure. Yeah. Maybe, the structure of the website is not fully correct, which is also, it is a problem. the other thing is for low vision people, the camera problem they face is the phone size is too small or maybe too big and the contrast on the colors to four. And also they, relying on the colors or maybe like. the color is not good when you see it with your eyes or something. And also the animation and the moving one is like too fast or something like so many animation. So it's also a problem. The other case is the hearing disabilities with people problem with people with problem in their hearing disabilities. Maybe the common problem they face is there's no closed caption, there's no subtitle, no transcript. Even in the higher level, maybe there's no sign language in your contents of the website. the people with the hearing disabled can. Can understand, cannot understand about the topic that you're trying to, communicate or inform last but not least the case of hearing and cognitive learning disabilities is also the same. So people with problem in their cognitive learning disabilities, maybe, the cost caption, subtractor, even in the higher language sign language is not there and not in your content. Which is a problem. So we need to fix it. How are we going to fix it? We can fix it, in, in, in taking real action, in the next slide. So we need to also see first the principle of the accessibility itself. After we already know what kind of those problems, we also can break it down to this principle as well. So the principle of accessibility, there's four principles. One is perceptible. The first is perceptible. The second one is operable. And the third one is understandable. The fourth is the robust. So are we going to explain it one by one? What is the perceivable? The visible mean can the information of the content can be present in different ways, like in braille, different text size, text to speech, all works on different, device or ways to present. For example, that we saw earlier is if, If your user can see the image, you need to provide the alternative content for those people. For example, if you, missing the alternate content in image, you can also add some alternative text to your images. And the other thing is if you, if your content on the website is time based media, You can also add some transcript or sub subtitle, closed caption to the content. So the people with hearing disabled can understand what's actually content that you're trying to, inform to their, okay. Today, the other thing is adaptable content. So make sure your website is, can be, adaptable to the, to its content. like. the header is, will be always there and the content can be scrollable. Okay. yeah, the point is, this content is, so shouldn't be, losing without any information. And the other thing is make sure you have this string of this distinguishable content. So when you have like different state, like active, inactive, The user can see the difference in your pages or in your form. So for example, if they see an error, they should have see an error like this. When the set is inactive, they can also see different, content in here. This, for example, is mute, unmute, something like this. Okay. So the other principle is operable. your website can functionality can be used in different modalities. Which is like we saw earlier, it can be keyboard accessible. we can use tapping by the touch screen, something like that. And also make sure you provide enough time to you, the user to see your content or to read the content, with enough time. because many website, when they providing the slider or something, the slider configuration is too fast. So the people can, the user can read or can see the enough time for that slider. another thing is avoid seizures and physical reaction. Like we saw earlier, it's like too many animation in your website. It's not good. You need to keep it down your animation to make it all, good or, great for all the user. the other thing is not visible content. So make sure your website, can be navigable navigate. So do it's user. they knew where they are. Like if they're trying to navigate to fry same badge. then you also need to mark that your web or your page is currently on the pricing page, which is, you can use different color in the, tab on your website. pages activated and yeah, and for my little, this can be input by various beyond a keyboard like touch screen, mouse, keyboard, et cetera. The other point is understandable. It mean, your content information on your website can be, understand. And by it's simple language, for example, you can write your caption, your wordings is, to the point. So make it easier, to research, to read something and also make sure your website is predictable. like the header is always on the top. The footer is always on the bottom. Don't make it your website. Can be like, every. Every visit page, every change the page, the layout is also changes. Like when you are on the homepage, then the header is on the top. When you go to order somewhere else page, then the header is like going to the bottom. It's not good enough. because it's not. Predictable, the content is not predictable, which is, we need to avoid that as well. And the other thing is input assistant. when you saw inputting like long form, they need to have info system. What should the input that are going to fill in? Like when you entering email, you have Having the input assistant for example, you need to palliate your email using the app and blah, blah, blah. And then also you can provide like, how long for the password, what can be used in password and what can be cannot to be entered in password, something like that. So that's the input assistant. And the last but not least is the robust. Robots can mean can be, your website can be, access in different sides, like in mobile device. And smart TV or in your smartwatch or something, yeah, it can be, access by different sites, screen sites. And if you check other guidelines of the WCAG best on web content, accessibility guidelines, you can see, more. Criteria in there. yeah, so let's talk more technical right now. See in the real action in react. js. we saw already about the problems in the previous slides. Now we want to know how to approach, how to approach those kind of problems with the solution that we're going to see. In the next slide. Okay, so the problem. The first problem that we see. a little is like of keyboard accessibility. Okay. The keyboard accessibility or we can do is by adding some tab index to the element or to the component that we provide. Okay. Tab index is good for the keyboard accessibility. but when you're seeing the tab index, you're You need to be careful in here because not type index is always the answer. For example, if you had type index negative one, it not appear in natural type order because the type index minus one is good for the dialogue or model components. For example, if you have like model or dialogue in your. Website type index minus zero minus one. I'm sorry. It's good for that. So for example, you can use, Jack worry, something like that. And then you're seeing using the focus, or you can also like using the type index, minus one, the common way to do tab index, you can add the tab zero so it can, it will be. Appear in natural tab order in the browser. it can be also, focused by the browser in, in, in the natural tab order. So the more you adding tab index, if there, if you have like multiple type index, the first thing, it will be up here and the natural tab order will be the least number, which is if you adding more type index, like One, two, three, the first thing that, it will appear in the tab. Natural order will be the first one and so on and so forth. So the, this, the tab index number two is will be the second, third. yeah, so on. So the problem that we saw also focus visibility. What we can do is adding by. by different states in your styling, components or elements, for example, like on your button, we can add some Hoover focus, something like that. So when. When do you start trying to navigate hovering, do the button or the elements that you want to, they want to trying to navigate, they can now see the different, like when they hovering, Oh, it's different from Fordham. So when they entering, they, the color is now different from previous state. And React, obviously we can use the autofocus, something like that. So when they trying to, focusing, when the user face problem that, like of auto focus in their input, in react, you can provide auto focus. So when they're trying to refreshing the page or entering the page for the first time, it will be focusing on something that you want trying to focus on in the first place. For example, in here, I'm trying to auto focus the password. So it will be focused in the first time in the first place. in other, method, we can also use, focus with wrap and hooks and react. So, not only using the autofocus, native autofocus by the HTML, we can use a approach with a react custom wrap and custom hook, something like this. We can, use the wrap, attribute in here, and then we assign it the input in here, the variable input. And then we use wrap something like that. Then we call it the input to make it focus on Julia. See, it's the same, right? yeah, the problem, the C we see over here is, uncreate links, uncreate structure, maybe because they see the uncreate links, maybe your website is not providing the right. Element to provide, to see, to see the links in the website. So make sure when you're trying to provide a links to website, use the right elements. If you want to try to provide some link, use anchor tag or anchor, a tag. In your HTML or in your website, not using like span or dip by, by, by the element. And then you make it those spanners that deep looks like a link or something. Because why? Because it won't work in browser because when you use the tag element or anchor in your website for the links, obviously for the. for the links, it's always show up in the link list on your browser. Also, it will work with keyboard. Okay, so anchor link or anchor tag, it obviously works with the keyboard by default in the browser. Other than that, if you're using like deep or span to the links, it won't work with the keyboard. And also by the default in the browser, your links can be bookmarked, by the default. If you're using like anchor tag or something, in your browser, in your, your website can be bookmarked through the links. Of your anchor tag or egg, a take, and the other thing is unclear structure. maybe your website, it didn't have like ambiguous section because you didn't use the semantic way to do that, to do structuring, because you want, you use a bunch of diff instead. I did for Heather did for navigation so we can see the different in here. This is like clear section for the website. the browser will understand if you're using the semantic element in your website. The browser can, analyze your header, which is your header and navigation, which your section, which your feed with your footer, everything it's work with the default browser. If you're using semantic elements. Okay. So if you combine it, semantic and the deep, it's more good. For example, if you want to wrap your header with deep. But you need to wrap it first with the header first. and then the second, the second, Level in your header, you can use the deep in here. So in react also, they have the same thing. So in react, if we, if we try to build your own components, it will be, Confiles into like this, right? From this one into this, like when you're trying to make your own button in react, you, it will be transformed to something like that. Click me. So make sure when you, creating your own components, make sure you, you type it, you write the components with the right, Okay. Because in the, browser, when you trying to make your own components, everything in the browser will be, transformed into the accessibility tree, which is accessibility. Three is a use. For people with disabilities, for example, people with, vision problem with the problem in their vision, in their visual, the way they see the website is through the accessibility tree. Okay. for people with a disability. The HTML code that we, program earlier. For example, we create some components, something like that, et cetera, in the browser, it will become files to the DOM tree, something like that. Then it will be, defined whether it's JS or HTML, and then it will be output to the, user interface, which is, we can see in the browser we're seeing our monitor or something like that or something else. But in the user with visual disabilities, the journey is not end there because the DOM has to be trans file. Okay. Has to be comfort into another, and to another, way, which is, they need to transform into the accessibility tree so they can. read the user can read, the browser can read, they can read directly from the accessibility tree using, native API in the browser. Okay. we can use, they can use the same technology they want, like screen readers or something, touch screen, something like that. Okay. yeah, with the screen readers, they will provide read API native by the accessibility tree. So the screen reader, we're only looking for the accessibility tree, not using the DOM tree. So for example, if you, to try, if you want to play in your browser, you can also like check in the spec element. And then you can see the accessibility section in the bottom of your inspect, in Chrome DevTools. So you can see, this is the accessibility tree that I mentioned before. this generic is mean something like div, and then banner, navigation, list item. Then we have like area level, dark mode, something like that. So the other thing is, we see is the same kind of, lack of visual, maybe in the screen reader, it'd be something like blah, blah, blah, check, check, blah. This is not good. What we can do is we wrap and onto the level. So when the screen reader read, we'll be like something. Receive promotional offers, check, checkbox. Receive promotional offers input, check, checkbox. And then they're trying to, announce the state and then the type of the checkbox, of the input itself. Or you can use the ID, then using the label for something like that. the other thing we can do is when you dealing with the titles, okay. The common mistake that we see is, the changes of titles, when changing pages, the title is not updated. So in react, you can also use the react, react, element. Okay. React Helmet, so it will be changed the title to customize by yourself in other frameworks. Also, you can use dynamic, title in Angular or Vue, you can easily change the title as well. So make sure, also the title on the website is always updated based on your Page that you're trying to visit by the user. So the other thing, a project we can fix the problem. The solution is way area. Way areas mean web accessibility initiative, accessibility, rich internet application. Let's imagine if you're trying to make your own components, okay. But there's no like semantic ways or there's no semantic element to do that. Okay. what you can do is like you build your own custom components from, from different element. For example, if you want to make some, toggle button or switch box, something like that, what you can do is using deep and then you make up those diff into a switch box or check book. So So yeah, this way area is designed for those components. Way area is designed for those component. It can be, use it to different, element. For example, like this. you can add some roll and area check state. To the checkbox. So the screen reader now see the deep that those deep is the checkbook. Because if you didn't add some like cement, way area to those, custom element or custom component, you created. The screen readers in the accessibility tree only tell you it's just a div or it's just text. But if you like assign the raw way area in here, you can see the different screen reader will tell you this is will be checkbox. And the name is 3G promotion offers the label. This, and then the state of that checkbook will be like check or not check that something like that. So the under the hoods, how area works is when the accessibility tree is only scanning. by the dome with the area, before it transformed to, before it transformed, converted to the accessibility tree, the, like the dome will be telling the accessibility tree and scan it first. If there's like area or something in, in the element of their dome. And then the dome will be compared to the accessibility and then tell the accessibility like, Hey, this dip is, Hey, this dip or Hey, this dip is a button. So make sure treat this deep as a button. And then after that, don't tell him to the extra 33 like that. Texture between okay, got it. I will treat this tip as a button. And then that's. That's why before the DOM, transform to the accessibility, it will be like telling and force for the moment, see if there's like area or, area, way area or something, attribute to tell to the accessibility. So before they, transform our C to the user and the react. Also, we have the same thing. we can approach with a subject abstracting components, when you want to creating dynamic component in your component, you can use the, as in here as, as prop. So later when you want to build dynamic, element or component in your website, you can use as. props in here, for example, you can now, heading level in heading one in here, and then you can also change like heading to cetera. We can see in the real demo after this. So yeah, bear with me to see. So yeah, for example, in here, we adding like dynamic style and as the fee will come to it. And then in, in the browser, it will tell you that this is, this is paragraph element, which is cool. the other thing in, of area, if we can use the area level by, it may combining two different elements or different components into one. so the screen reader will be. telling to the user, combining, for example, men, t shirt, and then shop now. Something like that. So if you didn't use this, are you able to buy it? We were telling the user to the user, with the screen reader, different fact, women like men, t shirt, and then the user need to tap or swipe to the other button. Then we'll be like. Telling after the screen to tell the first one. So when you're seeing the label, I will level by it's will be combining or directly, from the first to the second one. It would be like, seamless to the user with strangers. Also, you can use the, described by. It's also good for the input assistant. If you have error and error or any input assistant in your, form, something like that, you can use the area to say goodbye. There's a lot other area you can check, but this is so mess up. who wants to learn from those kind of, diagram, But yeah, I'll make it simple for you. So you can just scan or learn more of the area guide in here. So let's move on to how you audit the accessibility and your website. So the first thing first, we can use the manual check and using the automated check, using the lighthouse or wave in your browser. If you use the manual check, you can, check this whole extension in the browser. I prefer using the Chrome instead of other browser because, Chrome is just different, built different for everything. You just work with the Chrome, but. I don't know this extension is really helped me when you're building a website from scratch and then manual check for the accessibility aspect. You can use the screen reader for the, see how, when you serve, visit your website, navigate your website, then you can turn on your screen reader. they're selling the right element, the right, components, the right. syntax, the right element for the website, you can just check the screen reader. And then the other thing is the other one is accessibility inside for the web is, which is good. Also, it can be, using this extension. This extension can scan through your website and then see if there's inside for that, for your website. they will telling you, like so many things that can be, you to fix for you. And the other thing is X DevTools, web accessibility testing. It's also can be, this is like checker. For developers, tester, anything, anyone, designer in Chrome as well. if you see, if you use this thing, it will be telling you something like that. So it will be like telling if there's your website is a good enough, the total issue in your website will be telling how many issue in your, website. And it best on, accessibility aspect. the other thing is accessibility linter, which is you can combine with your Visual Studio code or any, your code editor. I use this for my Visual Studio code, it works well, everything great. imagine if you didn't have enough resources for your project, let's say you didn't have enough resource for your budget, for your teams, you can always use this UI component library that already support accessibility. You don't have to build everything from scratch. Like you had to add some type index, everything in your component, your element. You can always use this great component libraries and you can check, everything works well. Now it's already worked with, also use the standard of accessibility. It can be used to the. any input modalities like keyboard, it's also works with everything. yeah, you can just check those kind of library from Chakra UI to Material Bootstrap, Adobe Spectrum to Radix. so yeah, this kind of, website that I used earlier with the Spectrum, React Spectrum. Which is good. Maybe I will demonstrate in, in, after this, after the presentation. Okay. Now we move into the last part, which is the unit testing. when you want to try to testing your component and then you want to also like, have, accessibility aspect in your testing. You can also follow along, tips from from this one. So in order to test your website, using the accessibility aspect, you can get rid of, get by tags, get by ID, something like that, right now you can change by, testing using. Get by role to find the role of button and then name that one. So it will tell us the component. It should be get, it should be testing, get by the screen and then, by role of the button. Then we see the name of the button is dark mode. Then we expect that button to have attribute area press true, which is quite really accessible for the unit testing. I'm using unit testing library from react and also using the jazz. you can also use the Vitas or any testing library, any other, testing library like Vitas or jazz, Vess. Something. the other thing you can also like, if you have multiple buttons, you can use the get all by role, something like that. Yeah. it's also working well with the role heading, something like this. If you're trying to see the heading a level two, we can just get viral heading level two. So when the heading is now changing, the text will not want, it will, it won't fail anymore because you actually are testing those, texts by the, by its role, not by it's text. So if you combining with the excellent or earlier, you can. Really great for you. So, when you forgot everything or forget, the, accessibility, attribute in your element or your component, it will be it tells you there's something error in your, component already. HTML. For example, I didn't provide the alternative content in here. They will throwing an error, excellent or ensure image have a man of alternative, something like that, which is good. Quite good. Great. Great. Or if you work with react as well, you can use the Aslan plugin. Yes. X Ali accessibility. You can, this is also good. it's the same like Xlinter, but it's specifically to JSX format. So if your component using the, dot JSX, you can use with this as well. the other thing we can use is testing with Cypress. this is cool. Actually, this is using combine it X score and then cyber X. This is what, this is so much better. I mean, I've already test this and which is quite good. Yeah. you can describe and it contains something like this. Uh, you can use the Cypress like this as well. Cypress, proceed a website and then inject the X of the, the accessibility. And then we'll check the entire page for accessibility issue, something like this. And then we will tell if there, an error in your, website. It'll be, tells you the error itself. See, wow, this is cool. So yeah, what we can, what all benefits from all of this, what we can, we can reflect it to our, our, movement, our, what we can do earlier. The benefit is obviously increasing the audience by making your website more inclusive. Okay. Okay. And it's also a better user experience. Yeah. Obviously you can get the better few different view from the user experience allele and also it can be improved search engine optimization. And the fourth is obviously this is the morally the right thing to do for make the website is accessible for everyone. And obviously it's also can be a point potential discrimination lawsuit. So in, in case in different country, they like putting this, accessibility things is in serious matters. So if you in those country and you didn't enough provide enough for your website can be potentially a lawsuit discrimination. yeah, before we end our presentation, let's take a first to what we can see in here. So we already built some React, simple crude application. We see in here already built like components, the dynamic component that we, see in the presentation. So in here using this one, you can see we adding as in here. And then we can, I am for the dynamic component in here. So if we try to, run it, it would be like something like this. I'm trying to run this application. So I built this using the react spectrum. The react spectrum is, using the component from the Adobe spectrum, which is quite very good. It's from Adobe and it's work with all the accessibility things in the key, in the button, in the other components that really work with the accessibility, which is cool. So yeah, wait, so you can, it's really still loading. Okay. Now we're starting the development. Now, if you see in here, Okay. Let's take a look. the testing that I already mentioned before here already used to test in here. See This is, which is not good for the accessibility aspect and your testing, which is more good is using the raw by get by raw in here. Okay. Oops. Thing. Now it's better. Okay. Now, if you see in here in the dome, as you can see this here, it's just the H as the H. One heading level one, right? If we're trying to, change those, dynamic, and we can change it as, for example, we want to this H heading level one, we want to change this as a span. You can also like you're seeing this as spam. Now there'll be changing those to spam as well. But second, see, it's also changed now. Oh, which is cool. In react, you can use dynamic component to use this as spam. So it's also, the concept, works the same like way area. Or just you can say area. All right. And this is, which is cool. Using the, spectrum. You can also see in here. It's, we'll also work with the tab. So if I, sticky key in here, see this tab in here, see this tab in here. If you also try to using the screen reader. Yeah. It will also tell us you the screen reader as well. yeah, it's cool, right? Screen readers also, it also works well with the screen reader. For example, in here, I will adding some extension and then work it with the ChromeVox alert. Okay. Alert. Add data. Title. Add data. C. S D set aside. Sorry. Add data. Button. Header. List with four items. About. Dark mode. Button. This works well with all, with all the kind of, websites. All components works with the accessibility. yeah, that's our demo today. So resource in order to learn, if you want to learn more, you can check those links. You can see the W3 org or in Google Chrome. Also, you can check, or you can check the Li, 101 development, or if you, lazy with all this links. I made the repository. I put all the links on those links to this repository. You can always check on my repository. I made it public. So yeah, it is easy to follow along. And in summary, accessibility is not just how you adding some Alternative text to your image, adding some type index to your div is more than that. It's beyond than that. Accessibility is, really making sure about the content and the website of your, website itself. Really making sure your content and the website itself, it can be, use, can be accessed. To various environments and abilities. So it's our job. our homework is not done yet. There's plenty of things that we should do more, explore more. One of those is the accessibility itself. yeah, thank you for the attention. if you want to connect once again with me, you can follow along this link, social media. So yeah, thank you for, joining my session. See you in the next conference.