Enhance accessibility in your Angular builds | Workshop

Key Takeaways

[Music] 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 going to 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 uh but to get started i know there were some links sent out ahead of the time um but you can find everything that we're gonna be talking about on codelabs.developer.google.com backslash angular dash ally uh 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 where you'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 um but just to back up before all of that let's talk about why we should care about accessibility right um so accessibility is super important for all web developers to know about it really touches every point of the development life cycle from design to development to testing uh everyone needs to sort of have an accessibility hat on uh as developers and anywhere in that uh and in fact one in four u.s adults have been found to have some sort of disability that impacts major parts of their life so you can think about that as um obviously there are some of the things we initially think about when we think about accessibility so things like blindness or low vision uh 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 uh like you know how to 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 uh 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 me uh 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 um to dig in today we are going to be building an application i have all of the source code for you to get started um i thought it'd be fun and cheeky to do a dumpling shop i love a good dumpling um maybe throw in the chat what your favorite form of dumpling is i am really into gyoza right now uh there's really good cheap dumpling shop down the street from my apartment um but we will be taking an application that i intentionally built without really thinking about accessibility in mind and we will be addressing uh 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 uh 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 uh 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 uh but we're going to be working from this so make sure to fork fetch my branches and we're going to be starting on the get started branch so in your local setup um i am assuming you already have angular npm installed you have everything up and running but if you are struggling to do anything there uh please make sure you can go to angular dot io backslash start and that will get started so if you're having any dependency issues with like typescript or um getting the angular cli up and running or anything like that uh this is gonna be the tab to go to and maybe just for the rest of the code up you'll just follow along and look at my code um 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 uh again just this angular accessibility repository in my local and you're going to want to make sure you have npm installed i've already done this so hopefully it's all cached and then i'm going to have ng served so here we're just going to run ng serve again i already had it once but i'll do it again for you and we're going to use the cli to make sure that we can build our code uh look at some fun 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 uh kind of exciting kind of cool i think everyone should give a little pat on your backs for that uh we love an updated code repository uh and this is what we've built right so if we go to our localhost 4200 this is our repository and we are currently on again if i just check out my get branch if i go back to my terminal i can see that if i do get branch i am on the get started branch so make sure to fetch both branches there should be two 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 uh 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 uh 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 gonna do that so that my face is less pink for the light uh but we have our shop which is our main page uh 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 uh 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 um 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 uh chicken and bok choy 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 uh 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 uh and we have generally good hours uh it is actually after hours for us today uh locally but you know that's okay we're gonna continue with our dumpling purchases so besides that uh 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 um but we recognize that'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 voiceover i would navigate try and 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 uh for example today we're going to be using the lighthouse tool in 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 mean so there's a cognitive aspect of that and like computers are smart uh 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 uh if that makes sense so to run our automated tests we're going to go into uh our application again we're going to go into if you hit command option j uh we're opening the chrome developer tools again i'm working in chrome it's it's gonna 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 drop downs and it's gonna be one of these uh you can see i also have the angulardub tools my 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 and it looks like i'm gonna have to do it again anyways cool and it's gonna run my report uh 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 uh that if you want to do it anyways so we got a 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 to-do lists then the third type of check that we're going to run is linting and so this is where in angular i'm using eslint and i'm specifically looking at the angular es lint rules to make sure that i can lit my code so this is before it even compiles like are there things wrong with my code uh that i could have fixed and so i have let's see one two three i have ten different checks here in my eslint 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 uh which means if i have lint checks on and i run linkedin 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 stuff like that this is like hey this slider should have a role 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 link rules and i can see that i have again 10 rules here set to those things uh 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 rule it's just a slightly different declaration for your angular 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 uh my linter is gonna run it's gonna say hey i'm checking your code for all these things and 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 them as a one and that's gonna throw a warning two is gonna be an error and depending on your ci cd 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 which is probably what you're here for so uh we're gonna start with maybe the like largest issues and work down in granularity uh and see how much time we have um and i'm happy to answer questions along the way or at the end uh 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 are defining unique page titles so single page applications which angular is 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 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 in 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 oops 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 gonna load the shop component about about locate location component um so pretty self-explanatory right that maps exactly to these three taps that are three routes here and because it's a different route i want a different title where i 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 still 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 locate me dash uh i in angular 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 could 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 define a way so that this will actually be known so you're not even gonna have to do this next part but for now what you're gonna 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 i'm 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 gonna cut and paste and talk about these code this code instead um okay so what i'm doing is i oops let's do that one 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 [Music] okay so i'm going to define a constructor i'm going to create a title service that holds a title uh i'm gonna again i have my router and my activated route and what i'm gonna do is on init i'm gonna say hey can you get the title and every time you get the title what i want you to do with it is i wanna 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 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 uh just to test it we can click on our story and we can see it now says about uh 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 uh so super helpful uh 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 um 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 uh 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 in angular we 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 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 uh 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 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 tabbed 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 uh 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 um big impact so the next thing that i think has equally large impact is color so this is one that our 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 uh which is far below the required amount so uh 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 excited 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 uh or something that has really low contrast it's super hard to read that uh 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 for to do number five so in our style css i'm using angular 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 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 gonna pick a bunch of colors here and see like where these colors are coming through so if you saw that uh with angular material if you're not familiar you define a color palette and you pass in those color palette variables so if i go to my here let's just do it if i go to my angular material npm 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 that checks out and then i think i have a lighter color which is my 100 so again i'm using like these nice like 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 a100 which is super close in color right like i don't know if you can see these little squares without zooming in but they're really far away from each other so i'm going to use 900 i think in the code lab 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 looks like it still doesn't like that contrast 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 gonna pass for uh 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 code lab um 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 and see if that helps so let's see i could go to the 50 and just make it as contrasted as possible and see if that helps let's see yep 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 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 percent 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 a100 because i liked that better um 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 am 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 um but there's a bunch of cool stuff in chrome canary but i think it's worth it so that said we fixed our contrast thing so in general what i would recommend in color contrast is obviously i'm using a color palette which is super helpful because anything with a 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 uh what our color should be and the more you have color variables so using things like css variables uh 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 for the contrast errors there and that's where it was recording it and then you also saw that in chrome devtools i used this inspection element and i was hovering 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 uh 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 is 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 uh from here on out we're gonna get a little bit more semantic so we're gonna 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 if i 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 uh 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 arya 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 interacting with things like screen readers and those types of accessibility services so when we don't use semantic html we completely bypass 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 and 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 and 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 mean 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 gonna 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 uh 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 try and screen read me out of this meet that we're in but if i did turn on the screen reader by triple clicking my escape key or you can go to voiceover 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 um 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 i was complaining about and this is what our uh linting 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's better and this is just a button i'm using the matte flat button which is a material flat style button i'm giving it a color of primary 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 it in the click event to a button and the benefit here is using symantec 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 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 uh 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 headings 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 h3h2h5h65 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 the 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 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 a title for example it's like semantic html so we have fixed that and let's look at that did it reload i don't know 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 turned 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 mad at 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 re-run my accessibility check again and i'm going to see if it catches uh that semantic change we made right uh because this got mad at us for on our story page the fact that we had those headers that didn't make sense and look it's no longer mad 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 linkedin i see that all files are passing linting so pretty good progress right like semantic html got us uh pretty far it got us into the green it got us to a fully passing linking file and there's still things that we can fix um so again if you are just joining us and looking for the repository it is all linked within our code lab and we are now on we've now done uh 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 gonna fix uh is something that is angular material related so if you look at uh our shop here uh 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 uh 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 um but i do for purposes of accessibility of you seeing my screen so i have all my toppings here right i have 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 where like i can click vegan and get both if i unclick bok choy it knows that it's not the fully vegan one um i can make some fun selections here right but nested check boxes 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 you're 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 bok choy 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 bok choy then tofu than 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 and we want things to be as simple to use this as possible especially for cognitive 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 with like my vegan versus me 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 navigateable 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 check boxes and i want to do it really quick for my application and they need a scaffold like use a component library use angular material because you're gonna get accessibility out of the box so in order to do this we're gonna replace our checkboxes with materials checkboxes and to do that we're gonna go to our component and we're going to change how we add these things so we are now on to do number seven i've marked these things just to make them a little bit more sensical 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.component.ts again this is the component file where we are defining all of our fun things for navigation and uh we are going to add our uh selectable controls we are going to change our fillings to be instead of an object with a uh set of boolean so again this was maintaining like the filling variable was saying like is this box right true or false is this tofu true 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 um 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 i kept the impossible meat 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 changed my uh objective 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 mad about this oops maybe it doesn't oops there you go okay sorry i'm just fixing my single 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 list so in my component object in my html uh i'm going to get rid of uh 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 map 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 had 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 uh 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 check boxes of some extra flavors uh my extra spinach of new flavors of dumplings so i've reinvented my dumpling flavors and i've made it more navigateable uh that is a 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 uh 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 um yeah 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 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 clearer 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