Enhance accessibility in your Angular builds | Workshop

Aug 15, 2023

Enhance accessibility in your Angular builds | Workshop

Get started developing with accessibility in mind in this Angular workshop. Join us as we take a basic application and look at eight ways to enhance the usability to ensure we are developing for all users.

Resources:
Codelab → https://goo.gle/3EmVZxk
Code → https://goo.gle/3jJGwPU
Angular DevTools → https://goo.gle/3mlIgjX

Speaker: Emma Twersky

Watch more:
Watch all Chrome Developer Summit videos → https://goo.gle/cds21-allsessions

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#ChromeDevSummit

Content

0 -> [Music]

16.96 -> hi everyone my name is emma torski and

19.52 -> i'm a developer relations engineer at

22 -> google on the angular team and i'm super

24.56 -> excited to be here today talking about

27.039 -> how to build more accessible angular

29.279 -> applications

30.56 -> so we're going to spend the next hour

32.64 -> hour and a half ish

35.28 -> talking all about accessibility and

37.6 -> angular and web accessibility and i'm

40 -> happy to answer any of your questions

41.6 -> along the way

43.04 -> uh but to get started i know there were

45.84 -> some links sent out ahead of the time

48.96 -> um but you can find everything that

50.879 -> we're gonna be talking about

52.719 -> on

55.48 -> codelabs.developer.google.com backslash

57.199 -> angular dash ally

60.079 -> uh and i'll throw that in the chat as

62.16 -> well

65.6 -> and i'll throw that a few more times as

67.84 -> i see people coming in so that's where

70.08 -> you're gonna have to get started and so

72.32 -> let's talk a little bit about

74.72 -> this topic first before we dig into some

77.52 -> code and i really want to spend the most

78.96 -> time looking at actual code asking

81.36 -> questions about some common pitfalls and

83.92 -> stuff like that

85.2 -> um but just to back up before all of

88.08 -> that let's talk about why we should care

90.64 -> about accessibility right

93.2 -> um so accessibility is super important

95.92 -> for all web developers to know about it

98 -> really touches every point of the

100 -> development life cycle from design

102.479 -> to development to testing uh everyone

105.6 -> needs to sort of have an accessibility

107.84 -> hat on uh as developers and anywhere in

110.799 -> that

111.759 -> uh and in fact one in four u.s adults

115.119 -> have been found to have some sort of

116.799 -> disability that impacts major parts of

118.88 -> their life

119.92 -> so you can think about that as um

122.399 -> obviously there

123.759 -> are some of the things we initially

125.759 -> think about when we think about

127.04 -> accessibility so things like blindness

129.92 -> or low vision uh deafness

132.959 -> hearing impairments motor restrictions

135.2 -> things like that but it can also be

136.8 -> things that are temporary so things like

139.36 -> maybe i broke my arm a few years ago and

142.319 -> i couldn't type with one hand and it

144 -> made it much harder to navigate my job

147.04 -> of uh like

148.64 -> you know how to how do i code with only

150.959 -> one hand especially if it's my left hand

153.12 -> like i can't do anything with my left

155.04 -> hand uh

156.879 -> so

158.08 -> i think it's really important to think

159.44 -> about the fact that like accessibility

161.2 -> is really important for a certain part

163.84 -> of the population but it applies to

166.16 -> everyone

167.44 -> and we can all benefit from it a great

170.4 -> example of that is if you think about

172.4 -> closed captioning right i have closed

174.48 -> captioning on in this google me uh and

176.72 -> if that's something you're interested in

178.319 -> i would highly recommend going to the

180.72 -> settings tab at the bottom and turning

182.319 -> those on um

184.72 -> because sometimes it's hard to

186.959 -> understand certain words that people are

188.72 -> saying or you know i watch netflix a lot

192.239 -> and i always turn on my closed captions

194.56 -> because sometimes i have the volume low

197.36 -> so that i can be doing other things or

199.2 -> i'm vacuuming while trying to watch tv

201.68 -> right and so while i was not the

203.2 -> intended audience of that accessibility

205.28 -> feature i benefit from it

207.44 -> and if you think about that more broadly

209.84 -> adding accessibility to your web

211.76 -> applications that you're building

213.12 -> especially in angular just broadens the

215.92 -> impact that that website can have and

217.76 -> the usability in general

219.76 -> so

221.28 -> important from a web standard

223.04 -> perspective but also important just

224.72 -> because it makes things more usable

227.599 -> so

228.64 -> um

230.48 -> to dig in today we are going to be

233.12 -> building an application i have all of

236.08 -> the source code for you to get started

238.48 -> um i thought it'd be fun and cheeky to

240.799 -> do a dumpling shop i love a good

243.519 -> dumpling um

245.28 -> maybe throw in the chat what your

246.64 -> favorite form of dumpling is

248.799 -> i am really into gyoza right now uh

251.439 -> there's really good cheap dumpling shop

253.439 -> down the street from my apartment

255.92 -> um

257.28 -> but we will be taking an application

259.759 -> that i intentionally built without

261.199 -> really thinking about accessibility in

262.88 -> mind and we will be addressing uh eight

266 -> different pitfalls of things that i

267.84 -> think everyone can go back to

269.36 -> applications you're building in your

270.72 -> daily life

272 -> and add some accessibility in there

274.639 -> i'm also happy to answer any other

276.24 -> questions about angular

278.24 -> i work on the angular team and i'm super

280.24 -> excited about our focus on accessibility

282.56 -> right now

284.08 -> so

285.36 -> we are going to navigate to the next tab

287.68 -> here uh and can everyone see my screen

290.56 -> is this large enough for y'all

293.04 -> feel free to throw in the chat any

295.12 -> questions you have or if you need me to

297.12 -> like

297.84 -> go back to a line of code or anything

300.24 -> like that i'm happy to do that

302.56 -> so

303.68 -> to get set up again this link was sent

306.08 -> out to everybody but i just want to make

307.68 -> sure you're going to go to

309.919 -> the github code labs

313.28 -> repository here on github you're going

316.32 -> to clone my repository

318.639 -> uh

319.52 -> i already have a fork of it i see some

321.84 -> other people have done that maybe you've

323.52 -> started

324.56 -> oops i'm not logged in in this browser

327.44 -> you cannot see that i

329.12 -> in fact have started my own repository

332.08 -> uh but we're going to be working from

334 -> this so make sure to fork

336.4 -> fetch my branches and we're going to be

338.24 -> starting on the get started branch

341.12 -> so in your local

343.039 -> setup um i am assuming you already have

345.52 -> angular

346.88 -> npm installed you have everything up and

348.8 -> running but if you are struggling to do

351.52 -> anything there

353.199 -> uh please make sure you can go to

356 -> angular dot io backslash start

359.52 -> and that will get started so if you're

360.96 -> having any dependency issues with like

363.199 -> typescript

364.56 -> or um getting the angular cli up and

367.199 -> running or anything like that uh this is

369.28 -> gonna be the tab to go to and maybe just

371.44 -> for the rest of the code up you'll just

372.72 -> follow along and look at my code

375.199 -> um but that said

376.96 -> we have our github repository we've

379.759 -> taken our code we've

383.039 -> cloned it locally and so i have my local

386.72 -> version here

388.08 -> uh again just this angular accessibility

390.96 -> repository in my local and you're going

393.199 -> to want to make sure you have npm

394.96 -> installed

397.12 -> i've already done this so hopefully it's

398.8 -> all cached

403.12 -> and then i'm going to have ng served so

405.919 -> here we're just going to run ng serve

408.88 -> again i already had it once but i'll do

410.96 -> it again for you

412.8 -> and we're going to use the cli to make

414.639 -> sure that we can build our code

417.12 -> uh look at some fun lobsters in the

419.039 -> background i highly recommend having a

421.36 -> cool

422.88 -> computer background to look at for while

425.199 -> you're building

426.96 -> and the super exciting thing about this

429.039 -> compiled successfully the super exciting

431.36 -> thing about all this is i'm doing this

432.8 -> all in angular version 13. so if you've

435.44 -> been following angular closely version

437.199 -> 13 has only been out for like a week

439.919 -> so

440.8 -> maybe this is the first time you're

442.16 -> touching version 13 code uh kind of

445.039 -> exciting kind of cool i think everyone

446.96 -> should give a little pat on your backs

448.96 -> for that uh we love an updated code

451.52 -> repository

453.36 -> uh and this is what we've built right so

454.96 -> if we go to our localhost

457.759 -> 4200

460.08 -> this is our repository

462.72 -> and we are currently on again if i just

465.28 -> check out my get branch if i go back to

467.84 -> my

468.88 -> terminal i can see

471.919 -> that if i do get branch

474.08 -> i am on the get started branch so make

476.639 -> sure to fetch both branches there should

478.479 -> be two

479.599 -> get started is where we're starting in

482.16 -> our starting place and the main is where

483.919 -> we're headed so if you at any point get

486.639 -> lost along the way you can always go to

488.479 -> main and all the code will be there that

490.319 -> we're adding

492.24 -> and the other way to do that just to

494.479 -> give you that ahead of time

496.24 -> is that if we go to main

499.199 -> we can see in our commits on github that

502.24 -> each one of the steps we're about to do

504.08 -> are all an individual commit so if any

506.4 -> one of these uh

508.639 -> changes somehow gets ahead of you you

511.36 -> can also just check out on a certain

513.36 -> commit on github

515.599 -> so

516.719 -> let's go back to the code lab we have

518.64 -> our code we've checked it all out we

521.36 -> feel good about it

523.039 -> let's talk about this uh

525.279 -> this application besides being a

527.36 -> dumpling application i just want to take

529.2 -> a look at like what's there so

532.72 -> my photos are in dark mode i'm gonna do

534.48 -> that so that my face is less pink for

536.56 -> the light

537.92 -> uh

539.68 -> but we have our shop which is our main

542.64 -> page uh also if you click the home and

545.519 -> it has a bunch of dumplings so i can see

547.2 -> what i'm buying in my make-believe land

550.08 -> uh

550.959 -> the idea here is that i get to pick i

553.12 -> can order up to 12 or 13 dumplings

556.56 -> so this is like a custom dumpling

558.88 -> website i know a lot of holidays are

560.48 -> coming up maybe you want to order like

562.56 -> some really fancy special dumplings for

564.88 -> a loved one

566.48 -> um

567.44 -> so we get to pick what fillings we want

569.279 -> in it we get to pick how many we want

572 -> and then the super cool feature of my

574 -> dumpling website i've decided is that

576.08 -> you can also dye your dumplings to a

578.959 -> series of rainbow colors so for example

581.44 -> let's get some like sky blue

584.08 -> uh

584.959 -> chicken and bok choy dumplings and you

586.8 -> can click purchase

588.72 -> obviously that has not built out but in

590.88 -> our console we are logging that in

593.279 -> theory we are purchasing these dumplings

595.279 -> we could send you to like shopify or

597.04 -> something

598.08 -> right

599.04 -> uh if you want to know more about this

600.88 -> make believe dumpling company i have an

603.44 -> about page and then you can also find us

607.04 -> again it's a development mode so you

609.12 -> can't actually find us we're located

611.44 -> somewhere in san francisco i

614.8 -> am also located in somewhere in san

616.8 -> francisco so i thought that was fitting

619.36 -> uh and we have generally good hours uh

622.32 -> it is actually after hours for us today

624.959 -> uh locally but you know

627.44 -> that's okay we're gonna continue with

629.279 -> our dumpling purchases

631.44 -> so

632.8 -> besides that uh if we look through

635.839 -> more of what's going on let's look at

638.079 -> the accessibility of this website right

640.399 -> so like great i built like a cool fun

642.64 -> application i think it looks kind of

644.399 -> cute

645.36 -> um

646.8 -> but we recognize that's not accessible

648.56 -> right like right out of the box there

650.24 -> are some things that i feel like

651.92 -> i could have done better to build this

654.079 -> in a more accessible way and this is

655.92 -> what i really want to focus on today

658.399 -> so to start out by recognizing what we

660.72 -> want to fix there are two types of

662.64 -> accessibility testing that i want to

664.079 -> talk about today there's manual testing

666.56 -> which is going to be where the bulk of

668.079 -> your accessibility testing happens right

669.76 -> so this is where like

