 Hi everyone, my name is Emma Torski and I'm a developer relations engineer at Google on the Angular team And I'm super excited to be here today talking about how to build more accessible Angular applications So we're gonna spend the next hour hour and a half ish Talking all about accessibility and Angular and web accessibility and I'm happy to answer any of your questions along the way But to get started, I know there were some links sent out ahead of the time But you can find everything that we're gonna be talking about on codelabs.developer.google.com Backslash Angular dash ally and I'll throw that in the chat as well And I'll throw that a few more times as I see people coming in so that's we're gonna have to get started And so let's talk a little bit about This topic first before we dig into some code And I really want to spend the most time looking at actual code asking questions about some common pitfalls and stuff like that But just to back up before all of that, let's talk about why we should care about accessibility, right? So accessibility is super important for all web developers to know about it really touches every point of the development lifecycle from design to development to testing Everyone needs to sort of have an accessibility hat on as developers and anywhere in that And in fact one in four US adults have been found to have some sort of disability that impacts major parts of their life so you can think about that as Obviously there are some of the things we initially think about when we think about accessibility So things like blindness or low vision deafness Hearing impairments motor restrictions things like that, but it can also be things that are temporary So things like maybe I broke my arm a few years ago And I couldn't type with one hand and it made it much harder to navigate my job of Like, you know, how do how do I code with only one hand? Especially if it's my left hand like I can't do anything with my left hand So I think it's really important to think about the fact that like accessibility is really important for a certain Part of the population, but it applies to everyone and we can all benefit from it a Great example of that is if you think about closed captioning, right? I have closed captioning on in this Google Meet and if that's something you're interested in I would highly recommend Going to the settings tab at the bottom and turning those on Um Because sometimes it's hard to understand certain words that people are saying or you know, I watch Netflix a lot And I always turn on my closed captions because sometimes I have the volume low So that I can be doing other things or I'm vacuuming while trying to watch TV, right? And so while I was not the intended audience of that accessibility feature I benefit from it and if you think about that more broadly Adding accessibility to your web applications that you're building especially in Angular just broadens the impact that that website can have and the usability in general so Important from a web standard perspective, but also important just because it makes things more usable so To dig in today, we are going to be building an application. I have all of the source code for you to get started I thought it'd be fun and cheeky to do a dumpling shop. I love a good dumpling Maybe throw in the chat what your favorite form of dumpling is. I am really into gyoza right now There's really good cheap dumpling shop down the street from my apartment But we will be taking an application that I intentionally built without really thinking about accessibility in mind And we will be addressing eight different pitfalls of things that I think everyone can go back to applications you're building in your daily life and Add some accessibility in there I'm also happy to answer any other questions about Angular I work on the Angular team and I'm super excited about our focus on accessibility right now So we are going to navigate to the next tab here and can everyone see my screen is this large enough for y'all Feel free to throw in the chat any questions you have or if you need me to like go back to a line of code Or anything like that. I'm happy to do that so To get set up again. This link was sent out to everybody, but I just want to make sure you're going to go to the GitHub code labs Repository here on GitHub you're going to clone my repository I already have a fork of it. I see some other people have done that. Maybe you've started Oops, I'm not logged in in this browser. You cannot see that I in fact have started my own repository But we're gonna be working from this so make sure to fork Fetch my branches and we're gonna be starting on the get started branch. So in your local setup, I am assuming you already have Angular npm installed you have everything up and running but if you are struggling to do anything there Please make sure you can go to angular.io backslash start and that will get started so if you're having any dependency issues with like TypeScript or Getting the Angular CLI up and running or anything like that This is going to be the tab to go to and maybe just for the rest of the code That feels just follow along and look at my code But that said we have our github repository. We've taken our code. We've Cloned it locally and so I have my local version here Again, just this Angular accessibility repository in my local and you're gonna want to make sure you have npm installed I've already done this so hopefully it's all cached Do-to-do and then I'm going to have ng served so here. We're just gonna run ng serve Again, I already had it once but I'll do it again for you And we're gonna use the CLI to make sure that we can build our code Look at some from lobsters in the background. I highly recommend having a cool Computer background to look at for while you're building And the super exciting thing about this compiled successfully The super exciting thing about all this is I'm doing this all in Angular version 13 So if you've been following Angular closely version 13 has only been out for like a week So maybe this is the first time you're touching version 13 code Kind of exciting kind of cool. I think everyone should give a little pat on your backs for that We love an updated code repository And this is what we built right so if we go to our local host 4200 This is our repository And we are currently on again if I just check out my git branch to go back to my terminal I can see That if I do git branch I am on the git started branch So make sure to fetch both branches there should be to get started is where we're Starting in our starting place and the main is where we're headed So if you at any point get lost along the way you can always go to main and all the code will be there that we're adding And the other way to do that just to give you that ahead of time is that if we go to main We can see in our commits on GitHub that each one of the steps We're about to do are all an individual commit. So if any one of these Changes somehow gets ahead of you. You can also just check out on a certain commit on github so Let's go back to the code lab. We have our code We've checked it all out. We feel good about it. Let's talk about this This application besides being a dumpling application. I just want to take a look at like what's there so My photos are in dark mode. I'm going to do that so that my face is less pink for the light But we have our shop which is our main page Also, if you click the home and it has a bunch of dumplings so I can see what I'm buying in my make-believe land The idea here is that I get to pick I can order up to 12 or 13 dumplings So this is like a custom dumpling website. I know a lot of holidays are coming up Maybe you want to order like some really fancy special dumplings for a loved one So we get to pick what fillings we want in it We get to pick how many we want and then the super cool feature of my dumpling website I've decided is that you can also dye your dumplings to a series of rainbow colors So for example, let's get some like sky blue Chicken and bok shoy dumplings and you can click purchase Obviously that has not built out but in our console. We are logging that in theory. We are purchasing these dumplings We could send you to like Shopify or something right If you want to know more about this make-believe dumpling company I have an about page and then you can also find us Again, it's a development mode. So you can't actually find us We're located somewhere in San Francisco. I Am also located in somewhere in San Francisco. So I thought that was fitting And we have generally good hours. It is actually after hours for us today locally, but you know, that's okay. We're going to continue with our dumpling purchases so Besides that if we look through more of what's going on, let's look at the accessibility of this website Right. So like great. I built like a cool fun application. I think it looks kind of cute But we recognize it's not accessible right like right out of the box There are some things that I feel like I could have done better to build this in a more accessible way And this is what I really want to focus on today So to start out by recognizing what we want to fix There are two types of accessibility testing that I want to talk about today There's manual testing which is going to be where the bulk of your accessibility testing happens, right? So this is where like I as a user I'm going to say like My designer told me that I need to be able to go to my website Select any type of dumpling I want Click purchase and know that I purchased those dumplings and that is a user flow And I want to make sure that an accessible user using something like a screen reader could successfully do that So if I was a developer, I would turn on voice over I would navigate trying to do that workflow and make sure that it still works The other type of accessibility testing is going to be automated testing So this is where we use other tooling for example today We're going to be using the lighthouse tool and Chrome developer tools to run an automated check for other things Now the thing about this is We can't automate all accessibility testing at least right now, right like something that's really important in accessibility is that When you are read the choices on a slider that you understand what those means So there's a cognitive aspect of that and like computers are smart Machine learning is getting there But we can't automate knowing that a user will understand what's being read to them We can say a user is being read a sentence and that can be automated But does that sentence make sense is where the manual part comes in? If that makes sense So to run our automated tests, we're going to go Into our application again. We're going to go into if you hit command option j We're opening the chrome developer tools again. I'm working in chrome It's going to be a little bit different if you are using a different browser And I'm going to go to the lighthouse tab if it doesn't show up there Then it might be just under these stop downs and it's going to be one of these You can see I also have the Angular dub tools My uh favoritism is clear And we're going to pick which ones we want so for today just for the sake of time I've already run these reports, but we're going to pick accessibility And then click generate report. Oh, it looks like I'm going to have to do it again anyways cool And it's going to run my report again. I just clicked Uh I only selected desktop. You can also do this for mobile today. We're just talking about the desktop or web accessibility Um, so for the sake of time, but there's some other cool stuff in chrome If you want to do it anyways So we got our report. We got 87. So like that's not bad, right? Like That's 87 points out of 100 right 100 would be here Uh, so we're doing pretty good, but we can do better. Uh, I want to hit 100 I'm a perfectionist and also I want to make sure this works for everyone And if there are things I can fix, I'm going to do it And we see that we have some things highlighted here and we're going to add them to our 2d list Then the third type of check that we're going to run is linting And so this is where in Angular I'm using eslit and I'm specifically looking at the angular eslit rules to make sure that I can lit my code So this is the forward even compiles like are there things wrong? with my code That I could have fixed and so I have let's see one two three I have 10 different checks here in my eslit rules So if I go to the dot eslint rc json file I can see those and I've set them all to two which means an error Which means if I have lit checks on and I run linting it's going to run an error And see these are the 10 things that lint can do And this is even more than like the usability of like what's on the screen. So things like color or stuff like that. This is like Hey This slider should have a roll or something like that, right? So to do this we're going to open our code So here back in my terminal. I'm just going to run code and open this oops And I have it right here and my code opens And I can go to again that linting file and I can look at my lit rules And I can see that I have again 10 rules here set to those things For my eslint rules So if you're using eslint and these are also available in other linting It's going to be the same sub rules just a slightly different declaration for any other applications I highly recommend That you add accessibility check rules So I have them here and that means again when I go back to my terminal and I do ng lint I can see my winter is going to run. It's going to say hey I'm checking your code for all these things, you know There's an error, right? And so the two here Is saying I want to make these errors. Uh, I believe that they should be strict, right? My recommendation is obviously if you're using a large repository maybe introduce some as a one And that's going to throw a warning two is going to be an error and depending on your cicd pipeline It's going to like stop you from building, right? But we want that right? We want to write the best code we can And this is going to push us to do that Um, and so this lint is finding what's finding It's finding that any click must be accompanied by a key up key down or key press, right? So I have something in my shop component that I'm saying you can press or click And I'm not actually giving any sort of instructions to it Um And so we're going to fix that So if I go back to my code line, uh, those are the different ways we're going to test. So again, I've collected All of the errors here And I've collected my linting errors here And so let's now go through each one and talk about the code Probably what you're here for so We're going to start with maybe the like largest issues and work down in granularity And see how much time we have And I'm helping to answer questions along the way or at the end As we do this we can also talk about coding best practices as we do this so To start with what I think every angular developer if you're walking away from this if you do nothing else If you turn off the video right after you're doing this um, I want to make sure that you were defining unique page titles. So single page applications, which angular is Uh are super powerful, right because the whole idea is like I have one page I have all these things But at the end of the day, this is all one page and I'm changing out components with a navigation But really this is one page And that's super powerful for development. Um, most modern frameworks use this sort of architecture There's a lot of really great performance benefits Um, it really is the modern web, right this whole idea of like a single page application And that is so cool except At the top here if you see this, um, if you zoom in it just says ally in angular or accessibility a 11 letters y in angular If you've ever wondered what accessibility and ally are they're the same thing And that's great except let's say i'm over here And i'm using a screen reader and i'm like hey, what's this tab over here and i'm tabbing through my options I don't know what this is. I just know it's accessibility and angular and there's different things in here. So let's say I have like a store here Um a description page, you know, like that should be reflected here because these are different things that we're talking about um And it's really inaccessible to have Like let's say I open up 10 of these right and I have different tabs that are on That are on different pages If I have a bunch of local hosts, right? Like they're all going to be the same no matter what I have open And no matter the status of them and how are you going to tell the difference? So That is a huge pitfall of single page applications and what we're going to do is we're going to use the router to define a page title so uh In our routing module, we're going to navigate to uh in our code I'm going to search for my to-do number four because we're on step four I'm going to find I'm going to find two files that I want to edit okay So first we're going to go to our route module and we're going to look and we're going to say okay So I defined my different components, right? So if it's at shop I'm going to load the shop component about about Locate location component. Um, so pretty self-explanatory right that maps exactly to These three tabs that are three routes here and because it's a different route I want a different title or at least want to reflect my different routes in my title So I'm going to add some data to each of those to define a title So if I go back to my code I'm going to add one additional thing here, which is my data I'm zoomed in so much. You can't really see all this. Hopefully if I zoom out that so works Um, and again, I'm just adding let's see. So this is going to be about And then I have data again I'm going to pass an object. I'm going to define a title And what I'm doing here is I'm saying let's see uh locate Josh Uh, I am singular. It's hard to type and talk um So what I'm doing here is I'm saying, okay. I have a route. I can lazy load it if I want Um, and I have some additional data that I want to pass to this route and then I want to populate I'm going to then go into my component and use that data to give a page title, right? And so the data I'm going to pass per route is the title. I want so I'm defining a data object I'm using the key name title. Uh, this is just what I've named it. Obviously you can name it something different um And then I'm going to pass this along and something really cool That's coming in a future version of angular is we actually are cognizant of this and after I wrote this code lab uh I Helped our team to find a way so that this will actually be known So you're not even going to have to do this next part, but for now what you're going to do Is we've defined all of our titles? Uh, so we now know what we want to do and then in our app component We now need to handle that title, right? So we're passing along a route We're saying if we're at this route I want you to load this component and I have a new title for you And so now I want to change out. So if I go to my Let's see. Let me move these around uh, if I go to my App component once I save that I'm going to say I need a title So I'm going to start out by defining Just like a basic title variable just so that Let's see. Oh, I already have my title. So I already have my title Um, just defining my basic title and then I'm going to create a constructor that handles that title, right? So I'm bad at typing and doing so we're going to cut and paste and talk about these codes this code instead Um, okay, so What I'm doing is I Let's do that Uh, what I'm doing here Is I've created a constructor that imports a title service, right? And what I'm going to do in my title service is I'm going to say have a title That's not Okay, so I'm going to define a constructor. I'm going to create a title service that holds a title Uh, I'm going to again. I have my router and my activated route and what I'm going to do is on in it I'm going to say hey Can you get the title? And every time you get the title what I want you to do with it is I want to take the router I want to take the router and I want to pipe in and filter and say Hey, does my data have a title is the route that I'm at have a title? And if so, I want to give it that title and otherwise I'm going to default back to the title that I've defined here, right? Um, and that's really all I'm doing So if I save that and I go back And I don't need that anymore Oops I can see oops even without changing it. So this is like a great example, right? I can already tell without having to click on this that it's working and specifically I can tell that I know what I'm at Right. So this is exactly what I'm talking about It helps obviously for accessibility reasons, but it also helps me and I don't have any accessibility services turned on Right. So by using my router to define a title. I now know that this is open to the locate me tab And that's super helpful. Again, if I have a bunch open and I'm looking for a specific one I know that just to test it. We can click on our story and we can see it now says about We can click on shop. We can see it says our shop And so we now know that for each of the major pages we have a unique title service So super helpful If you're following along feel free to give a thumbs up in the chat or maybe Maybe comment if you have used a different title name Or some questions there a common question here is like Okay, so what's a good title? Like how do we differentiate, right? They're all dumpling shop. Like why doesn't it say dumpling shop? Great question. It could What you really want to reflect is whatever the difference is you want to put first So if you notice here, I said about dash accessibility and angular But if we look up here, we see that I actually have a bunch of angular docs pages up And this is a great larger example of that right where we know that we're on the angular docs So we have angular dash and then whatever the page I'm on is what's showing here So like let's say I have 400 pages of the angular docs up It would be super annoying if they all said angular like that's super unhelpful And so it's really easy to know without even having to click into it that like here I'm on the accessibility and angular page, but here I'm on get started, right? super helpful So if you think about it scaling up to something like again, the docs page has what like Something like 400 individual routes. It's really important that you're reflecting that information without forcing a user to go Navigate to the page Then navigate from all of the navigation features into here, which is going to be something like 10 different tabs Right, so that's a really terrible experience for people using voiceover or things like that as well as like Again, I don't use those in my daily navigation of websites and I benefit from it. So Just doubling down on it's useful for everyone Uh, so again, this is a really great code snippet for doing that. Um, but you're just piping Uh, and filtering your routes and I think it's quite fun to do so That said That's going to bother me that these are not Tombed, okay, whatever So let's do our next one, right? one check off the box, uh, again We hit the highest possible thing. So again, if you do nothing else go add this code snippet think about your routes if you develop in an angular application for your work every day and you're thinking about Something that you can do to impact the entire website This is a great low-hanging fruit again super small code snippet big impact so The next thing that I think has equally large impact is color so this is one that are, uh Our snapshot definitely found right so if I go to my application I can see that it saw something with contrast. It said hey This contrast is terrible and I can even test that and say is it though? And use my inspector and get to it and say oh it is it looks like my contrast is 20 percent Which is far below the required amount so Let's fix that Now color contrast is super important because if you think about color contrast on the web Again, even if you are a partially sighted user or have users with low vision This is going to be super impactful if I have everything that is like really light gray on black Or something that has really low contrast. It's super hard to read that So think about it like this screen right now has black text on a white background There's really high contrast there. So it makes it really easy to read but if I inspect this page And I change this to let's say like color yellow Like I cannot read this code lab anymore, right? So if I was trying to teach this or if I was trying to like look through and I had to like highlight it To create enough contrast to read it like this becomes completely unusable So any work you did like all the great typing you did Let's say you like maintain a really cool blog with a ton of really good information If there's not enough contrast for people to read it They're not going to be able to get all the information from your website So in order to fix this again, we're looking at this accent color that looks wrong So let's go into our code and look at what that is Um So here we are going to look forward to do number five So in our styles tss, I'm using a human material in this application um And I'm defining a bunch of color palettes with it And so let me indent this to see this a little bit better So it looks like in my light palette, uh, which is where the issue was, right? So Just for context, this like pink red is our light scheme and this like blue green is our dark color palette Um, so with this light, it looks like I have a pink and I have a default And I have a lighter color and I have a text color and it looks like What is wrong is let's like play with this and see Uh, what is going wrong here? Uh, so again, I'm just going to pick a bunch of colors here and see like where these colors are coming through So if you saw that With angular material if you're not familiar you define a color palette and you pass in those color palette variables Uh, so if I go to my Here, let's just do it if I go to my angular Uh material mpm node module and I go to my styles Uh, I can see that in this palette Uh, I am exporting these color palettes. So I have like a red palette. I think I was using a pink palette And so with my pink palette I can call on any of these variable colors to refer to these hex codes and they're defined by the material Organization, which is the design system that google relies on called angular called material and this implementation is Uh, obviously angular material And so I'm using my pink palette. I have a default. I'm using a 100 So that's going to be this color as my default again not checks out And then I think I have a lighter color, which is my 100. So again, I'm using like these nice place pinks And then what I have here that's the problem is I have this text color and I think it was yeah It was 500 and so I was trying to say like anytime there's text I want it to be this but it's going to sit on like this a 100 which is super close in color, right like I don't know if you can see these little squares without seeming in but they're really far away from each other so I'm going to use 900. I think in the codelab. Maybe I use something else But I'm just going to change it to 900 because I think that's safe and I'm going to save And I'm going to go back to my app and wait for it to build And it loads And yeah, there you go So I can clearly see that now, right? That's so much more visible than it was before and if I want to inspect it Let's check it. Ooh Looks like it still doesn't like that contrast Ooh, that's not great Uh, let's run our lighthouse check and see if it agrees So again, let's see I just changed that single variable Oh, okay, so it's going to pass for our lighthouse check, but it looks like maybe The contrast here is a little less happy. So 50% is pretty good I would say that is far above the aria recommendation But it looks like since I wrote this codelab Chrome has gotten a little bit stricter in its recommendations So we could even say like maybe I want to make it this darker Um, I don't have a darker color in my palette, but what I could do is make everything else a little bit lighter Um, and see if that helps. So let's see. I could go to the 50 Um, and just make it as contrasted as possible and see if that helps Let's see Now what's it think? Okay Yeah, so if I do something really drastic like that I can see that again Uh, maybe you can see this maybe you can't but if you're using your own inspect element and you zoom in I'm not sure I can zoom in on the pop-up tools No, I can't I'm so sorry, but if you zoom in you can see that Really small there the contrast tab is saying contrast 83% with a green check mark next to it So it's saying it's good with that accessibility I'm going to go back to a 100 because I like that better And it passed our lighthouse check But again, just something you'd want to check out of what those contrast ratios are and if they're matching I'm using chrome canary So I will say that a lot of the tools I'm using are experimental and maybe pushing the bounds of like these checks But there's a bunch of cool stuff in chrome canary that I think is worth it So that said we fixed our contrast thing So in general what I would recommend in color contrast is obviously I am using a color palette Which is super helpful because anything with the design system I'm going to make sure that I can define in a singular place Everything is relying on this default color and these three colors are sort of explaining to my entire screen What our colors should be and the more you have color variables so using things like css variables And making sure there's like a constant singular source of truth for colors Make sure that if you've checked the color contrast in those colors that it's going to populate to your entire application um Some things you're going to want to do is check when checking is you saw that I ran lighthouse And I checked uh for the contrast Errors there and that's where it was recording it and then you also saw that in chrome dev tools I used this inspection element and I was hovering it over So for example here I can hover and I can see that this black on pink gets a contrast ratio of 59% and a green check mark Or maybe even down here this blue has a Pretty good contrast as well. So again just using that hover and looking for the accessibility panel there and where it says contrast It's going to be the best way to quickly see um And check for that contrast So we've done two things now, right? So we've done our to do for step four and step five unique page titles and color contrast From here on out, we're going to get a little bit more semantic So we're going to dig into a little bit more code. Um And maybe these issues are less like overarching, right? So page title affects your entire page color contrast affects your entire page Now let's dig into like some very specific issues So the next one we're going to dig into Is using semantic html Uh semantic html You know, you might be thinking like why is this included in an angular accessibility course? But the thing is we're all writing html like all of your angular applications. Let's see by search for like spaces And anything in an html file like look at all the html Right. So like we're all guilty of writing html Sometimes we don't write the best html and I want to make sure we walk away from this writing the best html that we can so Let's look at our next step, which is step six Now step six is all about using semantic html the idea here is like if I have um On this screen for example, I have this thing here, right? It's like a big div and I click on it and you can see here that I'm logging something in theory again. Remember like maybe I Navigate to another page. This is a make believe land in which you can click this magical button and it purchases our dumplings for us Um, but when I click it you can see that it's acting as a button, but if I inspect it What it really is is a diff. It's a div with a click event And it's a div with an h3 with a click event Uh, which really isn't making use of semantic html to include aria accessibility So aria accessibility is capital a capital r capital i capital a And those are accessibility roles that we're going to give to our html to manage accessibility for us especially when contracting with things like screen readers and those types of accessibility services So when we don't use semantic html, we keep completely bypassed the web's path towards accessibility For us and we essentially force ourselves to reinvent the wheel And there's very few times especially in something like as small as uh creating a button that it's worth saying I'm not going to use the button html. I'm going to create a div and do it my own way Uh Better to use the button right Another example of this is on our story page You can see that I have all of this text and if I inspect it, I see that they're all let's see. This is an h3 This is an h2. This is an h5 an h6 and h5 right and so all of these h uh Numbers that i'm reading out are headers and typically when you think about a page It starts with like an h1, which is your big title, right? So that's like dumpling shop or h1 Then we have some navigation items and really what should come next is an h2 And then an h3 and then maybe it could go back up to an h2 And what you're thinking about here is like the structure of text Where each of our headers should be subsets of one another So it makes sense that it goes from the largest header So a header one or a title Down to our smallest a header six and some text inside of that The more we confuse that the more we confuse screen readers, right? So screen readers like to read what level of header it is And that conveys to our screen reader users Where we are at within a text document So if you jump from an h1 down to an h6 and back up to an h2 Especially if you don't actually need that in the context of it So right like if I look at this Who are we seems like one of the main questions? How are we different seems like a question at the same level So in theory those should be our headers And all of this information inside of it is probably detail information That should be at a lower header number to convey that to users So those are both things we're going to fix So again, we're going to fix our headers to have a semantic ordering To use semantic html properly so that our screen readers can understand What's a header and what's description for those headers And then we're going to go back to this purchase button and we're going to make it Well, we're we're going to make it a button because right now it's Acting as a button and it's not a button And the way we can tell that again I can tell you that because I've built this and I know that it's wrong But I can also look at my lighthouse and say like huh in navigation I have this thing that says header elements are not in sequentially descending order And that's exactly what I just described right Things that are headings should be ordered properly so that people don't skip levels Because if I'm navigating this I'm going to skip through to all my h2s And I'm going to get like some weird things read to me here And then also Um, it's not complaining here because it doesn't know that it needs to be a button But if I went through on a screen reader, which I'm not going to do because It is going to Essentially like trying screen read me out of this meat that we're in but If I did turn on a screen reader by triple clicking my escape key Or you can go to voice over Preferences on your mac or other device to figure out how to turn your personal devices on And I navigated through to all of the options. The purchase wouldn't let me click it. It would just be like purchase Div right and we wanted to say purchase button click space to click Right, so we want this to be interactable on a screen reader So to do that, uh, let's look at our code lab to think about what we need to change So our first thing is in our shop component Let's make this a button, right? So right now you can see this is exactly what it was complaining about And this is what our uh linking caught, right? So if I look here it was saying like hey in our shop component You're trying to click something but like Nothing's gonna happen. Uh, especially in a screen reader, right? Like this click event needs to be accompanied by like A screen reader way for it to tell us what to do So I'm going to take this code. I'm going to copy and paste it my new button I'm going to get rid of that button I'm going to say my new button is better Uh, and this is just a button. I'm using the mat flat button, which is a material flat styled button Uh, I'm giving it a color of primary Uh, and I'm giving it some classes just so I could style it if I wanted And then I'm giving it that same click event But now I've given the click event to a button and the benefit here is using semantic html It's going to compile. It's going to know to add aria roles and support to this But it's going to be able to handle it for screen readers. So I can save that I can go back And I can see already Uh, the biggest indicator that that worked is do you see that when I navigate over my mouse now can handle and like shows that I can click that and when I click it, there's an action So just to show that difference again, if I go back to this button When I hover over the old button It looks like I just can select text, right? There's no indication with my uh pointer That I can actually click that or that anything is going to happen, right? So if I go back to my new button Clearly significantly better The other thing that I was going to do here is I was going to change my headers I'm going to copy and paste for the sake of time But in my about component, which again is to do number six. We're on I'm going to replace all of these. It's the same text, but I'm going to replace them With uh semantic heading. So if you see here, let's look at the before and after So if we look at the before and after Hopefully this is zoomed in enough for everyone reading my screen uh You can look and see that before we had like h3 h2 h5 h6 h5 A div like what's happening here? And now if we think about it again, we have two h2s The two questions we're trying to answer And then everything inside of that is a paragraph and we've added some styling so that we keep like a similar cool Sort of funky stylistic look But for screen readers if people are navigating just through the headers They can see that the two header sections I have here are my two questions What is this shop you're on and why is it different? And now everything else is Identified as something less than that um, if you're writing a blog For example, uh, a lot of people have like blog apps in angular This is a great thing to think about like do your headers make sense? Are they semantically in an order that makes sense? Are you using the correct semantic html tags like p like buttons um anything like that right a semantic html tag is like Literally anything that has meaning when you're going in your html and you're writing like uh Title for example is like semantic html So We have fixed that and let's look at that Take to do to that reload Oh I think it did Now if I go to our stories tab it looks similar But now we have two highlights We have our two questions and everything inside of that is still styled But it's more visually clear what the headers are there and again if I turn on my screen reader and navigated through my headers I could see that So for the sake of continuing to check our work as we go We just did two things. We added the fact that this is now a button clearly a button I'm going to run my linter again because remember when we did ng-lit the last time it got matted us for that click event And while it's linting Yeah, while it's linting I'm going to go back and I'm going to rerun my accessibility check again And I'm going to see if it catches That semantic change we made right Because this got matted us for on our story page the fact that we had those headers that didn't make sense And look it's no longer matted about this. So we're already into the green section We've already fixed enough stuff that we're into the green 91 and we still have things to do And if I go back to my linting I see that all files are passing linting So pretty good progress right like semantic html got us Pretty far it got us into the green it got us to a holy passing linting file And there's still things that we can fix So again, if you are just joining us and looking for the repository It is all linked within our codelab and we are now on we've now done Unique page titles. We've now done color contrast and we've added our semantic html and now let's look at our controls So the next thing we're going to fix is something that is anger material related so If you look at our shop here We have something that's like pretty complicated actually especially for accessibility services And that's the fact that we have nested controls. So for example, I have some fillings here That i'm focusing on let's just zoom into our fillings to focus on this Ignore my dumplings really don't like to be zoomed in this this aggressively But I do for purposes of accessibility of you seeing my screen So I have all my toppings here right I've meat and vegan. I don't eat meat. So I added impossible burger meat um But if you do you can order chicken. Don't worry. Um And so I allow you to click all these things right and there's some cool stuff here We're like I can click vegan and get both if I unclick box way it knows that it's not the fully vegan one um I can make some fun selections here, right But nested checkboxes are really not the best practice for accessibility And this happens a lot, right? This is a pattern. Maybe designers come to you with a lot for your different applications do writing. Um And I would highly recommend you push back and think about like hey I attended an accessibility workshop And I heard that this wasn't a best practice and let me tell you why So it is very hard when you're navigating through something like nested checkboxes with a screen reader to understand The nested complexity So let's say I have everything checked and I navigate from vegan into box way and uncheck tofu It is hard to then reflect to users Without Navigating back up that they've unchecked the vegan selection So when you have a nested structure like this that has nested, um uh Like nested use cases It's hard to convey. Again, if I like have navigated let's say selected vegan And I navigate to box way then tofu then meat then chicken Which is the correct tab order and I get to impossible meat and I unselect impossible meat You're going to next tab to quantity and you're never going to be able to reflect to users that they've unselected meat so Really not a great best practice if there's a way to do this that doesn't require nested checkboxes We're going to prefer that and we're going to prefer that because it's more semantically Like sensical, uh, and we want things to be as simple to users as possible, especially for cognitive Uh disabilities and things like that, but also because it's going to create a better UI So like even if I like look at this from afar, like I don't really understand what's happening here What's like my vegan versus meat, right? Like I mean impossible meat is vegan anyways So like maybe that should be up here, but also like When I uncheck chicken is it really not a meat one because I still have some meat in there You know, like there's a lot of questions you could ask there And we've really made things more complicated than they need to be so let's change Our controls uh to make them more accessible The other thing is that by simplifying menus, um, we're making them more navigatable or navigable Uh And the other thing is that we're going to use angular material to ensure that the checkboxes we create have built in accessibility So this is where I do a subtle plug that using something like a component library is the best way to get accessibility especially for angular material Which is google's component library And that's because we really care about accessibility and make accessibility A priority zero or the top priority So we want to make sure that we're delivering the most accessible components to you all Uh, so if you are ever looking for like, hey, I want to create some checkboxes And I want to do it really quick for my application and they need a scaffold Like use a component library using the other material because you're going to get accessibility out of the box so In order to do this we're going to replace our checkboxes with materials checkboxes and to do that We're going to go to our component Uh, and we're going to change How we add these things so We are now on to view number seven Uh, I've marked these things just to make them a little bit more sensible for me Um And we're going to go here. Oops We're going to start Yeah, we're going to start here So in our shop dot component dot ts Again, this is the component file where we are defining all of our fun things for navigation and We are going to add our uh selectable controls so We are going to change our fillings to be instead of an object with a set of boolean So again, this was maintaining like the filling variable was saying like is this box way true or false is this tofu true or True or false and I was passing that to that checkbox Now I'm going to have a list of strings right and these are going to be a list of options of what's out there And in doing so I've also leveled up our options a little bit if you'd like to level them up to something You like that is different go ahead I'm super into chili crunch right now There's a bunch of really good chili crunch in the local supermarket So I have added some chili crunch as an option. I've also added some tofu Uh, it kept saying possible me Let's get rid of that. Maybe let's make it just like spinach extra spinach um So I've changed my fillings uh to my list of strings And then I've also created a selected filling variable and this is going to maintain what is selected And I'm going to keep everything else um and then Uh now in my faux purchase. I also want to make sure to change how I print my faux purchase since I've changed my uh Object of fillings to be a little bit different So I just want to change how I'd select my flavor by going through Why is it not about this? Maybe it doesn't Oops Okay Sorry, I'm just fixing my simple quotes. Um, yeah, so I'm just maintaining that my flavor is going to be Uh, whatever is in my selected objects from my array here. So I've defined my array of fillings I have four beautiful flavors I'm maintaining a list of what is actually selected from my filling choices And then every time I make that purchase I just want to make sure that I'm iterating through that list and adding them so that when I print It knows what to do So now that I have a new list of what my fillings are I want to go in and I want to change my object and I'm going to use matte selection lists So in my component object in my html Uh, I'm going to get rid of You can just collapse even this like really long ul list Um, I'm just going to delete it and we don't even need to look at like how ugly that was um Instead I'm going to add in a cool matte selection list and you can copy this code all from right here But let's talk through it. So my matte selection list is my material selection list. This is a List of things we can select I'm going to give it an ng model Which is going to be a model of what I have selected I've handed it my selected fillings variable, which again is a list of strings And I've given it an aria label so that I can explicitly say hey when you get to here This is a selection list of my dumpling fillings and that's what's going to be read to screen readers And then for each of my options I'm going to ng4 and iterate through all of the fillings I have to have a flavor Give it that value some color and just give it that text If I select that and I save I should be able to Go here and yep It is reflected. So if you remember we used to have some nested controls that didn't really make sense I was like doing that weird meat vegan thing and now I just have four checkboxes of some extra flavors my extra spinach Of new flavors of dumpling. So I've reinvented my dumpling favors and I've made it more navigatable Uh, that is the hard word to say navigable So it's more navigable. Uh, it's also more cognitively intuitive for users to understand what's happening You're selecting your flip fillings. You can select more than one. There's no nested Dynamics of what that means Um, and they also have some styling and they were also I was able to give it an aria control Uh, or aria label so that when it's read to users, there's context for what they're selecting And so that's really great. Um So that was again this form doesn't have associated labels. So let's rerun And see if that fixes that And we're up to 98 right and we got rid of that like weird form error here Right because it was saying like you haven't given any context, right? You're you're making people like navigate through these weird nested controls and they're selecting fillings But like fillings for what there's no context. So now we've used angular material We've used built-in components that have accessibility included And we've used the map selection list and aria label to ensure that we're providing context And a clear more intuitive way to select these things so that when you're navigating through the screen reader You're not getting stuck in a weird like Context whole of not knowing where you are So we're at a great point Oh, let's just do a check again. That was creating select selectable controls with material Um, and let's just keep trucking on it looks like we're at about an hour We have halfway to go. So I'm gonna speed up a little bit Um, but luckily these next ones are pretty easy. So The next one is super similar Provide controls with aria. So we've already talked about aria Um, but the screen reader isn't reading these slider values. And if I go to my lighthouse score oops If I go to my lighthouse score, this is exactly what this is saying here, right? Like my input doesn't have an accessible name This is an aria issue. Um, and we want to improve our usage of aria So what we're going to do is we're going to say it's yelling about my slider very specifically this error is saying like This matte slider doesn't tell me what it is And without that I'm going to get stuck in moving this slider And it's not going to tell me what it is and a really simple way to do that is to use aria So I'm going to go to my shop component and I'm going to take my matte slider And very simply, uh, I don't even have to do any of these other things. I have all this stuff here All I'm going to do is give an aria label Right. So in my matte slider, I'm going to use aria label And I'm going to give it some text that explains what it does So here I think the example I gave was dumpling order quantity slider dumpling order quantity And I don't even have to say slider right because it's going to read its role So an aria role is already going to be applied on this to say that it's a slider So it's even a better practice to not include that role, right? Like I'm going to correct my code lab A better use is to just say When you think of aria, we need to read role value and then action Um or description value role and so this description here is dumpling order quantity Its role is going to be a slider. It knows that already And then the action is going to be like entering the slider and all of that's going to be handled by the voice screen reader so We've added that and if I go back I've saved that right. Yep If I go back I run I'm just going to say 100 percent Because I fixed it Yeah, cool. So we're at 100 percent, which is great Uh, and I'm going to push that even further right because why not 110 percent? Um, no really So we're at a we've already fixed everything that is automated And this is exactly where I say you can't automate all your checks. So this runs again. We ran our linder everything passes there We still have manual testing, right? We can still push this and say I know that I've auto I fixed everything that an automated check can fix but I can still do more Um, right. So aria controls color page titles. Those are all things that are automated But there's more you can do and so something that I'm really going to encourage everyone to check out is the cvk accessibility package. So this is where um, you're going to run Uh, oops, sorry This is where you're going to navigate to uh material It's on angular.io And you're going to go in and say there's this thing called the cdk And the cdk has something called accessibility And this is an entire package built for angular and you don't have to use angular material to use this That is specifically focused on accessibility. So this is things like there's list key management because that's important or focus trap We're going to talk about that Um, but there's all these tools for things that we recognize that when writing components if you're writing your own components You're going to have to manage these things And there's an angular specific way to manage it and we want to provide you the tools to build better components so that if you're like Building an enterprise application or you're maintaining an open source package or something like that and that has anything to do with the ui you should know about this page so again material docs cdk and the ally one accessibility so To add that We're going to go to our app module and we're just going to make sure that we've added this accessibility module So if I go to my app um I want to make sure that again, I add this import. So I'm going to import it from the right place And then I'm going to take my module And I'm going to add it to my imports and actually I like alphabetical um We're semi alphabetical I guess Somehow these things have gotten slightly unalphabetical, but a comes first. So I'm going to import it And now you're not going to see anything but if I go to my ng terminal, you can see that I just recompiled uh, it noticed that there was a new module it needed to bring in and so it did so Uh, and now we're going to make use of it, right? So what we did here is we just added to our module if you're familiar with angular applications We added a new module that has the ability To uh ensure that we can make use of all of these things. So again, I'm looking at these docs. I'm like wow There's some cool stuff in here that I want to use in order to do that. We need to bring in the module We just did that now. Let's go use the things so 10 focus trap I just talked about this right so I just said hey I notice here. There's this thing. Let's see. There's list key management. There's live announcer There's focus monitoring and there's focus trap. But what's focus trap? Well The cvk focus trap or trap focus directive is a way for us to ensure that when we're tabbing through our elements With something like a screen reader that we're trapping the focus to where we want So a really great example of this is if we open our shop We've changed the color a few times, right? So we said like hey, I want five bok choy chili crunch tofu mushroom dumplings. I don't like this gold color of this wrapper Let's make them plum And this right here is a lot a modal that I'm opening and so if I was navigating with a screen reader I would want to make sure that the screen reader knows when I'm navigating within this to trap focus Before I apply color, right? So let's say I'm in a screen reader and I open the plot or I open my wrapper color And then I'm like navigating through this and I somehow I'm like on this home button up here And I'm trying to click it like that makes no sense, right? But for a non-sighted user or somebody who is using a voiceover service Like you don't have the context to understand that you like you've escaped this modal that you're supposed to be trapped in Uh, so the best practice right is like if a modal is open focus should be trapped to that So that users can understand that there is an action that has to occur to navigate outside of that Right, you're not really in a place to select fillings right now. You're selecting the wrapper color So let's go with this like nice, uh, we're going hot pink So now that we have our hot pink five Fun dumplings, uh, let's look at how to add focus trap And this is going to be super easy All you're going to do is add the directive so a directive in angular again is um, sort of like a control That you're adding to something and all we're going to do is use this attribute called cdk focus initial And add it to our material context Now we are mostly just doing this to show what it would be like. Um Because we since we are using angular material Our uh, our focus is already going to be trapped Let's see. Where is this? On step 10 Um, but in our color picker dialogue, let's look at this so in our color picker dialogue html We have a selection list again sounds familiar But this time we want to make sure that the focus is trapped So all we're going to do is add cdk focus initial To ensure that we're focusing on the selection list when we first open the dialogue So when we open the dialogue, we're not accidentally focusing on like Again this home page or like our shop because our focus really should be within this um You know if we think about our other map selection list Oops, let's think about our other map selection list Um, this wouldn't make sense for using that cdk directive, right? Because here we don't want to trap focus here Again, this list of fillings once you enter this you can navigate out of it. There's other things on this page But here stop something on the page, right? So we want to add that directive So if we go back, we've added the cdk focus initial Directive to our selection list and let's save and again nothing's going to actually show up for us but In theory, we now know that we're trapping focus when we have that behavior Moving on uh step 11 We're going to do another cdk thing which is using live announcer So live announcer is the idea that when it changes made to the page we want to reflect that voice over so for example um, a great example is Again, I really like my color picker Let's say I navigate through and I change to hot pink Um, here, let me see if I can do it I do it yep voice over does not like my meat anyways, so uh Obviously you can't hear my voice over which is why I'm not presenting it But if I was to inspect and go into this module again Uh, voice over is going to read all of these things and let's say I click light green and then I apply color Like there is no notification to the user that that successfully happened, right? So like let's say it failed or let's say like, um, I accidentally selected gold And I clicked apply color and then I didn't know that I changed my color and I went to purchase them We want to make sure that when a user exits this modal They understand the selection they just made and they're notified of that change because there's a visual change happening on the screen So anytime there's a visual change happening on the screen a great example would be let's say out of form And I tried to submit a form and a bunch of errors happened Um, obviously there's a red error the error message is red, but for people using screen readers They're not going to know that all those errors have appeared on the screen because they're not highlighted Especially let's say there's like 10 errors. You can't highlight all of them So the best practice is to announce those to the user And there's a few different ways to do that. Um, you can do that politely you can do that. Um More urgently All of that is going to be done using the live announcer. So Uh, if you want to recreate that there are steps to identify the issue Again, I cannot have my screen reader read to you unfortunately But to fix this we're going to add the live announcer to our color picker. So We're going to go to our code We're on to do Step I think we're on number 11 Oh Yeah Mm-hmm Yeah Okay, and in our component. Let's first make sure that we notify the change So first in our dialogue component in our constructor We're going to change your constructor to have a reference to the live announcer So I'm going to copy and paste this code. I'm going to give it Uh, and I'm going to make sure that I import my live announcer Uh And some data Oops There you go, okay, just want to make sure I imported the things I needed to Um What is it out of me? Okay, there you go Um Cool. So what I'm doing here is I'm creating a constructor I already had my dialogue reference But now I'm just injecting to make sure that I know what data is being uh, Selected from a color dialogue data. So again, I want to make sure I know which color was just selected within my color picker component And then I'm going to use this live announcer thing. So remember we imported the module Uh cdk ally now I'm importing my live announcer from my cdk ally because I want to use it because I'm I'm going to announce something Uh, I'm basically a sports announcer at this point and then I'm going to create a, uh Change color Oops Now I'm going to do one other thing which is before I close my component So before I use my dialogue ref to close Because I've made a color if I've changed my color So not if I've exited because I don't want to do anything then right? There's no change to reflect But if I've changed my color then I'm going to go to my live announcer object that I've already constructed from live announcer and I'm going to use the announce Uh api call to say I've selected a color and I'm going to look at whatever color I have as an object And I'm going to make sure to announce that right? Uh, and that's it right so it's the live announcer dot announce super intuitive If you're interested in this, uh, again, I can go to the live announcer docs. I can say hey there's live announcer And I can go to my api reference to make sure that I understand what is there. Look my main method is announce Um, and now if I were to go and do that again remember any time I'm clicking a new Option and I'm applying the color and it's emitting that change. I'm also going to announce to my screen reader select color op pink or select color Green yellow right so that I can notify users even if you're not visually seeing a change on the screen But a change was made Um, so cool navi's live announcer We've done that we can verify and there's one last change. I want to make and then we'll wrap it up And this one last change is one more thing in that cdk ally package And this is high contrast mode and so high contrast mode. I don't have windows open right now But it's a windows specific feature called high contrast mode Um, I think that there are plans in the chrome organization to do something similar This is the idea that you can change the appearance of all of your applications to dramatically increase contrast So in high contrast mode Very typically instead of like pink and red and blue and all these colors on screen It would just be white and black to create the highest possible contrast. So again, we already did like You know, I'm checking all these things for contrast ratios. I'm seeing like the 50s the 60s We want to make sure everything is essentially 100% right is the highest possible contrast This is great for users who may be prone to migraines I have team members that use this because They get headaches if they look at screens too long, right? Like we all live in a world where we stare at screens all day High contrast mode is super useful for that and those are disabilities, right? Like they may not be her thought of in the same way as um more Typical disabilities, but they are just as valuable to ensure that you have an Application that is thinking about those use cases to make sure that everyone is able to use the services they're you're creating So high contrast mode is super cool. Again, it's on windows um, and we have something cool, which is the high contrast mode detector in the uh cdk ally package and so what you're going to do here Is you're going to actually go into css and this is super rare, right that I feel like um You can make accessibility changes purely out of css especially that like intelligently know, uh like That this thing happens and so what we're going to do is we're going to import Um our cdk ally, uh, you don't need the tilde anymore if you're following along here. Um, but Uh, that is a recent change to version 12 And then we're going to add some new css. So what you're seeing here is if I go to my purchase button Uh, I can add that when I have Uh cdk high contrast mode, which I'm detecting using again this import that I just made From the cdk ally. I now have access to a new mix in or a new um media query to say when cdk high contrast is on For my button Let's use that as a use case and let's make it look really high contrast So let's make the background color the lightest possible And let's make our outline super thick. So like The thickest possible and we're just going to do the same for dark mode just to make sure that both themes have that um Because I think that's important Uh And now let's go To our application and see what that looks like. Oops Oh, why is it mad? Okay No, let me try and rebuild a fun thing where rebuilding might save us Or I will say it got through 12 steps before I ran into an issue. So I think that's kind of impressive Um, all things considered Uh Yeah, oh it does not like that import. Do you not know why it does not like that import? Let's think about Okay, well I have something I can do Remember how I said at the end you can get check out Name I have all my changes. Oh and that's why um, so it looks like We've actually changed it. So you just import the cdk not cdk ally So I should go and change my codelab since that changed in version 13 So instead of this import statement, you're just going to remove that tilde And remove the accessibility reference and this is all going to be within cdk As part of the most recent version, we were more intentional about elevating how you import things like that. So If you're interested in that Feel free to Tweet me If I forget to change the codelab bonus points Um, so yeah, you can see that in high contrast mode Uh In high contrast mode, this would be applied, right? So cdk dot high contrast is how we're going to reference this um And again, I actually think this codelab is even more incorrect because cdk high contrast mode is for version 12 and below And we've now changed the reference to cdk dot high contrast um Just if you're falling on along Specifically and it main should reflect version 13th version of these things the codelab just did version 12 and below So I need to make that code change But I did get to the very end of this codelab before I ran into this so i'm going to take that as a success So since i'm not in high contrast mode, I just want to show What that would look like by removing that media query just so that you can see And so that is a great example of what high contrast mode, right? Looks like Uh, we're still like using a little bit of hue because we think it's fun But like an even better practice would just be to make it white, right? Like The highest possible contrast And we're going to even like make this even thicker, right? So like making sure that people have the highest possible contrast there We could make the text even larger or something like that But that is going to visually read as a very clear button without having any sort of like visual Clashing or like, you know, this green could be like really jarring on certain eyes So I want to make sure to respect that in high contrast mode, especially for those users by providing Some styling specific to that. So again, like this is a super cool mix And I think it's really cool that the cpk has the ability to Find these things And it's very cool to be a part of the modern web doing that and with that I think that we have 10 extra minutes. So I just want to say congratulations. Uh, so if we think about it, remember we Successfully We successfully went from a very inaccessible application to a completely accessible one, right? Um, we ran lighthouse to generate our score Again, we did this a while ago pretty sure it's still going to be at 100 but let's just like do it to check Uh, it feels good to give us some paths on the dock for this. So yeah, so we got 100 there Remember we linted With our lint rules that we added I'll run it again just to just to prove how good we are Um, so we did linting we use lighthouse to check our accessibility We also talked about how to manually test. Um, and for those of you following along Hopefully you have checked out how to turn on voiceover and do these things and then we went through eight different things, right? So we talked about why single page applications are great, but why we should we should think about uh unique page titles and how to add them especially using the angular router to do so and then manage those routes in our app component At the highest level we talked about how to check contrast ratios and add them Especially when maintaining the designs of some like angular material To ensure that like we only changed one line of code, right? Like we just changed the color of the text to make sure that that was accessible and the entire app Suddenly was passing for contrast. We talked about semantic HTML using buttons using headers appropriately We talked about selectable controls and how to make sure that like Instead of confusing nested checkboxes. We were using a more intuitive more cognitively dissonant like version of these things We talked about aria labels and how to add those to things like our sliders to ensure that we were defining the aria input So that our aria was meaningful so that if i'm like navigating this thing I can like successfully buy my uh Dumplings and then we also talked about cdk ally and some different things including focus trap live announcing and high contrast mode in css and so with that You can count how many different commits you have um, but feel free to again Revisit this codelab if there were specific steps that were tricky for you um feel free to Open issues on the github repository or tag me on twitter at twersky. It's my last name But instead of the y and e And I'd love to talk about all these things with you um Yeah, and let's see I know that the chat has been pretty quiet But if you have any questions now is the time to throw them. I know we have like seven extra minutes. Um But I just want to wrap up and say thank you again like it's really Cool to see people care about accessibility Especially with angular you have a huge um impact by doing these things. So even just running the um Core web vitals to see where you're at now and make like little adjustments. It's like a great place to start um, let's see Uh, there was also a feedback chat or a feedback link sent out in the chat So please go ahead and add it there. Um, and again, you can find me On twitter. I'll throw that in the chat as well And so that is the easiest way to get a hold of me Um, yeah, let's see I see some questions. Can you please help me with debugging with chrome dev tools? There's some really great resources for for chrome dev tools. Um, if you even go to just codelabs dot Uh developers dot google.com. There's some like great codelabs there um that are on like Dev tools Yeah, let's see Okay, well, I spelled it wrong, but if you spelled it right you would get more Um, yeah, so there's some great videos there. There's also some videos on the angular youtube for that Uh debugging is like a super broad question. If there's something specific to accessibility that you want me to answer Feel free to add that in the chat Uh, how is angular's app architecture different from other frameworks? Uh angular is super opinionated, but it's also um Uh It has a lot of solutions out of the box, right? So angular if we look at our application, right like each of my components I have a very familiar structure, right where I have html css Or a sass in this case and then the component and the component is where all of I have all of my logic The sass is where I have all of my styling then html is where I have the actual like structure of that Uh, that's gonna be the same no matter what application you go into and so it's super familiar, right? So like Really easy to onboard to a new application. Um Even if you're not familiar with like the actual code you're working with Um, and it also has all these things out of the box, right? So like we have the ally package We have all these things versus in other frameworks who would bring be bringing in third party libraries um Which is also great, but just a different approach So angular sometimes is thought of as a slightly larger solution, especially for like enterprises But really what that means is instead of like putting it on your Uh hands to say like I need accessibility I need to go find an accessibility package and bring that in and make my app larger by doing so We say like hey at its core you need accessibility We're going to give that to you and we're going to say that like It is going to be a little bit larger out of the box, but that's because out of the box We also are giving you solutions to these things Uh Let's see a recording will be provided Uh Suppose I need business logic. Could you share? You were only telling only Okay, um There's a question about business logic resources for Debugging it looks like Uh, so chrome dev tools is mostly uh for styling and visual changes, right like the All of these panels really are about Debugging like visual things if you're talking about performance or things like that and you're developing with angular I highly recommend you download angular dev tools Which does have things like a profiler where I can record like my change detection cycles And then debug for performance, right? So like let's stop that I can see that like somewhere back there Like that didn't do so well My app component was making sort of a costly change Um, so if you want to know more about this we have entire videos about this Uh angular the IO backslash guide backslash Dev tools um And dev tools would be a great way to start debugging uh for performance for business logic, uh You're gonna have to do a lot of that debugging yourself Lighthouse is what I use. Oh, yep We have we were We've talked a lot about lighthouse tonight Um, but yeah, I just want to say again, we have two minutes left But thank you so much for joining again. Feel free to reach out on uh twitter I know a recording of this will be sent out and you have all of the code to play around with so If you're interested in any of the specific recommendations I made again The codelab is online and available at all times