Build more accessible apps in Angular

Key Takeaways

[Music] hi i'm emma torski and today i'm going to share eight actionable steps to build more accessibly with angular let's get started accessibility is a vital part of web development ensuring that users can perceive understand navigate and interact with apps in fact one in four us adults have a disability that impacts their major life activities worldwide about fifteen percent of the world's population more than one billion people have some form of disability with about two to four percent experiencing significant difficulties in this course ally is shorthand for accessibility notice that the a is followed by 11 characters and a y today we'll use best practices and built-in techniques to address common web accessibility issues in a demo dumpling shop angular app by the end our app will meet accessibility guidelines wikag 2.0 and aria 1.2 and pass axe and lighthouse accessibility audits everything you need for this project is linked in the code lab in the description box below all of the getting started code is already in your github repository to begin clone the code and open it in your favorite dev environment once we clone install an ng serve and you'll see your starting point is a basic restaurant app designed for this code lab the code has been simplified to show the concepts in this codelab but it's pretty non-functional for example let's see if i click purchase obviously i'm not going to actually let you make a purchase how do we know what we want to fix we're going to start each example by recognizing the accessibility issue using a mixture of manual and automated testing in the current state of the web manual testing accessibility is mandatory you have tools that can identify accessibility issues but no tool can certify that an app is fully accessible manual testing ensures that you test for a breadth of ally concepts that include logical content order and feature parity to manually test applications for accessibility in this course we'll be turning on this computer's built-in screen reader and navigating through the app with keyboard navigation for more information you can see semantics and screen readers uh or if you go in the code lab there's some good resources on how to look for all of this stuff here so i'll go ahead and turn on my voice over accessibility shortcuts you can see that i can navigate through um so for the course i will be exiting that just because i don't want to fight with a voice over but as you can see that's what you'll be doing uh you can also use the mac built-in voiceover which is what i was just doing by clicking enable voiceover in the accessibility settings of your system preferences or what i'll do is press touch id three times and that's the short key for turning the service on and off we're also going to be using lighthouse to run accessibility tests so if i enter lighthouse within my console and i choose just accessibility for desktop i can generate a report and i can see my starting place of everything that i need to fix let's see i might need to stop and restart it because of how many things i'm sharing and while that's going let's go ahead and look over at our last thing which is if i go into my code you can also use angular's eslimp rules to link your code for common accessibility issues and automatable attributes that we can check for so if i go to all of my code and i enter into my eslint rc json this is going to be all of the eslint tests that i am checking for and in my rules you can see that the code already comes with these i believe 10 uh i don't know i'm not going to count but 10 accessibility issues uh or rules and i'm choosing to say two so this value can be zero one two uh with zero being nothing one being a warning and two being an error and that's choosing how when i run my lint rules these issues are tested for so you can go to the eslint repository to see more of these but these are the 10 that we recommend and you can find these all again in the code lab to add so that's a great really quick lift if you just want to automate a little bit of accessibility and if i go back to my terminal i can actually uh do npm run and oops and while i'm waiting for my linting i can see oops that i'm using too new of a version but it'll still run and we can see that we have one error being caught by one of those rules so the rule for click events uh have key events can see that there's something in my app that's not working correctly because there's not a key up or key event associated with something in one of my templates so we'll fix that in a little bit and if i go back to my application i can see that i get an 87 for my lighthouse accessibility score which isn't bad uh but we definitely want to get up to the green area of above 90 and we can do better and get almost to a hundred um so we see we have a bunch of different itemized things here and those are going to be some things we fix so now that we have a starting place i want to get started by fixing our first issue of the eight identified issues that i've picked out again by manual testing with voiceover by running this lint check here and by doing this lighthouse accessibility test to see what's going on there the first issue that we're going to fix is defining a unique page title providing unique concise page titles helps users using ally services quickly understand a page title's content and purpose page titles are critical to users with visual difficulties because they are the first page element announced by screen reader software angular is a single page application framework and as a result a majority of the transitions such as moving to a new page do not involve a page reload until recently this meant that each page had an identical page title and provided no value for understanding the page's context or purpose so if you can see that here let's identify that issue and then talk about how we're going to fix it so as you can see right now up at the top uh we're looking really small here but it says ally in angular and if i open up a new tab of this and go to maybe a different page let's go to our story uh you can see that this is like the about page of our website and it's still at the top just says ally in the angular and if i open one more just to really prove my point let's say i go to the last page so find us so this is like a map um if i had location services that said like where i'm located um in san francisco and we can see that all of these have the exact same page title so there's not a lot of information so if you can think about this in like let's say a google search website let's say you had like 30 tabs of google search open and all of them just said google search at the top but you had 30 different searches and you were trying to find that one tab it's really hard because you have to click into each one so both from like a ux standpoint it's just a terrible experience to have to go into each tab to figure out what's there but also from an accessibility standpoint that's the first thing your page uh or your screen reader is going to read to your users so you want to convey what's on the page in that page title so in angular v14 the router added a built-in method to define unique page titles out of the box this provides a streamlined approach to ensure developers follow page title best practices to fix this we're going to use that built-in tool so if we go to define page titles we're going to go into our app routing module and we're going to add this title property so this is the new thing that was added in version 14 when you update so i'm going to take this and i'm going to go into app routing and go into my code the other way you can check any of this is since we're on step four of the code lab you can search to do step four and quickly jump to where you wanna go and what we're gonna do is again add that title property so like here is a title and then if i save i should be able to go back let's go to this running it recompiled and see here we go here's the title so that title was automatically applied so this is super easy if you're familiar with former versions of angular it's much more difficult and just for the sake of time i'm going to copy and paste this code to define my new routes and replace it here and then this can be deleted we no longer need that to do um and if we look at the best practice here what i like to do is convey like what that page is so this is the shop page where you could buy things so our shop dash and then the overall website you can see common patterns of this if you go to other websites again like google search will say like what the search term is and then google search um so conveying the most important or most specific thing about the page and then the more general context so specific than general is just like a best practice that i like to follow but if we save that and go back then if i open up those tabs i just had you can see that now i have our story angular find us ally angular and our shop ally in angular and so we are seeing the difference without even needing to go so if i'm here and i want to go to that like find page i don't need to go into each one that's super cool um and again i'm just really excited because again previously you would have had to add and manually manage these page titles and apply that in your app component so this is a super easy way where i'm adding like i mean literally no lines of code were added just like a few characters on a few lines so super cool super quick super easy now that we've done that we've verified our change and we're one step closer so let's keep going your design might seem cool but it's not cool if people with visual impairments like colorblindness can't read your content the web content accessibility guidelines or what cag 2.0 define a series of color contrast ratios that ensure that your content is accessible in angular and on the web you can define color palettes that ensure your components meet these standards and are visible for users with low vision and color blindness so for this we're going to identify the issue by inspecting the page with the little chrome devtools inspector and the thing that's really standing out to me on this page is this matte icon and if i click on it and hover it i can see that that accessibility contrast is not good so again if i hover you can see that that contrast value in accessibility is quite low so significantly below the wacag guidelines if i go down to that value in the actual chrome dev tools by going up i can hover it and i can see that that contrast ratio is quite low and i can actually try and fix it to either 3.0 or 4.5 and see that it needs to be much darker for the recommended value so super cool that chrome has that built in but now let's go change that in the code so to do this um we are going to go back into our code and look at the palettes we've defined and we can see that i have this value i'm using this pink palette right i'm like really enjoying this pink red quite bright vibe but this text value is 500 um which if you're familiar with angular you know that the material color palettes that we're defining are using values from 100 to 900 with 100 b being the lightest and 900 being the darkest and so for the 100 to 500 uh contrast is quite low right we're only like two color steps off of one another so i'm going to go ahead and change that to 900 and go the furthest away that i can and go back and see how that changes it and if i reload we can see that anywhere that that really light color was is swapped to a really dark color um and i can also hover it and see that again that color contrast is now uh above four which is meeting the guidelines that i need so i've met that color contrast ratio i can also go this is something that again that lighthouse audit is going to do a really good job of checking so this is the contrast here because again this is super automated right we can test and see if colors meet it and here it was pointing out that those icons were not doing very well so now if i rerun my audit i can see my percentage should go up yeah so we got two more points there and that contrast is no longer there so we verified both manually by hovering and by running the audit again that i fixed the automated thing and my palette is now fixed and the benefit of doing it in a palette is that anywhere that you're gonna use icons or things that are using material in this application that are using that text color are now going to use that accessible color with the highest contrast so super great to do it in a more generic place like your styles versus individually overriding like that that color is darker the broader you go the more accessible it's gonna be we've fixed two things we've gotten our score up two points let's keep going and our next one is going to be another thing in our templates which is using semantic html we're now on step six and let's talk about native html so if we go to our application we're actually going to be on our r story page here and native html elements capture a number of standard interaction patterns that are important accessibility while a paragraph can be styled as a span or a div can be styled as a button semantic html elements ensure that screen readers and keyboard navigation understand the interactions and control your html when you're authoring angular components you should always try to reuse these native elements directly when possible rather than re-implementing well-supported behaviors this ensures that the page has good content structure and natural content flow and that the tab is in a logical order to assist users navigating the web with effective use of the keyboard so here we have two things that we're going to fix and the first we can actually see again in that lighthouse score if i go back but we can see that it's getting mad that the heading elements are not sequential um and if i actually go to this other tab and run another lighthouse uh test on this it's gonna get even more mad at me um because it's gonna notice that each of these html elements uh are headers in the wrong order so these heading elements don't make sense or not and are not sequential otherwise this page is looking pretty good um so to fix this we're gonna go back into our code and we're gonna go to we did that we're gonna go to to do six and we're gonna notice that in the about component i can even look at this and say okay i start with an h3 a header three i go to a header two which is supposed to be higher than an h3 right this should go one two three four five six um then i go to a five and a six but then i go back to a five then i go to five then i go right so this this number order doesn't make sense if i'm trying to go sequential i'm not doing a very good job at that so we're gonna go and i provided the code snippet in the code lab but we're going to take this and we're just going to reorder these things so that they have headers and it's going to be the same text but instead of using headers to decide the styling i'm going to use headers as what they are which is semantic html elements that are voice over would understand as the header of a section and then anything within that section i'm going to mark as a paragraph because it's essentially just like a line of text it's not a header it's not like the section information and then i'm going to use styling uh and specifically angular materials built-in styling classes to apply some stylings to make sure that i get this same style that i really like without having to use semantic html to sort of hack it so if i save this and i save this um and i go back we should see that yeah so that reloaded and we now have what is clearly two headers with some text in the middle that still has fun styling but isn't all a header right in general text and all the headers and if i rerun that lighthouse i should see a fix there which is exactly what we're trying to do and yeah so this page is now at 100 which is a little premature but quite exciting um because again we fixed that semantic html thing now if we go back here we're going to fix the other semantic html thing which if we inspect we're going to see that this purchase button right it clearly like in theory the idea of this website is like here's my dumpling preview um this is like a super cool nuanced dumpling shop where like you can order hot pink dumplings um of different quantities uh of different filling types so let's say we're going like chicken and tofu um and i want to click purchase this purchase bun should be how you purchase those dumplings right um but i can notice that it's actually just a div that's styled to sort of look like a button and even in the html it's called button it just is a div which is really not what we want here because again we want to use this semantic html for this we want to use the native button attribute because when we turn on something like voiceover and we navigate we can get to that control and voiceover will know what to do with that known interaction so to do this we're going to go to to do number six the other one and we're going to see here and see that even within our um code editor we know that there's an issue here right so this is what was being thrown by that lint error earlier um is it knew that this div has this click attribute that like it really shouldn't and so we're getting an in browser error because i made it that nglint error so if we copy and paste the code that i provided we're changing this to a button with angular material flat styling just coloring it a little bit and then putting the exact same class on it putting the same click event on it and just giving it the exact same text so again the before and after is very similar we're just making this a button and by doing that we get rid of the in code editor error um and if we go back to linting we can run that lint test again and see that that should also be fixed and while that's going we can also go back to our shop and we can see that there's now like even the ux of this is great right so if i zoom in so you can really see um if i like click there's like a click interaction right it's visible the ux is great right so we think about accessibility as just fixing things for people using accessibility services but a lot of what we've already fixed today right like this color contrast just makes it easier for everyone um or this like clicker interaction like the fact that it now has hover and you can see that the like cursor changes and there's like known interactions there in animation is like a really great benefit where fixing things for accessibility is not just for people who we typically think of as needing accessibility services it's really a better user experience for everyone so if i rerun that accessibility report on this and i go back and look i can see that all of my lending has passed so we're already much closer and we're up to the green space here so we're up to a 91 because again we fixed this button issue and we fixed this page all with just using semantic built-in html so a lot of great things happening already and we're only about halfway the next thing we're going to do is use selectable controls with angular material so here you can see that one of the complicated interaction patterns for accessibility services is nested controls in this demo we're using um all of these check boxes right and we have nested controls where you can get like chicken but not impossible meat and you can get tofu but not bok choy right these are nested controls where there's vegan there's meat but there's also nested options but how do you indicate to a user that you selected a subgroup or navigated to the parent item so let's think like when you're going through this interaction with uh voiceover how do you indicate that bok choy is a sub child of vegan or that meat is a parent of chicken and impossible meat that's a really hard pattern to try and work with in angular simplified menus and controls uh create a much more navigatable experience and so what we want to do is simplify those controls as much as possible and use the angular material list box to build out this interaction pattern so i'm not going to turn on voiceover just because uh running a screen share while also doing voiceover on this step is like quite difficult but as you can see it's that same interaction pattern that we had right where like you really can't convey these nested controls very well and it's just a really poor experience for everyone involved to fix this let's simplify this a little bit so we're going to go to step 7 scroll up and we're going to be replacing the check boxes with material checkboxes so first if we go to our code i'm going to swap here um and we go to to do item 7 we can see that to create selectable controls we have a ton of stuff here of all of our selectable controls in our shop component and what we want to do is just simplify this so we're going to define our uh options a little bit differently um [Music] here so our filling option instead of being a set of booleans is going to be um a list of strings um and i made them a little bit fancier so now we have a list of fillings we have our selected fillings which is again a nice little array list and then we're just going to in our faux purchase correct that the way we make a faux purchase is a little different because of that array list of strings [Music] fix just strings oops there you go cool sorry my strict taping that's really getting the best of me here so now we have um just an array here of our fillings that we're excited about i like made them a little bit fancier because why not again an arraylist of our selected ones and then if we go down here into our selected fillings when we make a purchase we're just going to go through create a list of each of the selected fillings that we have um and then just print that and that's going to be the flavor of dumplings that we're buying so now that we've fixed that part we're going to go into the actual controls and just replace this like really complicated whole ul list uh or unordered list with this provided here which is significantly shorter and what it is is again a matte selection list of list options where each of the fillings that i just provided is going to be one of the options that i give so i'm using the ng model um to make sure that i know that all of the selected fillings are going to be my selected controls and just again give that selection list um and here notice that i'm giving an aria label so i'm providing context for what that list is for aria or screen readers um so that when it's read as a list it's read as the dumpling filling list so just something to indicate there and then just each of my flavors is going to be one of those so quite easy and then i believe we can also just get rid of some styling um just to make sure we clean up some things so within that shop component that last to do is just a quick little cleanup and if i save all of that and i go back we can see that yep without doing very much we already have a bok choy and chili crunch a tofu and mushroom a chicken ginger and impossible meat and they're all within fillings and you can see that the styling changed quite a bit so i now have those click interactions it's not that unordered list but i've also removed the nested controls so if i went in with voiceover i would very clearly hear that this is a list of my fillings i would get to pick each one and i wouldn't get confused about whether or not i was ordering like the parent of what flavor or whatever and you can see that i believe if i run lighthouse again i would also get a slight bump just because um i'm not using sort of like a less supported pattern there so quite exciting if we move on the next thing is going to be very closely related which is step 8 is talking about arya in that template that i was just in i showed that i was using this aria label right and so you see this a lot where aria labels are going to provide context for what uh that control or what that html element is doing and how to be read to a screen reader so that it's not just a button it's a purchase button or it's not just a list of controls it's the dumpling filling list so it's providing that context for the screen reader or accessibility service so the next thing we're going to do is we're going to add a label to something that's missing a label so this was caught if we go in we can see that here the first issue we have is form element does not have associated label so again you can think of arya as a lot of those labeling technologies and if we look we see that the input didn't have a label here so that was that filling um and we already added that right um so that one was fixed if we re-ran it and the next one is our input field does not have a label so this slider that's deciding how many dumplings i want i always want more than weaker stuffing um doesn't have a label as well so if i go into to do eight i'm looking to see what aria label is missing and what i'm noticing is this matte slider is an accessibility it's a material component slider so it already has a lot of built-in accessibility just because it's the material component version it's a known interaction of a slider but i'm not seeing any aria label so i'm not providing context so here i'm going to go back to my code lab just make sure i get the code right and all i have to do is add this aria label value so all i'm doing is adding just that aria label and that's solving it so then if i went in with a screen reader or i ran that lighthouse command again i would see that instead of just being an unknown slider it would be red as dumpling order quantity slider so again you can think of this as providing context to what that interaction is and i actually would probably uh go back and remove the word slider since the uh roll would be read in a different place so this is the context not the interaction and then the slider would actually oops read that and a cool thing is if you hover as you saw there i could actually open the aria reference which is what i accidentally just did uh if you want more information on that so i'm gonna go ahead and i'm gonna run one more uh accessibility report just to see that and i fixed two things with arya now so i should see that fixed and again this is like pretty intuitive yep we're at a hundred percent uh more than halfway through already at 100 we're still gonna do a little bit more which is why i said that manual testing is super important um but from the chance of automatable fixes we have fixed everything that was automatically checked so that's a super cool goal i'm gonna go ahead and give myself a little bit of a pat on the back hopefully you can too and i'm gonna exit out of lighthouse just so that uh we're not too distracted by that uh but if you think about that it makes a lot of sense right like let's say you're on a screen reader and you get to the point of just selecting the quantity um and you get to like you know you change it up to like 13 there's no context for like what the 13 is of so we want to make sure that anytime you're making a slider selection there um you're being told that it's you know 13 dumplings that you're about to order that the order quantity of dumplings is 13. that way you don't get to the end and click purchase and say like well i don't know i like got 13 maybe that's like 13 fillings or 13 boxes uh versus 13 dumplings right i think i would be incredibly sad if i made this one because i thought that it was like one box of dumplings um and then a single dumpling arrived at my house that would be very sad we've gotten to the point of doing everything that we can without really digging into some of the nuances of angular and uh we've done a lot to be clear we've done page titles uniquely um just by using that built-in router property we've changed the color palette to have color contrast and we've really looked at the semantic html and controls as well as changing that pattern of this uh checkbox to be a little bit more intuitive and digging into the aria attributes of our templates to make sure that they're the most accessible possible so now we're going to move on to part nine which is where we add the power of the angular cbk accessibility package to fix common additional accessibility issues the thing about this is the cdk's accessibility module helps solve more complicated angular specific issues and by the end of this section we're going to add the module so that we can continue and do more of this you can read more about what the cdk ally uh package does on our docs website but you can really think of it as providing a set of tools just like anything in the cdk or component development kit um it's going to provide you a bunch of tools so that you can build components that are more accessible it's going to give you ways to hook into things like focus um live announcement contrast uh all kinds of more nuanced interaction patterns that are common on the web that we want to give you a direct way to hook into those apis and control so to do this we're going to go to uh to do step 9 and it's going to be really easy uh all we're doing is adding this module so we want to import the accessibility module um just like anything in a module we're importing it and then it's getting mad because we didn't use it but that's okay because we can add it to the top and then it's imported and we can save it and close out some files and go let's see it should have recompiled we might want to restart when we import a new module i always like to just reserve my application just in case to make sure i'm getting that import but yeah super simple so we're getting that ally module again uh the shorthand for accessibility from the import in the cdk um and really that's about it uh and i'm realizing i put this a little low i actually want it to be up here with all of my packages um and cool so we did that super easy probably the easiest step so far because there's no visual change right we just imported a new module let's keep going and look at three ways to use this module the first thing we're going to look at is focus trap if we open i previewed this earlier but if i open my color here i can select a new color so let's say like right now my dumplings are gold uh let's say i want to make them light green so i could apply that color they change color and in theory they would arrive and be a different color um or let's say like i went into dark mode let's say i'm really digging this like plum color for spring it's like very um seasonal um and so i can apply that color so when i open this uh dialogue what i'm doing is i should be opening this dialog and redirecting the focus of like a screen reader to know that it's inside of a dialog so if i had voice over open i would want to contain the focus within this dialogue because while this is open i want you to make a selection here before exiting out right you can click out but you haven't made any change there so i want to make sure that you know if you select this color attribute that i'm sending you to a dialog and i'm letting you make a change here before applying the color and going back right and i want to make sure that the user knows that they've entered a dialogue what they're doing in that dialogue and then when they exit i want to make sure they know what happened in that dialogue so a really common accessibility pitfall is that you'll open this dialog and somehow the screen reader will be able to continue to edit things outside the dialog while it's open right that i could like change the quantity of dumplings while within that dialogue um so i want to make sure i'm trapping focus and this is something that we call focus trap the angular cdk trap focus directive traps tab key focus within an element and this is intended to be used to create accessible experiences for components like modal dialogues where focus needs to be constrained in order to do this we're going to go to you guessed it to do step 10 and we're going to uh actually go in and add just this cdk focus initial and all that's doing is letting the user know where to put the focus so cdk focus trap um if we opened the documentation um is going to have a lot of stuff there angular thank you let's material oh that must be cut out and if i go into the components in the cdk i can see that within the accessibility package i'm looking at focus drop so this is things where i want to track focus and there's a bunch of options here so there's trapping focus there's changing the focus region and there's indicating initial focus so for the use of this code lab all i'm going to be doing is making sure that the initial focus is where i want it which means that it's on the selection list so if i go to to do step 10 i'm going to see that initially if i were to use a screen reader um and i go to this dialog the initial focus would be on the entire uh or would be on apply color right it would be on like exiting the dialogue and so i want to actually move the focus to the entire window so that you go through each of the colors before doing that so that you know about that so here i'm going to make uh one change which is just adding the cdk focus initial which is saying this is where i want the initial focus to be on that list of colors um and it says easy that stop and then if i save it and i go back it's recompiled and again accessibility shortcuts you can hear that i turn my voiceover on um accessibility shortcuts and if i turn voiceover on and i move it over so you can see what is being said we're gonna go here and i enter you can see that initially that color selected one and eleven you are currently on element inside the response okay so you can see that when i selected that color and i opened the dialog i'm now focused on white the first color in that and if i scroll through i can select a color so i'm selecting color and then i can exit by going to apply color and i'm going to exit out of this so that i'm not fighting with voiceover but what you saw there to recap since i was fighting the voiceover is that i selected this color and now my focus was on white the first color there versus one of these controls to exit right so i was put directly into the colors and i was told what i was selecting the dumpling color and then i was able to apply the color and exit so that was done again using the cbk focus initial but there's also really great stuff that i would highly recommend if you're using dialogues on other things like chopping focus again i didn't need to chop focus within that dialogue because i am using the matte selection list which automatically knows when i open this matte dialog with a matte dialog action to control and trap focus i was just making sure that um the focus was where i wanted so we've done that we've verified and that's step 10 off the list so we verified it our color picker now has correct focus trapping and we're super close to the end our next thing is going to be super super simple uh similar to what we just did which is again looking at that color indication and this is announcing changes so when i go and make a change let's say i change the color right to green yellow this like weird neon when i exit i want to make sure the user knows what just happened so i want to announce to the screen hey you just changed the color so you know like there's been a change to the screen you exited that dialogue and something happened another common thing is if you make a purchase i want to announce that that purchase was made let's say this is like hooked up to some sort of payment platform and you've exited and you've made a payment i want to make sure that this payment or this purchase that i'm just console printing for now is announced to the user so that they know what they're purchasing or going into another window to purchase so to do this we're going to use something else from our accessibility cvk package which is called live announcer and so live announcer is going to allow you to notify when something on the screen has changed you can imagine if you're attempting to submit a form or complete a purchase and not knowing that an error has popped up right error handling is super frustrating let's say you go to submit your address because you're making a really big purchase and um the zip code is off or something and so you're just sent back to that form and visually there's an error on one of those form attributes but to somebody who is non-sighted you're not being notified of what the error is and you're having to go through the entire form again to figure it out i know it's really frustrating for me when like i don't know what the error is and i'm being sent back to a form so air controls are a great place to use live announcer which announces messages for screen readers to use using the aria live region to ensure screen readers are notified notified about those notifications and live page changes so to do this um we're going to add the live announcer uh so we're going to go to to do 11 and we're going to go into this component and add the live announcer attribute so if i go to to do 11 we did that um we're going to first go into the component let's see yes so first we go into the component we import the live announcer to do [Music] then we go into the actual class and we want to just add the live announcer to the constructor here and i'm just copying and pasting it so that you know what is happening but in this constructor here i'm just going to replace the constructor with this other constructor which includes that live announcer um added so uh let's see oh it looks like i'm missing something here oh change color oh um and here the last thing i'm gonna do is in my change color um i'm going to change how i change color so here in this change color method i'm providing a color and then i'm re-emitting the new color and what i want to add here is this live announcer attribute right so i want to change the color but i also want to announce um before changing that that color has changed so here in this to do i'm going to add this dot live announcer um and i'm going to announce uh sensible thing that the new color has been selected so before i close um and i'm going to do that anytime the dialog is closed just to notify and then the other thing i'm going to do is i'm going to go into this component and i'm going to do the same thing again for that purchase that i was making right so the other to do is to do the exact same thing and add that live announcer but in my other place which is to import it to my shop component um and do the exact same thing which is import uh live and answer from the cdk ally i'm gonna go into my constructor i'm gonna make sure i have a reference to that live announcer just a private live announcer instance and then i'm just gonna again use that super simple thing where on my purchase my faux purchase i'm going to say this live announcer so of my instance i want to make an announcement and i want to announce the exact same thing i'm console logging which is what that purchases so that in theory you would notify again this is sort of more of like a demo of what i would do with this um but error handling is a really great instance and so here i'm gonna go back make sure it recompiled it did i'm gonna turn on services and before i do so what you're listening for is when i click this button i want to hear uh or you'll be able to visually read that what is being read to the screen or what is being read with voiceover includes that announcement so if i turn on my services again accessibility shortcuts check and i show you what's being read application now in our purchase button group name your current button to click on press control this slide is hidden in slideshows purchase purchase 11 ducklings in the color gold common result purchase 11 ducklings in the color gold change dumpling wrapper color light green selected unlock change dumpling average color button group main select color light green you are currently in rotten group two voice over off yeah and so there you saw with a little bit of hacking a voiceover given uh the screen record happening that when i clicked purchase i was announcing again that i had made a purchase of this gold color and then i went and changed the color to light green and you saw that it announced that a new color had been selected so again these are instances of using this instance of live announce to make sure that the user knew and now drum roll please we have one last thing which is maybe like the coolest but a little bit more niche thing and that's something that we're going to call high contrast mode so microsoft window supports an accessibility feature called high contrast mode and this mode changes the appearance of all applications including web apps to dramatically increase contrast in angular we want to respect the user's preferences for this app and so we want to use the high contrast mode detector which again is going to be another attribute within this accessibility package to make sure yes targeting high contrast mode um to make sure that we are respecting the user's preference there so internet explorer microsoft edge and firefox support this mode and google chrome currently does not support window high contrast mode but um there are changes being made to css all of the time to uh better respect again different forms of high contrast different color palettes prefers reduced motion there's a lot of css things we can do for accessibility and so this is one that we specifically want to look at for styling so here since i'm currently in chrome i'm going to just mock what this would look like so that you can understand a little bit of the difference and so we're specifically going to be looking at this purchase button here and if i go into to do a 12 um i can see that in high contrast mode i would want to change uh the difference between these two colors to be essentially like white and black right it's it's almost white and black and how high the contrast is you can think of cag as using a 4.0 color contrast ratio that's what we changed initially where these colors are quite different think about if this background was white and this was black like the highest contrast you can get is what we're looking for so to support high contrast mode we're going to go into our style css and we're going to use the cdk high contrast mix-in that's provided with accessibility um so we're going to import this in again to do 12. our last one um and so we're going to import that and then we're going to go down a little bit and we're going to use this include um in purchase button so we're going to go to our purchase button we're gonna add the include and so this is include um like the sas thing uh and then in high contrast mode so when the uh service or when this application is being served or used in a high contrast mode setting um with that user setting turned on we're going to add a really thick outline and we could even like do more right like let's go big here uh and then we're just going to change the color to like the lightest possible version of again this pink palette that we're in um just to go as light as physically possible and so if you want to see what that would look like um since again we're not in high contrast mode i'm just going to go ahead and change it here so that you can see again what we're doing there and so here oops my computer is mad at me just got this back why hm let's try and use nope try use no tilde can't find style sheet to import let's try always fun um [Music] okay well as we debug this and regenerate what i'm trying to show here is that if we go to again these two things we're using this mix-in to ensure that when we're in this high contrast mode which is provided again by the accessibility service that we're adding the context of trying to make the purchase button as dark as possible again just to show that difference um it's really unhappy with that import there's something about strict importing that it's not uh working with my compilation okay let's ignore that for now um so if i go back can you compile these hi contrast okay so if i go to the instances of this if i just mock what's being happened here or what's happening here i want to show the difference and so if that import is correct which it will be in the code lab you'd see that if i was a user that had this setting on that i would then see this very uh differently styled purchase button that really emphasizes what's happening there it has a much higher contrast color um the outline is much significantly larger so it's really showing that control and it has the exact same behavior but again it's just emphasizing that styling so this is for maybe a more low vision user or somebody who has these controls on this is a really common setting for people who sometimes have chronic migraines who need to see really high contrast to not have to like focus really hard and discern the difference of like small nuances and so if i was styling my entire app with high contrast mode in mind i would go through in each of these controls i would make sure had the highest contrast had the largest outlines i would change the style even of maybe these dumplings that i'm um showing to have a much thicker line to make sure they have maybe like a white background um so really restyling your application again with this high contrast mix-in being included to make sure that you can do that and again um i have changed this import so you would just want to make sure this import is pointing to the correct thing it's possible it's syntax don't worry too much about this nope okay well we're gonna keep moving on but in theory oops hello okay let's make sure we compile so a little bit of an anticlimactic end but let's move this back to not a ridiculous high contrast uh to be uh other one and we can see that uh visually not a lot has changed from our application but we've done a lot to change the different controls we have almost wrapped up and i just want to do a quick recap of the eight steps we did so you can think about the changes you made and how they might apply to applications you are currently working on uh that aren't a dumpling shop because this is fun but you know there's a lot of other cool things out there that are using accessibility and it's important that all of them uh uh think about accessibility and make these changes so the first and probably the coolest is if you update your application to version 14 you can automatically change that page title and again this is like super cool super built in it's very new but if i look for that routes definition i can see that all i had to do was add that title and now i'm seeing these unique page titles up at the top so that was step one step two we changed this color here of this icon to make sure that it had the highest possible contrast ratio and met with cag guidelines in step three we changed the semantic html of our purchase button and our story to make sure that they're using semantic html in the next one we made sure that we had selectable controls by again using aria to apply an aria value to this slider to make sure that we were giving the user context with aria labels to ensure that we were notifying them what they were doing on the screen and then we went over to our other control and simplified our controls of our checklist here of all of our fillings so that instead of using nested controls and a complicated pattern with low accessibility we could simplify the controls with a similar result to ensure that we have higher accessibility of our control system and that was everything we did without any angular package then we went and we added the angular cdk accessibility package or ally package and we went in and we changed three things there we added the focus trap to control focus of this color dialogue we also announced changes when we exit the color dialog as well as when we make a purchase let's go in dark mode for this uh using the live announcer to announce those changes and finally we looked at high contrast mode to ensure that users with a selection for a specific uh change on their screen or a visual indication of preference are being respected by your application using the built-in high contrast mix-in that we provide and so we did all of that and we fixed eight super quick super easy things uh for how to fix accessibility in this app congratulations you addressed common web accessibility issues in your angular app what was your favorite step my personal favorite is angular v14's new streamlined page title options directly in the router it's a game changer for out of the box accessibility to see all of the solutions check out the main branch in the github repository you now know the key steps required to resolving eight common ally pitfalls in your angular application you so much for joining me don't forget to follow angular on twitter and youtube and i'll see you next time [Music] you