671.279 -> i as a user i'm going to say like

674.8 -> my designer told me that i need to be

677.2 -> able to go to my website

679.6 -> select any type of dumpling i want

683.76 -> click purchase and know that i purchased

685.68 -> those dumplings

687.12 -> and that is a user flow and i want to

688.72 -> make sure that an accessible user using

691.2 -> something like a screen reader could

692.72 -> successfully do that

694.56 -> so if i was a developer i would turn on

696.56 -> voiceover i would navigate try and do

698.8 -> that workflow and make sure that it

700.079 -> still works

702.079 -> the other type of accessibility testing

705.04 -> is going to be automated testing so this

707.76 -> is where we use other tooling uh for

710.16 -> example today we're going to be using

711.76 -> the lighthouse tool in chrome developer

713.68 -> tools to run an automated check for

716.32 -> other things now the thing about this is

719.36 -> we can't automate all accessibility

721.04 -> testing at least right now right like

723.6 -> something that's really important in

724.88 -> accessibility is that

726.8 -> when you are read the choices on a

729.519 -> slider that you understand what those

731.279 -> mean so there's a cognitive aspect of

733.519 -> that and like computers are smart uh

736.16 -> machine learning is getting there but we

738.56 -> can't automate knowing that a user will

741.92 -> understand what's being read to them we

744.079 -> can say a user is being read a sentence

746.24 -> and that can be automated but does that

748.48 -> sentence make sense is where the manual

750.48 -> part comes in

752 -> uh if that makes sense

754.079 -> so

755.44 -> to run our automated tests we're going

757.76 -> to go

759.04 -> into uh our application again we're

761.76 -> going to go into if you hit command

764.32 -> option j

766.16 -> uh we're opening the chrome developer

768.399 -> tools again i'm working in chrome

770.88 -> it's it's gonna be a little bit

771.6 -> different if you are using a different

773.44 -> browser

775.12 -> and i'm going to go to the lighthouse

776.959 -> tab if it doesn't show up there then it

778.88 -> might be just under these drop downs and

780.639 -> it's gonna be one of these uh you can

782.88 -> see i also have the angulardub tools

785.44 -> my favoritism is clear

788.959 -> and we're going to pick which ones we

790.16 -> want so for today just for the sake of

792.399 -> time i've already run these reports but

794.16 -> we're going to pick accessibility

797.12 -> and then click generate report

799.519 -> and it looks like i'm gonna have to do

800.639 -> it again anyways cool

803.839 -> and it's gonna run my report

805.92 -> uh again i just clicked uh

809.36 -> i only selected desktop you can also do

811.839 -> this for mobile today we're just talking

814 -> about the desktop or web accessibility

816.399 -> um

817.279 -> so for the sake of time but there's some

819.279 -> other cool stuff in chrome uh

821.92 -> that if you want to do it anyways so we

824.16 -> got a report we got 87 so like

826.639 -> that's not bad right like

829.68 -> that's 87

831.44 -> points out of 100 right 100 would be

833.6 -> here

834.639 -> uh so we're doing pretty good but we can

836.639 -> do better uh

838.24 -> i want to hit 100. i'm a perfectionist

840.88 -> and also i want to make sure this works

842.399 -> for everyone and if there are things i

843.76 -> can fix i'm going to do it and we see

845.839 -> that we have some things highlighted

847.199 -> here and we're going to add them to our

848.56 -> to-do lists

850.8 -> then the third type of check that we're

852.399 -> going to run is linting and so this is

854.639 -> where in angular i'm using eslint and

857.04 -> i'm specifically looking at the angular

858.88 -> es lint rules to make sure that i can

860.8 -> lit my code so this is before it even

862.72 -> compiles like are there things wrong

865.68 -> with my code

867.12 -> uh that i could have fixed and so i have

869.76 -> let's see one two three i have ten

871.92 -> different checks here in my eslint rules

874.399 -> so if i go to the dot eslint rc json

878.32 -> file i can see those and i've set them

880.56 -> all to two which means an error

883.519 -> uh which means if i have lint checks on

885.68 -> and i run linkedin it's going to run an

887.44 -> error and see these are the 10 things

889.279 -> that lint can do

891.04 -> and this is even more than like the

892.88 -> usability of like what's on the screen

894.959 -> so things like color stuff like that

896.56 -> this is like hey

899.04 -> this slider should have a role or

901.199 -> something like that right

902.959 -> so to do this we're going to open our

904.72 -> code

905.92 -> so here back in my terminal i'm just

908.079 -> going to run code

910.079 -> and open this

912.399 -> oops

914.56 -> and

916.88 -> i have it right here

918.48 -> and my code opens

920.32 -> and i can go to again that linting file

922.88 -> and i can look at my link rules

925.04 -> and i can see that i have

927.92 -> again

929.04 -> 10 rules here set to those things uh for

933.12 -> my eslint rules so if you're using

934.88 -> eslint and these are also available in

937.199 -> other linting it's going to be the same

939.04 -> sub rule it's just a slightly different

940.48 -> declaration for your angular

942.079 -> applications i highly recommend

944.639 -> that you add accessibility check rules

947.68 -> so

948.56 -> i have them here and that means again

950.24 -> when i go back to my terminal and i do

952.48 -> ng-lint i can see

954.639 -> uh my linter is gonna run it's gonna say

956.72 -> hey

957.92 -> i'm checking your code for all these

959.279 -> things and

963.04 -> there's an error right and so the two

965.44 -> here

966.959 -> is saying i want to make these errors uh

969.279 -> i believe that they should be strict

970.88 -> right my recommendation is obviously if

973.519 -> you're using a large repository maybe

975.44 -> introduce them as a one

977.759 -> and that's gonna throw a warning two is

979.839 -> gonna be an error and depending on your

981.68 -> ci cd pipeline it's going to like stop

983.44 -> you from building right but we want that

985.92 -> right we want to write the best code we

987.68 -> can and this is going to push us to do

989.519 -> that

990.72 -> um and so this lint is finding what's

993.279 -> finding

994.32 -> it's finding that any click must be

996.639 -> accompanied by a key up key down or key

998.72 -> press right so i have something in my

1001.12 -> shop component that i'm saying you can

1003.199 -> press or click and i'm not actually

1005.04 -> giving any sort of instructions to it

1007.519 -> um

1008.8 -> and so we're going to fix that

1010.959 -> so if i go back to my code line uh

1013.519 -> those are the different ways we're going

1014.72 -> to test so again i've collected

1017.44 -> all of the errors here

1019.279 -> and i've collected my linting errors

1020.959 -> here

1021.92 -> and so let's now go through each one and

1024 -> talk about the code

1025.839 -> which is probably what you're here for

1028.48 -> so

1029.76 -> uh we're gonna start with maybe the like

1032.4 -> largest issues and work down in

1034.4 -> granularity uh and see how much time we

1037.12 -> have um and i'm happy to answer

1039.199 -> questions along the way or at the end

1041.52 -> uh as we do this we can also talk about

1043.28 -> coding best practices as we do this so

1046.959 -> to start with what i think every angular

1049.36 -> developer if you're walking away from

1051.039 -> this if you do nothing else if you turn

1053.2 -> off the video right after you're doing

1055.039 -> this

1056 -> um i want to make sure that you are

1058.24 -> defining unique page titles so

1061.36 -> single page applications which angular

1063.679 -> is

1064.96 -> are super powerful right because the

1066.64 -> whole idea is like i have one page i

1069.28 -> have all these things but at the end of

1071.36 -> the day this is all one page and i'm

1074.32 -> changing out components with a

1075.84 -> navigation

1077.36 -> but really this is one page and that's

1080.799 -> super powerful for development um most

1083.2 -> modern frameworks use this sort of

1084.96 -> architecture

1086.4 -> there's a lot of really great

1087.6 -> performance benefits um it really is the

1090.16 -> modern web right this whole idea of like

1091.919 -> a single page application and that is so

1094.24 -> cool except

1096.24 -> at the top here if you see this

1098.88 -> if you zoom in

1100.24 -> it just says ally in angular or

1103.039 -> accessibility a

1104.96 -> 11 letters y in angular if you've ever

1108.559 -> wondered what accessibility and ally are

1110.72 -> they're the same thing

1112.88 -> and that's great except let's say i'm

1114.559 -> over here and i'm using a screen reader

1117.12 -> and i'm like hey what's this tab over

1119.2 -> here and i'm tabbing through my options

1121.84 -> i don't know what this is i just know

1123.52 -> it's accessibility in angular and

1125.039 -> there's different things in here so

1126.48 -> let's say i have like a store here

1129.679 -> um a description page you know like that

1132.32 -> should be reflected here because these

1134 -> are different things that we're talking

1135.679 -> about

1136.799 -> um

1138 -> and it's really inaccessible to have

1141.2 -> like let's say i open up 10 of these

1143.6 -> right and i have different tabs that are

1145.919 -> on oops that are on different pages

1149.2 -> if i have a bunch of local hosts right

1150.88 -> like they're all going to be the same no

1152.88 -> matter what i have open

1154.559 -> and no matter the status of them and how

1156.4 -> are you going to tell the difference so

1159.28 -> that is a huge pitfall of single page

1161.84 -> applications and what we're going to do

1163.28 -> is we're going to use the router to

1164.48 -> define a page title

1167.039 -> so

1168.64 -> uh

1169.84 -> in our routing module

1172.32 -> we're going to navigate to

1174.4 -> uh

1175.36 -> in our code

1177.28 -> i'm going to search for

1179.36 -> my to do

1180.72 -> number four because we're on step four

1183.76 -> i'm going to find

1190.96 -> i'm going to find two files that i want

1193.36 -> to edit

1194.72 -> okay

1196.48 -> so first we're going to go to our route

1198.08 -> module and we're going to look and we're

1199.6 -> going to say okay so i defined my

1202.4 -> different components right so if it's at

1204.4 -> shop i'm gonna load the shop component

1206.48 -> about about

1207.679 -> locate location component um so pretty

1210.16 -> self-explanatory right that maps exactly

1212.4 -> to

1214.24 -> these three taps

1215.76 -> that are three routes here and because

1217.679 -> it's a different route i want a

1219.36 -> different title where i at least want to

1221.36 -> reflect my different routes in my title

1224.32 -> so

1225.12 -> i'm going to add some data to each of

1227.919 -> those to define a title

1230.799 -> so if i go back to my code

1232.799 -> i'm going to add one additional thing

1234.799 -> here which is my data

1237.52 -> i'm zoomed in so much you can't really

1239.2 -> see all this hopefully if i zoom out

1240.72 -> that still works

1242.88 -> um and again i'm just adding let's see

1245.679 -> so this is going to be about

1250.64 -> and then i have data

1252.559 -> again

1253.84 -> i'm going to pass an object i'm going to

1255.76 -> define a title

1257.28 -> and what i'm doing here is i'm saying

1259.6 -> let's see

1261.52 -> locate

1263.44 -> me

1266.32 -> dash

1267.76 -> uh

1268.72 -> i in angular it's hard to type and talk

1272.64 -> um

1274.24 -> so what i'm doing here is i'm saying

1276.4 -> okay i have a route i can lazy load it

1279.2 -> if i want

1280.48 -> um and i have some additional data that

1282.72 -> i want to pass to this route and then i

1284.4 -> want to populate i'm going to then go

1286.72 -> into my component and use that data to

1288.799 -> give a page title right and so the data

1290.88 -> i'm going to pass per route is the title

1292.88 -> i want so i'm defining a data object i'm

1295.6 -> using the key name title uh this is just

1298.24 -> what i've named it obviously you could

1300.08 -> name it something different

1301.84 -> um

1303.039 -> and then i'm going to pass this along

1304.72 -> and something really cool that's coming

1306.24 -> in a future version of angular is we

1308 -> actually are cognizant of this and after

1309.679 -> i wrote this code lab

1311.28 -> uh

1312.4 -> i

1313.36 -> helped our team define a way so that

1315.36 -> this will actually be known so you're

1316.72 -> not even gonna have to do this next part

1318.32 -> but for now what you're gonna do

1321.44 -> is we've defined all of our titles uh so

1324.08 -> we now know what we want to do and then

1326.32 -> in our app component we now need to

1328.559 -> handle that title right so we're passing

1330.4 -> along a route we're saying if we're at

1331.84 -> this route i want you to load this

1333.2 -> component and i have a new title for you

1335.84 -> and so now i want to change out so if i

1338.48 -> go to my

1340 -> let's see let me move these around

1342.559 -> uh if i go to my

1344.64 -> app component once i save that

1347.76 -> i'm going to say i need a title

1351.2 -> so i'm going to start out by defining

1354.64 -> just like a basic title variable just so

1357.6 -> that

1360.4 -> let's see oh i already have my title so

1362.159 -> i already have my title

1364.159 -> i'm just defining my basic title

1366.48 -> and then i'm going to create a

1367.919 -> constructor that handles that title

1370.159 -> right so

1372.64 -> i'm bad at typing and doing so we're

1374.72 -> gonna cut and paste and talk about these

1376.96 -> code this code instead

1380.24 -> um okay

1381.76 -> so

1384 -> what i'm doing is i oops let's do that

1386.799 -> one uh what i'm doing here

1390.64 -> is i've created a constructor that

1392.32 -> imports a title service right

1395.039 -> and what i'm going to do in my title

1396.799 -> service is i'm going to say have a title

1406.95 -> [Music]

1409.36 -> okay

1410.24 -> so i'm going to define a constructor i'm

1412 -> going to create a title service that

1413.76 -> holds a title

1415.36 -> uh i'm gonna again i have my router and

1417.36 -> my activated route and what i'm gonna do

1419.28 -> is on init i'm gonna say hey

1421.76 -> can you get the title

1423.679 -> and every time you get the title what i

1425.52 -> want you to do with it is i wanna take

1427.12 -> the router

1429.6 -> i want to take the router and i want to

1431.36 -> pipe in and filter

1433.2 -> and say

1434.32 -> hey does my data have a title

1437.28 -> is the route that i'm at have a title

1439.28 -> and if so i want to give it that title

1441.84 -> and otherwise i'm going to default back

1443.52 -> to the title that i've defined here

1445.52 -> right

1447.36 -> um and that's really all i'm doing

1451.039 -> so if i save that and i go back

1455.919 -> and i don't need that anymore

1461.6 -> i can see oops even without changing it

1463.679 -> so this is like a great example right

1465.84 -> i can already tell without having to

1467.919 -> click on this that it's working and

1470 -> specifically i can tell that i know what

1471.919 -> i'm at right so this is exactly what i'm

1473.76 -> talking about

1474.799 -> it helps obviously for accessibility

1476.72 -> reasons but it also helps me and i don't

1479.2 -> have any accessibility services turned

1480.88 -> on right

1482.159 -> so by using my router to define a title

1484.96 -> i now know that this is open to the

1486.88 -> locate me tab and that's super helpful

1489.36 -> again if i have a bunch open and i'm

1490.88 -> looking for a specific one i know that

1493.2 -> uh just to test it we can click on our

1495.2 -> story and we can see it now says about

1497.919 -> uh we can click on shop we can see it

1499.679 -> says our shop and so we now know that

1502.08 -> for each of the major pages we have a

1504.559 -> unique title service

1506.72 -> uh so super helpful

1508.559 -> uh

1509.679 -> if you're following along feel free to

1511.679 -> give a thumbs up in the chat or maybe

1515.52 -> maybe comment if you have used a

1517.6 -> different title name um or some

1520.24 -> questions there a common question here

1522.559 -> is like

1523.76 -> okay so what's a good title

1526.08 -> like how do we differentiate right

1527.36 -> they're all dumpling shop like why

1529.039 -> doesn't it say dumpling shop great

1530.88 -> question it could

1532.4 -> uh what you really want to reflect is

1534.4 -> whatever the difference is you want to

1535.919 -> put first so if you notice here i said

1538.159 -> about dash accessibility in angular

1541.6 -> we if we look up here we see that i

1543.6 -> actually have a bunch of angular docs

1545.36 -> pages up and this is a great larger

1547.919 -> example of that right where we know that

1549.6 -> we're on angular docs so we have angular

1551.84 -> dash and then whatever the page i'm on

1553.76 -> is what's showing here

1555.279 -> so like let's say i have 400 pages of

1557.44 -> the angular docs up it would be super

1559.919 -> annoying if they all said angular like

1562 -> that's super unhelpful

1564.08 -> and so it's really easy to know without

1566.08 -> even having to click into it that like

1567.76 -> here i'm on the accessibility and

1569.279 -> angular page but here i'm on get started

1572.08 -> right

1573.12 -> super helpful

1574.4 -> uh so if you think about it scaling up

1576.32 -> to something like again the docs page

1578.24 -> has what like

1579.76 -> something like 400 individual routes

1581.919 -> it's really important that you're

1583.44 -> reflecting that information without

1585.12 -> forcing a user to go navigate to the

1587.36 -> page

1588.24 -> then navigate from all of the navigation

1590.799 -> features into here which is going to be

1592.799 -> something like 10 different tabs

1595.279 -> right so that's a really terrible

1597.039 -> experience for people using

1599.279 -> voiceover or things like that as well as

1601.52 -> like

1602.4 -> again i don't use those in my daily

1605.12 -> navigation of websites and i benefit

1607.36 -> from it so

1609.12 -> just doubling down on it's useful for

1611.52 -> everyone

1613.6 -> so again this is a really great code

1615.52 -> snippet for doing that um but you're

1617.679 -> just piping

1619.039 -> uh and filtering your routes and i think

1622.08 -> it's quite fun to do

1624.88 -> so

1626.72 -> that said

1628.4 -> that's going to bother me that these are

1629.84 -> not

1632.4 -> tabbed okay whatever

1635.36 -> so let's do our next one right

1638.159 -> one check off the box uh again

1641.84 -> we hit the highest possible thing so

1643.84 -> again if you do nothing else go add this

1646.559 -> code snippet think about your routes uh

1649.6 -> if you

1650.88 -> develop in an angular application for

1652.64 -> your work every day and you're thinking

1654.96 -> about something that you can do to

1656.96 -> impact the entire website this is a

1659.52 -> great low hanging fruit again super

1662.159 -> small code snippet um

1664.88 -> big impact

1666.159 -> so

1667.279 -> the next thing that i think has equally

1669.279 -> large impact

1670.96 -> is color

1672.96 -> so this is one that our uh

1677.2 -> our snapshot definitely found right so

1679.679 -> if i go to my application

1681.679 -> i can see that it saw something with

1683.36 -> contrast it said hey

1685.44 -> this contrast is terrible and i can even

1687.919 -> test that and say

1689.6 -> is it though

1690.72 -> and use my inspector and get to it and

1692.48 -> say oh it is it looks like my contrast

1695.36 -> is 20

1697.12 -> uh which is

1698.48 -> far below

1699.919 -> the required amount

1701.76 -> so

1704.159 -> uh let's fix that

1706.32 -> now color contrast is super important

1708.799 -> because if you think about color

1710.559 -> contrast on the web

1712.799 -> again even if you

1714.96 -> are a partially excited user or have

1717.279 -> users with low vision this is going to

1719.679 -> be super impactful if i have everything

1722.159 -> that is like really light gray on black

1725.36 -> uh or something that has really low

1726.96 -> contrast it's super hard to read that uh

1729.76 -> so think about it like this screen right

1731.6 -> now has black text on a white background

1734.399 -> there's really high contrast there so it

1736.24 -> makes it really easy to read but if i

1738.799 -> inspect this page

1740.72 -> and i change this to let's say like

1744.399 -> color

1746.32 -> yellow

1747.679 -> like

1748.559 -> i cannot read this code lab anymore

1750.559 -> right so if i was trying to teach this

1752.159 -> or if i was trying to like look through

1753.84 -> and i had to like highlight it to create

1755.679 -> enough contrast to read it like this

1757.6 -> becomes completely unusable so any work

1760.159 -> you did like all the great typing you

1762.72 -> did let's say you like maintain a really

1764.559 -> cool blog with a ton of really good

1766.64 -> information if there's not enough

1768.559 -> contrast for people to read it

1770.72 -> they're not going to be able to get all

1771.919 -> the information from your website

1774 -> so

1774.799 -> in order to fix this

1776.72 -> again we're looking at this accent color

1779.039 -> that looks wrong

1781.36 -> so let's go into our code and look at

1782.799 -> what that is

1784.799 -> um

1786.24 -> so here

1787.6 -> we are going to look for to do number

1789.52 -> five

1792 -> so in our style css i'm using angular

1794.559 -> material in this application

1796.799 -> um

1798.799 -> and i'm defining a bunch of color

1800.559 -> palettes with it

1801.84 -> and so let me indent this to see this a

1804.399 -> little bit better

1805.76 -> so it looks like in my light palette

1809.679 -> which is where the issue was right so

1812.48 -> just for context this like pink red is

1814.88 -> our light scheme and this like blue

1816.96 -> green is our dark color palette

1820.559 -> um so with this light it looks like i

1822.24 -> have a pink and i have a default

1824.88 -> and i have a lighter color and i have a

1827.039 -> text color and it looks like

1829.36 -> what is wrong is let's like play with

1831.679 -> this and see

1833.36 -> uh what is going wrong here

1838 -> uh so again i'm just gonna pick a bunch

1840.159 -> of colors here and see like where these

1841.52 -> colors are coming through so if you saw

1843.279 -> that uh with angular material if you're

1845.6 -> not familiar you define a color palette

1847.679 -> and you pass in those color palette

1849.36 -> variables

1850.72 -> so if i go to my

1852.559 -> here let's just do it if i go to my

1854.159 -> angular

1857.36 -> material npm node module and i go to my

1863.279 -> styles

1865.36 -> uh i can see that in this palette

1868.72 -> uh i am exporting these color palettes

1871.12 -> so i have like a red palette i think i

1873.36 -> was using a pink palette

1875.76 -> and so with my pink palette i can call

1877.919 -> on any of these variable colors to refer

1880.64 -> to these hex codes and they're defined

1882.159 -> by the material organization which is

1884.64 -> the design system that google relies on

1887.039 -> called angular

1888.64 -> called material and this implementation

1891.039 -> is uh obviously angular material

1895.279 -> and so i'm using my pink palette i have

1897.12 -> a default i'm using a 100 so that's

1900.399 -> going to be this color as my default

1903.2 -> again that checks out

1905.2 -> and then i think i have a lighter color

1907.12 -> which is my 100 so again i'm using like

1909.44 -> these nice like pinks

1911.279 -> and then what i have here that's the

1912.72 -> problem is i have this text color and i

1914.64 -> think it was yeah it was 500 and so i

1916.88 -> was trying to say like anytime there's

1919.039 -> text i want it to be this but it's going

1920.88 -> to sit on like this a100 which is super

1924 -> close in color right like

1926 -> i don't know if you can see these little

1927.44 -> squares without zooming in but they're

1929.84 -> really far away from each other

1932.08 -> so

1933.519 -> i'm going to use 900 i think in the code

1936.32 -> lab maybe i use something else but i'm

1938.399 -> just going to change it to 900 because i

1940.159 -> think that's safe and i'm going to save

1942 -> and i'm going to go back to my app and

1943.36 -> wait for it to build

1945.519 -> and it loads

1947.76 -> and yeah there you go

1949.76 -> so i can clearly see that now right

1951.679 -> that's so much more visible than it was

1953.279 -> before and if i want to inspect it let's

1955.279 -> check it

1957.36 -> looks like it still doesn't like that

1959.2 -> contrast

1961.44 -> that's not great

1963.279 -> uh let's run our lighthouse check and

1965.6 -> see if it agrees

1972.72 -> so again

1973.919 -> let's see

1976.32 -> i just changed that single variable

1980.48 -> oh okay so it's gonna pass for uh our

1983.519 -> lighthouse check but it looks like maybe

1986.24 -> the contrast here is a little less happy

1989.12 -> so 50 is pretty good

1991.36 -> i would say that is far above the aria

1993.44 -> recommendation but it looks like since i

1995.84 -> wrote this code lab um

1997.679 -> chrome has gotten a little bit stricter

1999.2 -> in its recommendations so we could even

2001.44 -> say like maybe i want to make it this

2003.84 -> darker um i don't have a darker color in

2006.799 -> my palette but what i could do is make

2009.279 -> everything else a little bit lighter

2011.919 -> and see if that helps so let's see i

2013.919 -> could go to the 50

2016.08 -> and just make it as contrasted as

2017.84 -> possible and see if that helps

2029.2 -> let's see

2032.64 -> yep

2033.679 -> now what's it think okay

2036 -> yeah so if i do something really drastic

2038.08 -> like that i can see that again

2040.08 -> uh

2040.96 -> maybe you can see this maybe you can't

2042.399 -> but if you're using your own inspect

2044.08 -> element you zoom in

2046.559 -> i'm not sure i can zoom in on the pop-up

2049.119 -> tools

2050.72 -> no i can't

2052 -> i'm so sorry but if you zoom in you can

2054.399 -> see that

2055.679 -> really small there the contrast tab is

2058.48 -> saying contrast 83 percent with a green

2061.76 -> check mark next to it so it's saying

2063.2 -> it's good with that accessibility

2065.28 -> i'm going to go back to a100 because i

2067.28 -> liked that better um and it passed our

2070.24 -> lighthouse check but again just

2072 -> something you'd want to check out of

2073.52 -> what those contrast ratios are and if

2075.28 -> they're matching

2076.56 -> i am using chrome canary

2078.8 -> so i will say that a lot of the tools

2081.28 -> i'm using are experimental and maybe

2083.599 -> pushing the bounds of like

2085.52 -> these checks

2086.879 -> um but there's a bunch of cool stuff in

2089.359 -> chrome canary but i think it's worth it

2091.919 -> so that said we fixed our contrast thing

2094.879 -> so in general what i would recommend in

2097.2 -> color contrast is obviously i'm using a

2100.24 -> color palette which is super helpful

2102.56 -> because anything with a design system

2104.4 -> i'm going to make sure that i can define

2106.48 -> in a singular place everything is

2108.4 -> relying on this default color and these

2111.359 -> three colors are sort of explaining to

2113.2 -> my entire screen

2114.839 -> uh what our color should be and the more

2118 -> you have color variables so using things

2120.24 -> like css variables uh and making sure

2122.96 -> there's like a constant singular source

2125.119 -> of truth for colors make sure that if

2127.52 -> you've checked the color contrast in

2129.04 -> those colors that it's going to populate

2130.64 -> to your entire application

2132.72 -> um

2133.52 -> some things you're going to want to do

2134.64 -> is check when checking is you saw that i

2137.2 -> ran lighthouse

2138.72 -> and i checked

2140.16 -> for the contrast

2143.2 -> errors there and that's where it was

2145.2 -> recording it and then you also saw that

2147.359 -> in chrome devtools i used this

2149.04 -> inspection element and i was hovering

2150.8 -> over

2151.599 -> so for example here i can hover and i

2153.44 -> can see that this black on pink gets a

2156.88 -> contrast ratio of 59 and a green check

2159.52 -> mark

2160.32 -> uh or maybe even down here this blue

2163.04 -> has a

2164.72 -> pretty good contrast as well so again

2166.72 -> just using that hover and looking for

2168.32 -> the accessibility panel there and where

2170.24 -> it says contrast is going to be the best

2172.56 -> way to quickly see

2174.56 -> um

2175.76 -> and check for that contrast

2178.56 -> so we've done two things now right so

2180.72 -> we've done our to-do for step four and

2182.88 -> step five

2184.32 -> unique page titles and color contrast

2186.96 -> uh from here on out we're gonna get a

2189.2 -> little bit more semantic so we're gonna

2191.599 -> dig into a little bit more code um

2194.48 -> and maybe these issues are less like

2197.2 -> overarching right so page title affects

2199.68 -> your entire page color contrast affects

2202.079 -> your entire page now let's dig into like

2204.72 -> some very specific issues

2207.28 -> so the next one we're going to dig into

2209.76 -> is using semantic html

2212.8 -> uh semantic html

2215.04 -> you know you might be thinking like why

2216.72 -> is this included in an angular

2218.32 -> accessibility course but the thing is

2220.24 -> we're all writing html like all of your

2222.8 -> angular applications let's see if i

2225.119 -> search for like spaces and anything in

2229.359 -> an html file like look at all the html

2233.44 -> right so like we're all guilty of

2235.2 -> writing html sometimes we don't write

2237.28 -> the best html and i want to make sure we

2239.359 -> walk away from this writing the best

2241.119 -> html that we can

2243.599 -> so

2245.52 -> let's look at our

2247.119 -> next step which is step six

2250.64 -> now step six is all about using semantic

2253.359 -> html the idea here is like if i have

2257.359 -> um

2259.76 -> uh on this screen for example i have

2261.839 -> this thing here right it's like a big

2263.76 -> div and i click on it and you can see

2265.92 -> here that i'm logging something in

2268 -> theory again remember like maybe i

2270.8 -> navigate to another page this is a make

2272.96 -> believe land in which you can click this

2274.88 -> magical button and it purchases our

2276.8 -> dumplings for us

2278.8 -> um but when i click it you can see that

2281.44 -> it's acting as a button

2283.52 -> but if i inspect it

2286 -> what it really is is a diff it's a div

2288.32 -> with a click event and it's a div with

2290 -> an h3 with a click event uh which really

2293.119 -> isn't making use of semantic html to

2295.839 -> include aria accessibility so arya

2299.04 -> accessibility is capital a capital r

2301.839 -> capital i capital a and those are

2304 -> accessibility roles that we're going to

2305.839 -> give to our html to manage accessibility

2308.72 -> for us especially when interacting with

2310.64 -> things like

2311.839 -> screen readers and those types of

2313.76 -> accessibility services

2315.92 -> so when we don't use semantic html we

2318.24 -> completely bypass the web's path towards

2321.2 -> accessibility for us and we essentially

2324 -> force ourselves to reinvent the wheel

2326.24 -> and there's very few times especially in

2328.48 -> something like as small as uh creating a

2331.28 -> button that it's worth saying i'm not

2333.68 -> going to use the button html i'm going

2335.839 -> to create a div and do it my own way uh

2338.88 -> better to use the button right

2341.04 -> another example of this is on our story

2343.2 -> page

2344.16 -> you can see that i have all of this text

2346.32 -> and if i inspect it i see that they're

2348.16 -> all let's see this is an h3

2350.48 -> this is an h2 this is an h5

2354.079 -> and h6 and h5

2356.96 -> right and so

2358.16 -> all of these h uh

2360.64 -> numbers that i'm reading out are headers

2363.2 -> and typically when you think about a

2364.48 -> page it starts with like an h1 which is

2366.72 -> your big title right so that's like

2368.4 -> dumpling shop or h1

2370.48 -> and we have some navigation items and

2372.4 -> really what should come next is an h2

2374.64 -> and then an h3 and then maybe it could

2376.88 -> go back up to an h2 and what you're

2378.72 -> thinking about here is like the

2380.24 -> structure of text where each of our

2382.64 -> headers should be subsets of one another

2385.28 -> so it makes sense that it goes from the

2387.04 -> largest header so a header one or a

2389.359 -> title

2390.24 -> down to our smallest a header six and

2392.48 -> some text inside of that the more we

2395.04 -> confuse that the more we confuse screen

2397.119 -> readers right so screen readers like to

2398.96 -> read what level of header it is

2401.52 -> and that conveys to our screen reader

2403.599 -> users

2405.04 -> where we are at within a text document

2407.2 -> so if you jump from an h1 down to an h6

2409.839 -> and back up to an h2 especially if you

2412.32 -> don't actually mean that in the context

2414 -> of it so right like if i look at this

2416.24 -> who are we seems like one of the main

2418.24 -> questions how are we different seems

2420.16 -> like a question at the same level so in

2422.72 -> theory those should be our headers

2425.28 -> and all of this information inside of it

2427.44 -> is probably detail information that

2429.359 -> should be at a lower header number to

2431.44 -> convey that to users

2433.839 -> so those are both things we're going to

2435.52 -> fix so again we're going to fix our

2436.88 -> headers to have a semantic ordering to

2439.119 -> use semantic html properly so that our

2441.52 -> screen readers can understand what's a

2443.68 -> header and what's description for those

2445.52 -> headers

2447.2 -> and then we're going to go back to this

2448.56 -> purchase button and we're going to make

2450 -> it

2451.839 -> well we're we're gonna make it a button

2453.839 -> because right now it's acting as a

2455.92 -> button and it's not a button

2457.599 -> and the way we can tell that again

2460.079 -> i can tell you that because i've built

2461.44 -> this and i know that it's wrong

2463.52 -> uh but i can also look at my lighthouse

2465.2 -> and say like huh in navigation i have

2467.76 -> this thing that says header elements are

2469.52 -> not in sequentially descending order and

2471.839 -> that's exactly what i just described

2473.44 -> right

2474.319 -> things that are headings should be

2476 -> ordered properly so that people don't

2477.68 -> skip levels because if i'm navigating

2479.76 -> this

2480.48 -> i'm going to skip through to all my h2s

2482.56 -> and i'm going to get like some weird

2484.079 -> things read to me here

2487.44 -> and then also

2488.72 -> um it's not complaining here because it

2490.96 -> doesn't know that it needs to be a

2492.48 -> button but if i went through on a screen

2494.8 -> reader which i'm not going to do because

2497.44 -> it is going to

2500.24 -> essentially like try and screen read me

2502.56 -> out of this meet that we're in but

2505.119 -> if i did turn on the screen reader by

2507.44 -> triple clicking my escape key

2509.92 -> or you can go to voiceover

2512.96 -> preferences on your mac or other device

2515.76 -> to figure out how to turn your personal

2517.68 -> devices on

2518.96 -> and i navigated through to all of the

2520.72 -> options the purchase wouldn't let me

2522.72 -> click it it would just be like

2524.56 -> purchase

2526.319 -> div

2527.119 -> right and we wanted to say purchase

2528.72 -> button click space to click um right so

2531.44 -> we want this to be interactable on a

2533.52 -> screen reader

2534.8 -> so to do that uh let's look at our code

2537.2 -> lab to think about what we need to

2539.119 -> change

2540.8 -> so our first thing is in our shop

2542.88 -> component

2544.4 -> let's make this a button right so right

2546.64 -> now you can see this is exactly what i

2548.319 -> was complaining about and this is what

2550.48 -> our uh linting caught right so if i look

2552.72 -> here it was saying like hey in our shop

2554.319 -> component you're trying to click

2555.76 -> something but like

2557.28 -> nothing's gonna happen uh especially in

2559.76 -> a screen reader right like this click

2561.52 -> event needs to be accompanied by like a

2564.48 -> screen reader way for it to tell us what

2566.4 -> to do

2567.92 -> so

2568.96 -> i'm going to take this code i'm going to

2570.88 -> copy and paste it my new button

2573.28 -> i'm going to get rid of that button

2575.52 -> i'm going to say my new button's better

2578.64 -> and this is just a button i'm using the

2580.4 -> matte flat button which is a material

2583.04 -> flat style button

2585.04 -> i'm giving it a color of primary

2588.319 -> and i'm giving it some classes just so i

2590.24 -> could style it if i wanted and then i'm

2592.4 -> giving it that same click event

2594.72 -> but now i've given it in the click event

2596.319 -> to a button and the benefit here is

2598.319 -> using symantec html it's going to

2600.16 -> compile it's going to know to add aria

2602.64 -> roles and support to this but it's going

2604.72 -> to be able to handle it for screen

2606.079 -> readers so i can save that i can go back

2609.44 -> and i can see already

2611.68 -> uh the biggest indicator that that

2613.359 -> worked is do you see that when i

2615.04 -> navigate over my mouse now can handle

2618.64 -> and like shows that i can click that and

2620.88 -> when i click it there's an action

2622.96 -> so just to show that difference again if

2624.64 -> i go back to this button

2626.96 -> when i hover over the old button

2629.52 -> it looks like i just can select text

2631.52 -> right there's no indication with my

2633.92 -> pointer that i can actually click that

2636.319 -> or that anything is going to happen

2638.319 -> right so if i go back to my new button

2641.28 -> clearly significantly better

2643.2 -> uh the other thing that i was going to

2644.72 -> do here is i was going to change my

2647.68 -> headers i'm going to copy and paste for

2649.599 -> the sake of time

2651.119 -> but in my about component which again is

2653.44 -> to do number six we're on

2655.76 -> i'm going to replace all of these it's

2658 -> the same text but i'm going to replace

2660.24 -> them

2661.359 -> with uh semantic headings so if you see

2664.72 -> here let's look at the before and after

2667.28 -> so if we look at the before and after

2669.599 -> hopefully this is zoomed in enough for

2671.76 -> everyone reading my screen

2674.24 -> uh

2675.2 -> you can look and see that before we had

2677.28 -> like h3h2h5h65

2680.319 -> a div like what's happening here and now

2683.359 -> if we think about it again we have two

2685.2 -> h2s the two questions we're trying to

2687.599 -> answer

2688.72 -> and then everything inside of that is a

2690.4 -> paragraph and we've added some styling

2692.24 -> so that we keep like a similar cool sort

2694.319 -> of funky stylistic look but for screen

2697.359 -> readers if people are navigating just

2699.359 -> through the headers they can see that

2700.72 -> the two header sections i have here are

2703.599 -> my two questions

2705.2 -> what is the shop you're on and why is it

2707.2 -> different and now everything else is

2710.72 -> identified as something less than that

2713.28 -> um if you're writing a blog

2715.44 -> for example a lot of people have like

2717.359 -> blog apps in angular this is a great

2719.52 -> thing to think about like do your

2721.2 -> headers make sense are they semantically

2723.119 -> in an order that makes sense are you

2725.28 -> using the correct semantic html tags

2727.44 -> like p like buttons um anything like

2729.839 -> that right a semantic html tag is like

2732.64 -> literally anything that has meaning when

2734.4 -> you're going in your html and you're

2735.76 -> writing like

2737.2 -> a

2738.48 -> title for example it's like semantic

2740.56 -> html

2742.4 -> so

2743.839 -> we have fixed that and let's look at

2745.68 -> that

2748.8 -> did it reload

2750.96 -> i don't know

2752.079 -> i think it did

2753.68 -> now if i go to our stories tab it looks

2756.4 -> similar but now we have two highlights

2759.04 -> we have our two questions and everything

2760.88 -> inside of that is still styled but it's

2763.28 -> more visually clear what the headers are

2765.76 -> there and again if i turned on my screen

2767.68 -> reader and navigated through my headers

2769.599 -> i could see that

2771.359 -> so for the sake of continuing to check

2774.079 -> our work as we go

2775.76 -> we just did two things we added the fact

2779.2 -> that this is now a button clearly a

2780.96 -> button

2782 -> i'm going to run my linter again because

2784.56 -> remember when we did ng lit the last

2786.72 -> time it got mad at us for that click

2788.4 -> event

2789.68 -> and while it's linting

2795.04 -> yeah while it's linting i'm going to go

2796.8 -> back and i'm going to re-run my

2798.24 -> accessibility check again and i'm going

2800 -> to see if it catches uh that semantic

2803.04 -> change we made right

2804.72 -> uh because this got mad at us for on our

2807.04 -> story page the fact that we had those

2809.28 -> headers that didn't make sense and look

2811.68 -> it's no longer mad about this so we're

2813.52 -> already into the green section we've

2815.28 -> already fixed enough stuff that we're

2816.64 -> into the green 91 and we still have

2819.119 -> things to do

2820.64 -> and if i go back to my linkedin i see

2822.72 -> that all files are passing linting so

2825.28 -> pretty good progress right like semantic

2827.2 -> html got us uh pretty far it got us into

2830.4 -> the green it got us to a fully passing

2833.359 -> linking file and there's still things

2835.28 -> that we can fix

2836.96 -> um so again

2838.48 -> if you are just joining us and looking

2841.119 -> for the repository it is all linked

2843.599 -> within our code lab and we are now on

2846.24 -> we've now done uh unique page titles

2848.88 -> we've now done color contrast and we've

2851.359 -> added our semantic html and now let's

2853.76 -> look at our controls

2855.76 -> so the next thing we're gonna fix uh is

2858.56 -> something that is angular material

2860.24 -> related

2861.44 -> so

2862.64 -> if you look at uh our shop here

2865.44 -> uh we have something that's like pretty

2867.2 -> complicated actually especially for

2869.04 -> accessibility services and that's the

2871.119 -> fact that we have nested controls so for

2873.2 -> example i have some fillings here

2875.68 -> uh that i'm focusing on let's just zoom

2877.44 -> into our fillings to focus on this

2879.839 -> ignore my dumplings really don't like to

2881.76 -> be zoomed in this this aggressively

2885.04 -> um but i do for purposes of

2887.359 -> accessibility of you seeing my screen

2890.48 -> so i have all my toppings here right i

2892.8 -> have meat and vegan i don't eat meat so

2895.119 -> i added impossible burger meat

2897.44 -> um

2898.56 -> but if you do you can order chicken

2900.64 -> don't worry um

2903.04 -> and so

2904.24 -> i allow you to click all these things

2905.599 -> right and there's some cool stuff here

2906.8 -> where like i can click vegan and get

2908.559 -> both if i unclick bok choy it knows that

2910.8 -> it's not the fully vegan one

2912.96 -> um i can make some fun selections here

2915.599 -> right

2917.359 -> but

2918.319 -> nested check boxes are really not the

2921.359 -> best practice for accessibility and this

2923.839 -> happens a lot right this is a pattern

2925.359 -> maybe designers come to you with a lot

2927.359 -> for your different applications you're

2928.72 -> writing um

2930.48 -> and i would highly recommend you push

2932 -> back and think about like hey i attended

2935.28 -> an accessibility workshop

2937.28 -> and i heard that this wasn't a best

2938.96 -> practice and let me tell you why

2942.079 -> so

2942.88 -> it is very hard when you're navigating

2944.88 -> through something like nested checkboxes

2946.96 -> with a screen reader to understand the

2949.76 -> nested complexity so let's say i have

2952.24 -> everything checked and i navigate from

2954.24 -> vegan into bok choy and uncheck tofu it

2957.44 -> is hard to then reflect to users

2960.24 -> without

2961.28 -> navigating back up that they've

2963.28 -> unchecked the vegan selection

2965.92 -> so when you have a nested structure like

2967.839 -> this that has nested um

2971.68 -> uh

2973.599 -> like nested use cases it's hard to

2976.96 -> convey again if i like have navigated

2979.2 -> let's say selected vegan

2981.44 -> and i navigate to bok choy then tofu

2983.359 -> than meat then chicken which is the

2985.28 -> correct tab order and i get to

2986.88 -> impossible meat and i unselect

2988.48 -> impossible meat you're going to next tab

2991.04 -> to quantity and you're never going to be

2992.72 -> able to reflect to users that they've

2994.64 -> unselected meat

2996.48 -> so

2997.359 -> really not a great best practice if

2999.359 -> there's a way to do this that doesn't

3001.119 -> require nested checkboxes we're going to

3003.68 -> prefer that and we're going to prefer

3005.359 -> that because it's more semantically

3007.839 -> like sensical and we want things to be

3010.24 -> as simple to use this as possible

3011.76 -> especially for cognitive

3013.839 -> disabilities and things like that but

3015.52 -> also because it's going to create a

3016.72 -> better ui

3018.24 -> so like even if i like look at this from

3020.8 -> afar like i don't really understand

3022.24 -> what's happening here with like my vegan

3024 -> versus me right like

3025.76 -> i mean impossible meat is vegan anyways

3028.48 -> so like maybe that should be up here but

3030.4 -> also like

3031.839 -> when i uncheck chicken is it really not

3034.24 -> a meat one because i still have some

3036.4 -> meat in there you know like there's a

3038 -> lot of questions you could ask there and

3039.28 -> we've really made things more

3040.559 -> complicated than they need to be so

3042.16 -> let's change

3043.44 -> our controls uh to make them more

3045.68 -> accessible

3047.2 -> the other thing is that by simplifying

3049.28 -> menus um we're making them more

3051.68 -> navigateable or navigable

3054.48 -> uh

3055.599 -> and the other thing is that we're going

3057.68 -> to use angular material to ensure that

3060.559 -> the checkboxes we create have built-in

3062.72 -> accessibility so this is where i do a

3065.04 -> subtle plug that using something like a

3067.359 -> component library is the best way to get

3069.359 -> accessibility especially for angular

3071.2 -> material which is google's component

3074.079 -> library

3075.28 -> and that's because we really care about

3077.68 -> accessibility and make accessibility a

3080.319 -> priority zero or the top priority so we

3083.04 -> want to make sure that we're delivering

3084.64 -> the most accessible components to you

3087.04 -> all

3087.76 -> uh so if you are ever looking for like

3089.92 -> hey i want to create some check boxes

3091.68 -> and i want to do it really quick for my

3093.44 -> application and they need a scaffold

3095.359 -> like use a component library use angular

3097.599 -> material because you're gonna get

3098.8 -> accessibility out of the box

3101.2 -> so

3103.04 -> in order to do this we're gonna replace

3104.72 -> our checkboxes with materials checkboxes

3106.88 -> and to do that we're gonna go to our

3108.88 -> component

3110.559 -> and we're going to change

3113.599 -> how we add these things so

3116.64 -> we are now on to do number seven

3119.68 -> i've marked these things just to make

3121.52 -> them a little bit more sensical for me

3125.52 -> um

3126.72 -> and we're going to go here oops

3129.119 -> we're going to start

3132.079 -> yeah we're going to start here

3134.48 -> so in our shop.component.ts

3138.64 -> again this is the component file where

3141.28 -> we are defining all of our fun things

3143.04 -> for navigation

3144.72 -> and

3145.68 -> uh we are going to add

3148.079 -> our uh selectable controls

3151.839 -> we are going to change our fillings

3154.4 -> to be instead of an object with a uh set

3158.079 -> of boolean

3159.359 -> so again this was maintaining like the

3161.92 -> filling variable was saying like is this

3163.76 -> box right true or false is this tofu

3165.52 -> true

3166.319 -> true or false and i was passing that to

3168.079 -> that checkbox

3169.52 -> now i'm going to have a list of strings

3170.96 -> right and these are going to be a list

3172.4 -> of options

3174.079 -> of what's out there

3175.599 -> and in doing so i've also leveled up our

3178.4 -> options a little bit if you'd like to

3179.76 -> level them up to something you like that

3181.92 -> is different go ahead

3183.68 -> i'm super into chili crunch right now um

3186.319 -> there's a bunch of really good chili

3187.92 -> crunch in the local supermarket

3190.64 -> so

3191.68 -> i have added some chili crunch as an

3193.599 -> option i've also added some tofu

3196.16 -> i kept the impossible meat

3198.24 -> let's get rid of that maybe let's make

3199.839 -> it

3200.88 -> just like

3201.839 -> spinach

3203.119 -> extra spinach

3205.68 -> um

3207.2 -> so i've changed my fillings uh to my

3209.52 -> list of strings

3211.04 -> and then i've also created a selected

3213.44 -> filling variable and this is going to

3215.359 -> maintain what is selected

3219.04 -> and i'm going to keep

3220.72 -> everything else

3222.559 -> um

3225.359 -> and then

3227.44 -> uh now in my faux purchase i also want

3230.4 -> to make sure to change

3232.319 -> how i print my faux purchase since i

3234.64 -> changed my uh

3236.559 -> objective fillings to be a little bit

3238.24 -> different so i just want to change

3240.48 -> how i'd select my flavor by going

3242.8 -> through

3243.68 -> why is it mad about this

3246.96 -> oops

3261.68 -> maybe it doesn't

3263.599 -> oops

3265.599 -> there you go

3266.96 -> okay

3268.079 -> sorry i'm just fixing my single quotes

3270.4 -> um yeah so i'm just maintaining that my

3273.359 -> flavor is going to be

3275.28 -> uh whatever is in my selected objects

3277.68 -> from my array here so i've defined my

3279.839 -> array of fillings i have four beautiful

3282.48 -> flavors

3283.839 -> i'm maintaining a list of what is

3285.599 -> actually selected from my filling

3287.44 -> choices and then every time i make that

3289.599 -> purchase i just want to make sure that

3291.04 -> i'm iterating through that list and

3292.64 -> adding them so that when i print it

3294.64 -> knows what to do

3295.92 -> so now that i have a new list of what my

3298.16 -> fillings are

3299.599 -> i want to go in and i want to change my

3302.48 -> object and i'm going to use matte

3304 -> selection list so in my component object

3306.8 -> in my html

3308.72 -> uh i'm going to get rid of

3310.72 -> uh you can just collapse even this like

3313.359 -> really long ul list

3315.839 -> um i'm just going to delete it and we

3317.52 -> don't even need to look at like how ugly

3319.28 -> that was

3320.8 -> um

3322.4 -> instead

3323.599 -> i'm going to add in a cool map selection

3325.44 -> list and you can copy this code all from

3327.28 -> right here but let's talk through it so

3329.44 -> my matte selection list is my material

3331.76 -> selection list this is a list of things

3334.64 -> we can select i'm going to give it an ng

3337.119 -> model which is going to be a model of

3339.28 -> what i

3340.24 -> have selected i've had handed it my

3342.64 -> selected fillings variable which again

3344.96 -> is a list of

3346.839 -> strings and i've given it an aria label

3349.68 -> so that i can explicitly say hey when

3352.559 -> you get to here this is a selection list

3354.88 -> of my dumpling fillings and that's

3356.48 -> what's going to be read to screen

3357.599 -> readers

3358.559 -> and then for each of my options i'm

3360.319 -> going to ng4 and iterate through all of

3362.079 -> the fillings i have to have a flavor

3364.799 -> give it that value

3366.48 -> some color and just give it that text

3369.04 -> if i select that and i save

3372.16 -> i should be able to

3374.079 -> go here and yep

3375.52 -> uh it is reflected so if you remember we

3377.92 -> used to have some nested controls that

3380.319 -> didn't really make sense

3381.92 -> i was like doing that weird meat vegan

3384 -> thing and now i just have four check

3386.079 -> boxes of some extra flavors

3388.72 -> uh my extra spinach

3391.119 -> of new flavors of dumplings so i've

3392.96 -> reinvented my dumpling flavors and i've

3394.88 -> made it more navigateable

3397.68 -> uh that is a hard word to say navigable

3400.96 -> so it's more navigable uh it's also more

3404.24 -> cognitively intuitive for users to

3406.799 -> understand what's happening you're

3408.16 -> selecting your flip fillings you can

3410.079 -> select more than one there's no nested

3412.88 -> uh

3413.76 -> dynamics of what that means

3416.559 -> um and they also have some styling and

3419.04 -> they were also i was able to give it an

3421.04 -> aria control

3422.48 -> uh or aria label

3424.48 -> so that when it's read to users there's

3426.4 -> context for what they're selecting

3428.72 -> and so that's really great

3430.64 -> um

3433.04 -> so that was again this form doesn't have

3435.119 -> associated labels so let's

3437.68 -> rerun

3438.96 -> and see if that fixes that

3442.799 -> um

3447.44 -> yeah and we're up to 98 right and we got

3450.079 -> rid of that like weird form error here

3452.559 -> right because it was saying like you

3454.4 -> haven't given any context right you're

3456.4 -> making people like navigate through

3457.839 -> these weird nested controls and they're

3459.92 -> selecting fillings but like fillings for

3461.68 -> what there's no context so now we've

3464.319 -> used angular material we've used

3466.88 -> built-in components that have

3468.079 -> accessibility included and we've used

3470.16 -> the map selection list and aria label to

3472.72 -> ensure that we're providing context

3475.44 -> and a clearer more intuitive way to

3477.76 -> select these things so that when you're

3479.2 -> navigating through the screen reader

3481.119 -> you're not getting stuck in a weird like

3484 -> context whole of not knowing where you

3486 -> are

3487.04 -> so we're at a great point

3489.04 -> uh let's just do a check again that was

3492.079 -> creating select selectable controls with

3494.4 -> material

3495.839 -> um and let's just keep trucking on it

3499.119 -> looks like we're at about an hour we

3501.44 -> have halfway to go so i'm gonna speed up

3503.76 -> a little bit

3505.2 -> um

3506 -> but luckily these next ones are pretty

3507.52 -> easy so

3509.119 -> the next one is super similar

3511.2 -> uh provide controls with arya so we've

3513.119 -> already talked about arya

3514.96 -> um but the screen reader isn't reading

3517.119 -> these slider values and if i go to my

3518.88 -> lighthouse score

3520.559 -> oops

3523.68 -> if i go to my lighthouse score this is

3525.76 -> exactly what this is saying here right

3527.28 -> like my input doesn't have an accessible

3529.04 -> name this is an arya issue

3531.92 -> and we want to improve our usage of arya

3534.16 -> so what we're going to do is we're going

3535.52 -> to say it's yelling about my slider very

3538.24 -> specifically this error is saying like

3540.48 -> this matte slider doesn't tell me what

3542.079 -> it is

3543.04 -> and without that i'm going to get stuck

3544.88 -> in moving the slider and it's not going

3546.559 -> to tell me what it is and a really

3548.319 -> simple way to do that is to use arya

3550.64 -> so i'm going to go to my shop component

3552.319 -> and i'm going to take my matte slider

3559.28 -> and very simply uh i don't even have to

3561.839 -> do any of these other things i have all

3563.599 -> this stuff here all i'm going to do is

3565.52 -> give an aria label

3567.52 -> right so in my map slider i'm going to

3569.44 -> use aria

3570.88 -> label and i'm going to give it some text

3573.92 -> that explains what it does so here i

3576.4 -> think the example i gave was dumpling

3578 -> order quantity slider

3580.319 -> dumpling order quantity and i don't even

3583.44 -> have to say slider right because it's

3584.799 -> going to read its role so an aria role

3587.04 -> is already going to be applied on this

3588.4 -> to say that it's a slider so it's even a

3590.799 -> better practice to not include that role

3592.72 -> right like i'm going to correct my code

3594.64 -> lab a better use is to just say

3597.52 -> when you think of arya we need to read

3600.24 -> role

3601.68 -> value

3602.96 -> and then action

3605.52 -> or description value role and so this

3608.4 -> description here is dumpling order

3610.079 -> quantity

3611.119 -> uh its role is going to be a slider it

3613.359 -> knows that already and then the action

3615.52 -> is going to be like entering the slider

3617.44 -> and all of that's going to be handled by

3618.88 -> the voice screen reader

3621.04 -> so

3622.64 -> uh we've added that and if i go back

3625.2 -> i've saved that right yep

3627.52 -> if i go back i run

3630.48 -> i mean it's gonna say

3632.24 -> 100

3634.48 -> because i fixed it

3637.28 -> yeah cool so we're at 100

3639.44 -> which is great

3640.72 -> uh and i'm gonna push that even further

3642.48 -> right because why not 110

3645.28 -> um no really

3647.2 -> so we're at eight we've already fixed

3649.04 -> everything that is automated and this is

3651.44 -> exactly where i say you can't automate

3653.2 -> all your checks so this runs again we

3656.16 -> ran our lender everything passes there

3658.799 -> we still have manual testing right we

3660.48 -> can still push this and say i know that

3662.4 -> i've auto i've fixed everything that an

3664.319 -> automated check can fix but i can still

3666.079 -> do more

3667.28 -> um right so aria controls

3670.4 -> color page titles those are all things

3672.559 -> that are automated but there's more you

3674.64 -> can do and so something that i'm really

3676.319 -> going to encourage everyone to check out

3678.079 -> is the cvk accessibility package

3681.2 -> so this is where

3683.28 -> um you're going to run

3685.52 -> uh

3686.4 -> oops sorry

3688.079 -> this is where you're going to navigate

3689.839 -> to uh

3690.96 -> material.angular.io

3695.119 -> and you're going to go in and say

3697.04 -> there's this thing called the cdk and

3699.04 -> the cdk has something called

3700.319 -> accessibility and this is an entire

3702.72 -> package built for angular and you don't

3704.64 -> have to use angular material to use this

3706.96 -> that is specifically focused on

3709.28 -> accessibility so this is things like

3711.04 -> there's list key management because

3712.799 -> that's important or focus trap we're

3714.48 -> going to talk about that

3715.92 -> um but there's all these tools for

3717.52 -> things that we recognize that when

3719.359 -> writing components if you're writing

3721.2 -> your own components you're going to have

3722.64 -> to manage these things and there's an

3724.799 -> angular specific way to manage it and we

3726.72 -> want to provide you the tools to build

3728.799 -> better components so that if you're like

3731.76 -> building an enterprise application or

3733.68 -> you're maintaining an open source

3735.28 -> package or something like that and that

3737.119 -> has anything to do with the ui you

3738.799 -> should know about this page

3740.88 -> so again material docs

3743.04 -> uh cdk and the ally one accessibility

3746.799 -> so

3747.839 -> to add that

3749.52 -> we're gonna go to our app module and

3751.2 -> we're just gonna make sure that we've

3752.559 -> added this accessibility module so if i

3754.96 -> go to my app

3758.319 -> um

3760 -> i want to make sure that again i add

3761.92 -> this import so i'm going to import it

3763.839 -> from the right place

3765.76 -> and then i'm going to take my module

3768.96 -> and i'm going to add it to my imports

3771.52 -> and actually

3773.2 -> i like alphabetical

3776.24 -> um

3777.44 -> or semi-alphabetical i guess

3780.24 -> somehow these things have gotten

3781.44 -> slightly unalphabetical but a comes

3783.839 -> first so

3785.28 -> i'm going to import it and now you're

3787.599 -> not going to see anything but if i go to

3790.079 -> my ng terminal you can see that i just

3792.799 -> recompiled it noticed that there was a

3795.2 -> new module it needed to bring in and so

3797.28 -> it did so

3799.039 -> uh and now we're gonna make use of it

3800.4 -> right so what we did here is we just

3802.319 -> added to our module if you're familiar

3804.16 -> with angular applications we added a new

3806.48 -> module that has the ability

3808.64 -> to

3809.52 -> ensure that we can make use of all of

3811.68 -> these things so again i'm looking at

3813.52 -> these docs i'm like wow

3815.52 -> there's some cool stuff in here that i

3817.119 -> want to use

3818.24 -> in order to do that we need to bring in

3819.68 -> the module we just did that now let's go

3822.16 -> use the things

3824.24 -> so

3825.76 -> 10 focus trap

3827.68 -> i just talked about this right so i just

3829.76 -> said hey

3830.96 -> i notice here there's this thing let's

3833.2 -> see there's liskey management there's

3835.119 -> live announcer

3836.72 -> there's focus monitoring and there's

3838.799 -> focus track but what's focus chat well

3842.16 -> the cdk focus strap or trap focus

3844.48 -> directive is a way for us to ensure that

3846.559 -> when we're tabbing through our elements

3848.319 -> with something like a screen reader that

3850.319 -> we're trapping the focus to where we

3852.88 -> want so really great example of this is

3855.039 -> if we open our shop

3856.72 -> we've changed the color a few times

3858.559 -> right so we said like hey i want five

3861.599 -> bok choy chili crunch tofu mushroom

3863.76 -> dumplings i don't like this gold color

3866.16 -> of this wrapper let's make them plum

3869.52 -> and this right here is a lot a modal

3872.48 -> that i'm opening and so if i was

3874.4 -> navigating with a screen reader i would

3876.319 -> want to make sure that the screen reader

3878.319 -> knows when i'm navigating within this to

3880.96 -> trap focus

3883.039 -> before i apply color right so let's say

3885.52 -> i'm in a screen reader

3887.2 -> and i open the plot or i open my wrapper

3890 -> color and then i'm like navigating

3891.76 -> through this and i somehow i'm like on

3893.359 -> this home button up here and i'm trying

3895.119 -> to click it like that makes no sense

3897.359 -> right but for a non-sighted user or

3899.28 -> somebody who is using a voice over

3901.359 -> service like you don't have the context

3904.24 -> to understand that you like you've

3905.44 -> escaped this modal that you're supposed

3907.2 -> to be trapped in

3908.559 -> uh so the best practice right is like if

3910.24 -> a modal is open focus should be trapped

3912.24 -> to that so that users can understand

3913.839 -> that there's an action that has to occur

3915.68 -> to navigate outside of that

3917.68 -> right you're not really in a place to

3919.44 -> select fillings right now you're

3920.96 -> selecting your wrapper color

3922.96 -> so let's go with this like nice uh we're

3925.52 -> going hot pink

3927.039 -> so now that we have our hot pink five

3929.92 -> fun dumplings uh let's look at how to

3932.16 -> add focus drop

3933.68 -> and this is gonna be super easy all

3936.16 -> you're going to do is add the directive

3937.839 -> so a directive in angular again is um

3940.48 -> sort of like a control that you're

3942.4 -> adding to something and all we're going

3943.92 -> to do is use this attribute called cdk

3946.319 -> focus initial

3947.76 -> and add it to our material context

3950.4 -> now we are mostly just doing this to

3952.48 -> show what it would be like um

3955.44 -> because we since we are using angular

3957.76 -> material our uh our focus is already

3960.799 -> going to be trapped let's see where is

3963.039 -> this

3964.72 -> on step 10.

3968.4 -> um but in our color picker dialog let's

3970.88 -> look at this so in our color picker

3972.64 -> dialog html we have a selection list

3975.68 -> again sounds familiar but this time we

3978.72 -> want to make sure that the focus is

3980 -> trapped so all we're going to do is add

3981.68 -> cdk focus initial to ensure that we're

3984.72 -> focusing on the selection list when we

3986.799 -> first open the dialog so when we open

3989.039 -> the dialog we're not accidentally

3990.559 -> focusing on like again this home page or

3993.839 -> like our shop because our focus really

3995.599 -> should be within this

3997.68 -> um

3999.599 -> you know if we think about our other map

4001.44 -> selection list

4003.039 -> oops

4003.92 -> let's think about our other matt

4005.039 -> selection list

4006.48 -> um this wouldn't make sense for using

4009.359 -> that cdk directive right because here we

4011.92 -> don't want to trap focus here again this

4014.4 -> list of fillings once you enter this you

4016.88 -> can navigate out of it there's other

4018.4 -> things on this page but here that's

4020.72 -> something on the page right so we want

4022.24 -> to add that directive so if we go back

4024.64 -> we've added the cdk focus initial

4028.079 -> directive to our selection list

4030.799 -> and let's save and again nothing's going

4033.039 -> to actually show up for us but

4035.119 -> in theory we now know that we're

4036.799 -> chopping focus when we have that

4038.72 -> behavior

4040.96 -> moving on uh step 11

4044.72 -> we're going to do another cdk thing

4047.039 -> which is using live announcer so live

4049.76 -> announcer is the idea that when it

4052.4 -> changes me to the page we want to

4054.319 -> reflect that to voiceover so for example

4058.559 -> a great example is

4060.799 -> again i really like my color picker

4063.92 -> let's say i navigate through and i

4065.599 -> change to hot pink

4067.28 -> um here let me see if i can do it

4076.079 -> my god

4092.64 -> oh

4098 -> okay

4098.96 -> yep

4100.159 -> voiceover does not like my meat anyways

4103.04 -> so uh

4105.44 -> obviously you can't hear my voiceover

4107.199 -> which is why i'm

4108.48 -> not presenting it but if i was to

4111.279 -> inspect and go into this module again

4114.56 -> uh voiceover is gonna read all of these

4116.88 -> things and let's say i click light green

4118.799 -> and then i apply color

4120.4 -> like there is no notification to the

4122.319 -> user that that successfully happened

4124.56 -> right so like let's say it failed or

4126.159 -> let's say like um i accidentally

4128.4 -> selected gold

4130 -> and i clicked apply color and then i

4132 -> didn't know that i changed my color and

4133.6 -> i went to purchase them

4135.279 -> we want to make sure that when a user

4136.88 -> exits this modal they understand the

4139.279 -> selection they just made and they're

4140.56 -> notified of that change because there's

4142.08 -> a visual change happening on the screen

4144.319 -> so anytime there's a visual change

4145.679 -> happening on the screen a great example

4147.359 -> would be let's say i had a form

4149.199 -> and i tried to submit a form and a bunch

4151.12 -> of errors happened

4152.56 -> um obviously there's a red error the

4154.64 -> error message is red but for people

4156.48 -> using screen readers they're not going

4158.319 -> to know that all those errors have

4159.92 -> appeared on the screen because they're

4161.279 -> not highlighted especially let's say

4162.96 -> there's like 10 errors you can't

4164.4 -> highlight all of them so the best

4166.4 -> practice is to announce those to the

4168.159 -> user

4169.04 -> and there's a few different ways to do

4170.4 -> that um you can do that politely you can

4172.88 -> do that um

4174.96 -> more urgently

4176.719 -> but all of that is going to be done

4178.239 -> using the live announcer so

4181.44 -> if you want to recreate that there are

4183.44 -> steps to identify the issue

4185.359 -> again i cannot have my screen reader

4187.359 -> read to you unfortunately

4189.679 -> but to fix this we're going to add the

4191.199 -> live answer to our color picker so

4194.159 -> we're going to go to our code

4196.159 -> we're on to do

4198.32 -> step i think we're on number 11.

4202.96 -> yeah

4204.4 -> um

4210 -> yeah

4211.28 -> okay and in our component let's first

4213.6 -> make sure that we notify the change so

4216.64 -> first in our dialog component in our

4219.28 -> constructor

4220.56 -> we're going to change our constructor to

4222.64 -> have a reference to the live announcer

4226.159 -> so i'm going to copy and paste this code

4227.679 -> i'm going to give

4228.84 -> it uh and i'm gonna make sure that i

4231.199 -> import

4232.239 -> my live announcer

4235.199 -> uh

4238 -> and some data

4239.92 -> oops

4246.8 -> fix

4248.88 -> there you go okay

4250.64 -> i just want to make sure i imported the

4252.48 -> things i needed to

4254.88 -> um

4256.8 -> what is this out of me

4259.12 -> oh

4260.96 -> okay

4262.48 -> there you go

4264 -> um

4265.12 -> cool so what i'm doing here is i'm

4267.12 -> creating a constructor i already had my

4268.719 -> dialog reference but now i'm just

4270.48 -> injecting to make sure that i know what

4272 -> data is being uh selected for my color

4275.04 -> dialog data so again i want to make sure

4276.88 -> i know which color was just selected

4278.64 -> within my color picker component and

4280.8 -> then i'm going to use this live

4281.76 -> announcer thing so remember we imported

4283.52 -> the module

4284.719 -> uh cdk ally now i'm importing my live

4287.28 -> announcer from my cdk ally because i

4289.44 -> want to use it because i'm i'm going to

4290.96 -> announce something

4292.4 -> i'm basically a sports announcer at this

4294.159 -> point

4295.199 -> and then i'm going to create

4299.28 -> uh

4300.96 -> change color

4302.64 -> um

4304.239 -> oops

4308 -> now i'm going to do one other thing

4309.76 -> which is before i close my component so

4312 -> before i use my dialog breath to close

4314.88 -> because i've made a color if i've

4317.199 -> changed my color so not if i've exited

4319.6 -> because i don't want to do anything then

4321.04 -> right there's no change to reflect but

4323.04 -> if i change my color then i'm going to

4325.12 -> go to my live announcer object that i've

4327.679 -> already constructed from live announcer

4329.92 -> and i'm going to use the announce

4332 -> uh api call to say i've selected a color

4335.76 -> and i'm going to look at whatever color

4337.28 -> i have as an object and i'm going to

4339.36 -> make sure to announce that right

4342.8 -> and that's it right so it's the live

4344.56 -> announcer dot announced super intuitive

4347.12 -> if you're interested in this

4349.12 -> again i can go to the live announcer

4350.96 -> docs i can say hey there's live

4352.88 -> announcer

4354.48 -> and i can go to my api reference to make

4356.4 -> sure that i understand what is there but

4358.56 -> look my main method is announce

4361.28 -> um and now if i were to go and do that

4363.52 -> again remember anytime i'm clicking a

4365.76 -> new

4366.719 -> option and i'm applying the color and

4368.56 -> it's emitting that change i'm also going

4370.64 -> to announce

4371.84 -> to my screen reader select color

4374.56 -> hot pink or select color

4377.679 -> green yellow right so that i can notify

4380.159 -> users even if you're not visually seeing

4382.4 -> a change on the screen that a change was

4384.08 -> made

4385.84 -> um so cool navi's live announcer uh

4389.12 -> we've done that we can verify and

4391.12 -> there's one last change i want to make

4393.12 -> and then we'll wrap it up

4394.96 -> and this one last change is one more

4396.8 -> thing in that cdk ally package and this

4399.12 -> is high contrast mode and so high

4401.12 -> contrast mode i don't have windows open

4403.28 -> right now but it's a windows specific

4405.76 -> feature called high contrast mode um i

4408.719 -> think that there are plans in the chrome

4410.56 -> organization to do something similar

4412.48 -> this is the idea that you can change the

4414.8 -> appearance of all of your applications

4416.8 -> to dramatically increase contrast

4419.76 -> so in high contrast mode very typically

4422.719 -> instead of like pink and red and blue

4425.12 -> and all these colors on screen it would

4426.719 -> just be white and black to create the

4428.96 -> highest possible contrast so again we

4431.36 -> already did like you know i'm checking

4433.44 -> all these things for contrast ratios i'm

4435.28 -> seeing like the 50s the 60s we want to

4437.76 -> make sure everything is essentially a

4439.28 -> hundred percent right is the highest

4441.36 -> possible contrast this is great for

4443.76 -> users who may be too prone to migraines

4446.239 -> um i have team members that use this

4448.32 -> because they get headaches if they look

4450.48 -> at screens too long right like we all

4452.32 -> live in a world where we stare at

4453.6 -> screens all day high contrast mode is

4455.679 -> super useful for that and those are

4457.199 -> disabilities right like they may not be

4459.76 -> heard thought of in the same way as

4462.8 -> more

4464.4 -> typical disabilities but they are just

4466.8 -> as valuable to ensure that you have an

4469.52 -> application that is thinking about those

4471.44 -> use cases to make sure that everyone is

4473.92 -> able to use the services you're creating

4476.64 -> so high contrast mode is super cool

4478.4 -> again it's on windows

4480.32 -> and we have something cool which is the

4481.76 -> high contrast mode detector in the uh

4484.64 -> cdk ally package

4486.719 -> and so what you're gonna do here

4488.64 -> is you're going to actually go into css

4491.6 -> and this is super rare right that i feel

4493.6 -> like um

4495.6 -> you can make accessibility changes

4497.36 -> purely out of css especially that like

4499.76 -> intelligently know uh like

4503.04 -> that this thing happens and so what

4504.64 -> we're gonna do is we're gonna import

4507.28 -> um our cbk ally uh you don't need the

4510.56 -> tilde anymore if you're following along

4512.4 -> here um but

4514.96 -> uh that is a recent change to version

4516.719 -> 12. and then we're going to add some new

4518.719 -> css so what you're seeing here is if i

4521.76 -> go to my purchase button

4525.6 -> uh

4526.48 -> i can add that when

4529.199 -> i have

4530.64 -> a cdk high contrast mode which i'm

4533.36 -> detecting using again this import that i

4536.08 -> just made

4537.12 -> from the cdk

4538.56 -> ally i now have access to a new mix-in

4542 -> or a new

4543.36 -> media query to say when cdk high

4545.92 -> contrast is on

4547.92 -> for my button

4549.36 -> let's use that as a use case and let's

4551.199 -> make it look really high contrast so

4553.6 -> let's make the background color the

4555.28 -> lightest possible

4556.96 -> and let's make our outline super thick

4559.28 -> so like

4560.56 -> the thickest possible and we're just

4562.64 -> gonna do the same for dark mode just to

4564.56 -> make sure that both themes have that

4567.52 -> um

4569.679 -> because i think that's important

4572.96 -> uh

4574.48 -> and now let's go

4576.56 -> to

4577.44 -> our application and see what that looks

4579.12 -> like oops

4581.52 -> oh why is it mad

4587.52 -> okay

4588.88 -> nope

4592.239 -> try and rebuild

4598.56 -> um a fun thing where rebuilding might

4601.52 -> save us

4603.44 -> or

4604.32 -> i will say it got through 12 steps

4606.8 -> before i ran into an issue so i think

4608.88 -> that's kind of impressive

4610.8 -> um all things considered

4613.6 -> uh

4616.88 -> yeah

4617.92 -> it does not like that import do not know

4620.96 -> why it does not like that import

4623.6 -> let's think about

4641.92 -> okay well i have something i can do

4645.28 -> remember how i said at the end you can

4647.679 -> get check

4648.84 -> out name

4656.159 -> look i have all my changes oh and that's

4658.88 -> why um so it looks like

4661.44 -> we've actually changed it so you just

4662.88 -> import the cdk not cdk ally

4665.44 -> uh so i should go and change my code lab

4667.84 -> since that changed in version 13. so

4669.84 -> instead of this import statement you're

4672 -> just going to remove that tilde

4674.88 -> and remove the accessibility reference

4676.88 -> and this is all going to be within cdk

4679.76 -> as part of the most recent version we

4681.52 -> were more intentional about elevating

4683.679 -> how you import things like that so

4686.08 -> um

4686.88 -> if you're interested in that

4688.64 -> uh feel free to

4690.64 -> tweet me uh if i forget to change the

4693.04 -> code lab bonus points

4695.679 -> um so yeah

4697.04 -> you can see that in high contrast mode

4700.48 -> uh

4701.6 -> oops

4702.8 -> in high contrast mode this would be

4704.56 -> applied right so cdk.high contrast is

4707.12 -> how we're going to reference this

4708.96 -> um

4710.719 -> and again i actually think this code lab

4712.8 -> is even more incorrect because cdk

4714.48 -> hydrocontrast mode is for version 12 and

4716.48 -> below and we've now changed the

4718.239 -> reference to cdk dot high contrast um

4721.76 -> just if you're falling on along

4724.08 -> specifically and i main should reflect

4727.36 -> version 13's version of these things the

4729.28 -> code lab just is version 12 and below so

4731.36 -> i need to make that code change but i

4733.28 -> did get to the very end of this good lab

4734.88 -> before i ran into this so i'm going to

4736.32 -> take that as a success

4738.08 -> so since i'm not in high contrast mode i

4740.239 -> just want to show

4742.08 -> what that would look like by removing

4744.48 -> that media query just that you can see

4747.36 -> and so that is a great example of what

4749.36 -> high contrast web right looks like uh

4752.159 -> we're still like using a little bit of

4753.76 -> hue because we think it's fun but like

4755.44 -> an even better practice would just be to

4757.199 -> make it white right like

4758.88 -> the highest possible contrast

4761.12 -> and we're gonna even like make this even

4762.96 -> thicker right so like making sure that

4765.12 -> people have the highest possible

4766.64 -> contrast there we could make the text

4768.48 -> even larger or something like that but

4770.56 -> that is going to visually read as a very

4772.4 -> clear button without having any sort of

4774.719 -> like

4775.52 -> um visual

4777.52 -> clashing or like you know this green

4780.159 -> could be like really jarring on certain

4782.08 -> eyes uh so i want to make sure to

4784 -> respect that in high contrast mode

4785.84 -> especially for those users by providing

4788.88 -> um some styling specific to that so

4791.28 -> again like this is a super cool mix and

4793.199 -> i think it's really cool that the cdk

4795.12 -> has the ability to

4796.88 -> um find these things

4799.44 -> uh and it's very cool to be a part of

4801.04 -> the modern web doing that and with that

4804 -> i think that we have 10 extra minutes so

4805.84 -> i just want to say congratulations uh so

4808.32 -> if we think about it remember we

4810.8 -> successfully

4812.4 -> should not have that open

4813.92 -> we successfully went from a very

4816.4 -> inaccessible application to a completely

4818.719 -> accessible one right

4820.56 -> um

4821.36 -> we ran lighthouse to generate our score

4824.96 -> again we did this a while ago pretty

4826.8 -> sure it's still going to be at 100 but

4828.56 -> let's just like do it to check

4830.719 -> uh it feels good to give us some pats on

4833.6 -> the back for this so yeah so we got 100

4836.56 -> there

4837.44 -> remember we linted uh with our lint

4840.159 -> rules that we added

4841.92 -> oops

4843.28 -> i'll run it again just to just to prove

4845.44 -> how good we are

4846.88 -> um so we did linting we used lighthouse

4849.76 -> to check our accessibility we also

4852.159 -> talked about how to manually test um and

4855.04 -> for those of you following along

4856.56 -> hopefully you have checked out how to

4858.64 -> turn on voiceover and do these things

4860.8 -> and then we went through eight different

4862.64 -> things right so we

4864.48 -> talked about why single page

4866.4 -> applications are great but why we should

4869.36 -> we should think about uh unique page

4872.239 -> titles and how to add them especially

4874.08 -> using the angular router to do so and

4876.239 -> then manage those routes in our app

4878.08 -> component

4879.28 -> at the highest level we talked about how

4881.76 -> to check contrast ratios and add them

4884.56 -> especially when maintaining a design

4886.48 -> system like angular material

4888.719 -> to ensure that like we only changed one

4890.88 -> line of code right like we just changed

4892.64 -> the color of the text to make sure that

4894.719 -> that was accessible and the entire app

4897.28 -> suddenly was passing for contrast we

4899.44 -> talked about semantic html using buttons

4901.76 -> using headers appropriately uh we talked

4904.4 -> about selectable controls and how to

4906.56 -> make sure that like

4908.08 -> instead of confusing nested check boxes

4911.199 -> we were using a more intuitive more

4913.92 -> cognitively dissonant like version of

4916.159 -> these things

4917.44 -> we talked about

4918.96 -> aria labels and how to add those to

4921.04 -> things like our sliders to ensure that

4922.96 -> we were defining the aria input so that

4925.199 -> our rem was meaningful so that if i'm

4927.6 -> like navigating this thing i can like

4929.76 -> successfully buy my uh dumplings

4932.88 -> and then we also talked about cdk ally

4935.44 -> and some different things including

4936.88 -> focus trap live announcing and high

4940 -> contrast mode in css and so with that

4943.199 -> uh you can count how many different

4945.28 -> commits you have um but feel free to

4947.92 -> again revisit this code lab if there

4950.239 -> were specific steps that were tricky for

4952.48 -> you

4953.6 -> feel free to

4955.52 -> open issues on the github repository or

4957.92 -> tag me on twitter at twisky it's my last

4961.199 -> name but instead of the y and e

4963.84 -> and i'd love to talk about all these

4965.12 -> things with you

4967.12 -> um

4968.88 -> yeah and let's see

4971.36 -> i know that the chat has been pretty

4973.52 -> quiet

4975.92 -> but if you have any questions now is the

4977.76 -> time to throw them i know we have like

4979.84 -> seven extra minutes um

4982.08 -> but i just want to wrap up and say thank

4983.76 -> you again like

4985.28 -> it's really

4986.4 -> cool to see people care about

4987.76 -> accessibility uh especially with angular

4990.719 -> you have a huge um impact by doing these

4994.32 -> things so even just running the um core

4997.84 -> web vitals to see where you're at now

5000.239 -> and make like little adjustments it's

5001.84 -> like a great place to start

5004.159 -> um let's see

5006.48 -> uh there was also a feedback change or a

5008.96 -> feedback link sent out in the chat so

5012 -> please go ahead and add it there

5014.96 -> and again you can find me

5016.88 -> on twitter i'll throw that in the chat

5019.28 -> as well

5020.8 -> that is the easiest way to get a hold of

5022.8 -> me

5024.96 -> um yeah let's see

5030.48 -> i see some questions can you please help

5032.239 -> me with debugging with chrome dev tools

5034.8 -> there's some really great resources for

5036.8 -> chrome dev tools um if you even go to

5038.96 -> just codelabs.developers.

5043.04 -> there's some like great code bops there

5045.679 -> um that are on like

5048.719 -> devtools

5050.88 -> yeah let's see

5053.12 -> oops

5054.719 -> oh okay well i spelled it wrong but if

5057.36 -> you spelled it right you would get more

5059.84 -> um yeah so there's some great videos

5061.6 -> there there's also some videos on the

5063.12 -> angular youtube for that uh debugging is

5065.6 -> like a super broad question if there's

5067.36 -> something specific to accessibility that

5069.04 -> you want me to answer feel free to add

5070.56 -> that in the chat

5072 -> housing healer's app architecture

5073.92 -> different from other frameworks

5076 -> angular is super opinionated but it's

5078 -> also um

5080.32 -> uh

5081.76 -> it has a lot of solutions out of the box

5084 -> right so angular if we look at our

5085.679 -> application right like each of my

5087.679 -> components i have a very familiar

5090.48 -> structure right where i have

5092.32 -> html css

5094.719 -> or a sas in this case and then the

5096.639 -> component and the component is where all

5098.8 -> of i have all of my logic the sas is

5101.28 -> where i have all of my styling and then

5102.88 -> html is where i have the actual like

5104.719 -> structure of that uh and that's gonna be

5106.719 -> the same no matter what application you

5108.719 -> go into and so it's super familiar right

5110.8 -> so like

5111.84 -> really easy to onboard to a new

5113.44 -> application um

5115.6 -> even if you're not familiar with like

5117.12 -> the actual code you're working with

5119.199 -> um and it also has all these things out

5121.04 -> of the box right so like we have the

5122.639 -> ally package we have all these things

5124.56 -> versus in other frameworks you would

5126.239 -> bring be bringing in third-party

5127.84 -> libraries

5129.04 -> um

5130.239 -> which is also great but just a different

5132.4 -> approach so angular sometimes is thought

5134.88 -> of as a slightly larger solution

5136.96 -> especially for like enterprises but

5139.12 -> really what that means is instead of

5140.8 -> like putting it on your

5142.719 -> uh hands to say like i need

5144.48 -> accessibility i need to go find an

5146 -> accessibility package and bring that in

5147.92 -> and make my app larger by doing so

5150.8 -> we say like hey at its core you need

5153.04 -> accessibility we're going to give that

5154.639 -> to you and we're going to say that like

5156.8 -> it is going to be a little bit larger

5158.48 -> out of the box but that's because out of

5160.239 -> the box we also are giving you solutions

5162.159 -> to these things

5164.239 -> uh

5165.84 -> let's see a recording will be provided

5169.12 -> um

5172.8 -> suppose i need business logic could you

5174.8 -> sure

5175.92 -> you were only telling

5177.52 -> only

5179.28 -> okay

5180.84 -> um there's a question about business

5183.52 -> logic resources for

5186.639 -> debugging it looks like

5189.04 -> uh so chrome devtools is mostly

5193.36 -> uh for styling and visual changes right

5196.239 -> like the

5197.52 -> all of these panels really are about um

5200.48 -> debugging like visual things if you're

5202.239 -> talking about performance or things like

5203.76 -> that and you're developing with angular

5205.52 -> i highly recommend you download angular

5207.6 -> dev tools which does have things like a

5209.92 -> profiler where i can record like my

5212.639 -> change detection cycles

5214.719 -> and then debug for performance right so

5217.04 -> like

5217.92 -> let's stop that

5219.36 -> i can see that like somewhere back there

5221.92 -> like that didn't do so well um my app

5224.56 -> component was making sort of a costly

5226.32 -> change

5227.6 -> um so if you want to know more about

5230.239 -> this we have entire videos about this

5232.96 -> uh angular

5234.719 -> io backslash guide backsplash

5240.08 -> um

5241.6 -> and dev tools would be a great way to

5243.36 -> start debugging uh for performance for

5246.32 -> business logic uh

5248.4 -> you're gonna have to do a lot of that

5249.76 -> debugging yourself

5253.92 -> lighthouse is what i use oh yep

5256.719 -> we have we were

5258.639 -> we've talked a lot about lighthouse

5260.08 -> tonight um but yeah i just want to say

5263.28 -> again we have two minutes left but thank

5265.199 -> you so much for joining again feel free

5267.76 -> to reach out on

5269.52 -> twitter

5270.48 -> i know a recording of this will be sent

5272.32 -> out and you have all of the code to play

5274.239 -> around with so

5275.679 -> if you're interested in any of the

5277.12 -> specific recommendations i made again

5279.679 -> the code lab is online and available at

5282.08 -> all times

5283.45 -> [Music]

5297.679 -> you

Source: https://www.youtube.com/watch?v=juf_HneUbMk