1 00:00:06,879 --> 00:00:10,759 Speaker 1: Hello and how you Welcome to another Adventures in Anguler. 2 00:00:10,880 --> 00:00:14,640 My name is Alyssa Nigel. I am so excited for 3 00:00:14,759 --> 00:00:18,000 today's show, but I have no spoilers no spoilers. So 4 00:00:18,079 --> 00:00:25,239 our panelists include the wonderful Chris Board Meetings and joining 5 00:00:25,320 --> 00:00:28,440 us day is Eddie Hinkle as well. Hey everyone, and 6 00:00:28,679 --> 00:00:32,240 our super secret not yet announced but now totally announced 7 00:00:32,280 --> 00:00:37,600 guest is the Tally bar Rob Welcome. Welcome, Oh my goodness, 8 00:00:37,640 --> 00:00:40,840 so vitally for people out in the community who have 9 00:00:40,960 --> 00:00:43,600 not met you yet, can you tell us a little 10 00:00:43,600 --> 00:00:44,880 bit about yourself what you do? 11 00:00:45,240 --> 00:00:45,359 Speaker 2: Oh? 12 00:00:45,439 --> 00:00:45,600 Speaker 3: Yes? 13 00:00:45,960 --> 00:00:50,280 Speaker 4: So as the work just software engineer re softom engineer 14 00:00:50,320 --> 00:00:53,520 at an outsourcing company called Depom Systems. 15 00:00:53,679 --> 00:00:54,679 Speaker 2: I'm working on a. 16 00:00:54,640 --> 00:00:59,399 Speaker 4: Client which is one of the biggest tech companies, but 17 00:00:59,520 --> 00:01:03,399 I can say which one because of Bengi's And mostly 18 00:01:03,399 --> 00:01:10,319 I'm working with Angler and dark Anglar flat things. 19 00:01:10,040 --> 00:01:14,680 Speaker 2: Like that and basically regarding the work that it is. 20 00:01:15,120 --> 00:01:21,599 But to be main additions. On free time, I'm to music. 21 00:01:22,280 --> 00:01:24,920 Actually I maintaining an. 22 00:01:24,840 --> 00:01:33,159 Speaker 4: Angler application for guitar effects, examplifiers and cabinets and also. 23 00:01:33,040 --> 00:01:38,480 Speaker 2: Doing an old stuff. I'm doing anal. 24 00:01:38,439 --> 00:01:46,239 Speaker 4: Circuits on my own cover drives distortion such cuts of things, and. 25 00:01:45,400 --> 00:01:48,159 Speaker 1: Basically is that I I was looking at our notes 26 00:01:48,159 --> 00:01:52,519 to see if we have your GitHub so I could 27 00:01:52,560 --> 00:01:54,519 check out some of those projects you were mentioning. 28 00:01:55,519 --> 00:01:57,319 Speaker 5: What's your name on githubing? These people want to check 29 00:01:57,319 --> 00:01:57,680 it out. 30 00:01:58,359 --> 00:02:03,439 Speaker 4: It's the same vitally bobro but vitally written slightly different. 31 00:02:05,239 --> 00:02:08,439 Speaker 5: Throw throw people off the set so they can't find you. 32 00:02:09,479 --> 00:02:16,360 Speaker 4: Because I I created this account before I got my 33 00:02:17,400 --> 00:02:21,919 foreign passports with official transliteration of my name because. 34 00:02:21,680 --> 00:02:25,599 Speaker 2: Originally it's written in syrially, so it's completely different. 35 00:02:25,759 --> 00:02:30,639 Speaker 4: Yeah, right, like exact rules, how the translates or really 36 00:02:31,240 --> 00:02:33,680 names to much. 37 00:02:34,960 --> 00:02:36,840 Speaker 5: Yeah, that's awesome. 38 00:02:38,199 --> 00:02:40,199 Speaker 1: I didn't even know there were such rules, but that 39 00:02:40,280 --> 00:02:42,159 makes sense for translating. 40 00:02:42,800 --> 00:02:47,400 Speaker 2: As government rules. How well then, and. 41 00:02:47,319 --> 00:02:49,719 Speaker 5: So you're like, yeah, sure, that's totally what it's supposed 42 00:02:49,719 --> 00:02:50,120 to look like. 43 00:02:52,360 --> 00:02:55,439 Speaker 2: I mean now I'm trying to use official one like in. 44 00:02:55,520 --> 00:03:01,120 Speaker 1: Passports, right right, So it's tell us to tell me 45 00:03:01,240 --> 00:03:03,639 what are we talking about today on the show. 46 00:03:04,599 --> 00:03:11,400 Speaker 4: We want to talk about accessibility in general in web 47 00:03:11,800 --> 00:03:16,199 and how to relate it to user experience in general? 48 00:03:16,879 --> 00:03:21,000 Speaker 2: What can you do? What can we use to improve it? 49 00:03:21,599 --> 00:03:25,120 Speaker 4: Why we should care about how we can maintain the 50 00:03:25,280 --> 00:03:30,439 level of some particular accessibility and things like that. 51 00:03:31,159 --> 00:03:35,400 Speaker 1: Do you often get to bring accessibility into applications in 52 00:03:35,439 --> 00:03:36,000 your day job? 53 00:03:37,439 --> 00:03:42,479 Speaker 4: Yes, because the company I'm working for has special requirements 54 00:03:42,520 --> 00:03:47,080 for all applications to achieve a certain level of accessibility. 55 00:03:47,639 --> 00:03:49,159 Speaker 2: They have a dedicated. 56 00:03:48,719 --> 00:03:54,280 Speaker 4: Team that makes an audit for each project and you 57 00:03:54,400 --> 00:03:59,759 can go with the application in production if you can't 58 00:03:59,800 --> 00:04:03,360 mind some minimum level for accessibility. 59 00:04:03,439 --> 00:04:06,439 Speaker 1: So like, does this team basically give you a grade? 60 00:04:06,479 --> 00:04:07,960 And they contact you and they're like. 61 00:04:08,000 --> 00:04:15,560 Speaker 4: Yeah, right, rates like levels of accessibility like five levels 62 00:04:15,639 --> 00:04:18,199 and you can go below third one. 63 00:04:18,800 --> 00:04:20,120 Speaker 5: That is so cool. 64 00:04:20,319 --> 00:04:22,240 Speaker 2: I love you your application. 65 00:04:22,399 --> 00:04:26,480 Speaker 4: When you think that it's ready for review accessibility review, 66 00:04:26,839 --> 00:04:34,160 then you forward it to this team, describe user journeys, 67 00:04:34,199 --> 00:04:38,560 how users should interact with your applications and something like that, 68 00:04:39,000 --> 00:04:42,480 and then they try to test it in different ways 69 00:04:42,560 --> 00:04:46,199 and provide you with some hints how to improve it, 70 00:04:46,360 --> 00:04:50,759 what should be changed and basically like that, and it 71 00:04:50,800 --> 00:04:55,360 takes a lot of time, and after we achieved the 72 00:04:56,120 --> 00:05:01,240 false level. I think that if you want to make 73 00:05:01,279 --> 00:05:05,000 an app accessible, you should invest your time from the 74 00:05:05,040 --> 00:05:09,680 beginning because otherwise it will take a lot of time. 75 00:05:10,360 --> 00:05:13,519 Speaker 1: Really well, I mean I at this point though, do 76 00:05:13,600 --> 00:05:16,240 you just like pass with flying colors and it's not 77 00:05:16,279 --> 00:05:18,480 even a thought because you've been doing it for so long. 78 00:05:19,399 --> 00:05:24,600 Speaker 4: Then the data and policies regarding murals and we reapply 79 00:05:24,680 --> 00:05:28,240 and again and again. Also, if you're adding some new 80 00:05:28,319 --> 00:05:29,800 food channelity. 81 00:05:29,360 --> 00:05:33,519 Speaker 2: Like new views with let's say some drag and drop 82 00:05:33,600 --> 00:05:38,120 greeds and things like that, you will also forward these 83 00:05:38,160 --> 00:05:41,680 parts so it won't be the whole up review but 84 00:05:41,959 --> 00:05:43,079 new features review. 85 00:05:43,319 --> 00:05:46,319 Speaker 6: Regarding accessibility very good, There isn't it that you've got 86 00:05:46,360 --> 00:05:48,399 access to a team who can help you out with that, 87 00:05:48,439 --> 00:05:51,720 because what I found sort of historically is that if 88 00:05:51,720 --> 00:05:55,240 you've got an accessibility problem, you find out about it 89 00:05:55,279 --> 00:05:58,439 when someone tells you that they can't use your website, 90 00:05:58,560 --> 00:06:02,040 your application, because the abilities are very good, right, So 91 00:06:02,560 --> 00:06:05,920 it's really nice to have somebody there actually doing that. 92 00:06:07,040 --> 00:06:09,480 It can be really just far too easy to just 93 00:06:09,560 --> 00:06:11,680 let it go under the radar on it when you're developing. 94 00:06:12,480 --> 00:06:14,759 So because there's so much to do, right, I'm not 95 00:06:14,759 --> 00:06:19,639 making excuses for my poor accessibility, but there's so much. 96 00:06:19,439 --> 00:06:23,040 Speaker 5: To do and it is one of those things well yeah. 97 00:06:22,920 --> 00:06:25,399 Speaker 6: Yeah, it's just one of those things that if you're 98 00:06:25,439 --> 00:06:30,199 not just on it, you just won't necessarily addressing it right. 99 00:06:30,600 --> 00:06:34,560 Speaker 4: And I believe that this topic became more and more 100 00:06:34,600 --> 00:06:40,680 important because law improved a lot in Yau, in particular 101 00:06:40,920 --> 00:06:45,439 in some countries like Scandinavic Norway, Sweden. 102 00:06:45,759 --> 00:06:46,720 Speaker 2: And in States. 103 00:06:46,759 --> 00:06:51,040 Speaker 4: I knew that there a lot of court cases regarding accessibility. 104 00:06:52,160 --> 00:06:58,079 So basically, the more it will be obligated for businesses 105 00:06:58,279 --> 00:07:03,360 to improve accessibility, the more will be gained for developers 106 00:07:03,439 --> 00:07:07,639 who can work on improvements in this area to achieve 107 00:07:08,480 --> 00:07:11,040 certain standards. 108 00:07:11,439 --> 00:07:13,079 Speaker 2: So I believe it's the future. 109 00:07:13,079 --> 00:07:17,399 Speaker 4: And in general, front end nowadays growing so much in 110 00:07:18,360 --> 00:07:24,600 very wide areas like we have now web assembly, let's say, 111 00:07:24,759 --> 00:07:28,199 webs are things like that, so there are so many 112 00:07:28,240 --> 00:07:33,360 different things to learn and understand. So I believe that 113 00:07:33,439 --> 00:07:38,040 in the future front end will be more granual regarding 114 00:07:38,199 --> 00:07:41,720 specializations for developers because it's too. 115 00:07:41,680 --> 00:07:43,399 Speaker 2: Much of knowledge for one person. 116 00:07:44,199 --> 00:07:46,839 Speaker 4: So basically I believe it will be some persons who 117 00:07:46,920 --> 00:07:50,879 will work with web assembly with some we are stuff 118 00:07:51,079 --> 00:07:56,079 with audio with just layouts and things like that, and 119 00:07:56,399 --> 00:08:04,160 accessibility maybe as well as the separate, separate specialization for 120 00:08:04,319 --> 00:08:10,079 front time developers who else maybe machines will replace us and. 121 00:08:11,839 --> 00:08:13,680 Speaker 2: Nobody will need it anymore. 122 00:08:14,199 --> 00:08:18,600 Speaker 3: It's a happy thought. Yes, then we can close down 123 00:08:18,600 --> 00:08:19,040 on that one. 124 00:08:19,519 --> 00:08:22,839 Speaker 2: It's very Yeah, you know, we just have. 125 00:08:22,839 --> 00:08:25,839 Speaker 1: Like an electronic noise of the machine taking over and 126 00:08:25,879 --> 00:08:27,240 we're just silent, and then that's it. 127 00:08:27,319 --> 00:08:31,759 Speaker 4: Yeah, I don't know my book keyboards these metal fingers. 128 00:08:33,799 --> 00:08:37,440 Speaker 1: So tell us, tell us some things, because it can 129 00:08:37,559 --> 00:08:41,759 be overwhelming, kind of a daunting topic. If you know, 130 00:08:41,799 --> 00:08:44,399 you're an angither developer, you're working on apps all the time, 131 00:08:44,679 --> 00:08:48,240 what's a starting point for accessibility and to bring that 132 00:08:48,279 --> 00:08:49,279 into your applications? 133 00:08:49,600 --> 00:08:53,200 Speaker 2: I think it's the main starting important point here is each. 134 00:08:53,080 --> 00:08:59,279 Speaker 4: Tema actually to learn what does all those elements existing 135 00:08:59,399 --> 00:09:01,840 in smelspac and. 136 00:09:01,919 --> 00:09:05,879 Speaker 2: What is the right purpose of those elements? 137 00:09:06,039 --> 00:09:09,039 Speaker 1: You're saying within a did, within a span, within a D, 138 00:09:09,159 --> 00:09:12,840 within a span within AD is not semantic mark up what. 139 00:09:13,240 --> 00:09:17,039 Speaker 5: Like you guys ever been there where you're like, who 140 00:09:17,080 --> 00:09:18,679 spit this out? And why is it still? 141 00:09:19,679 --> 00:09:24,320 Speaker 4: But you know spen and deep. Yeah, right, it's an 142 00:09:24,360 --> 00:09:28,279 as a topic. But even sometimes it's hard to say 143 00:09:28,360 --> 00:09:29,440 where to use. 144 00:09:29,480 --> 00:09:30,960 Speaker 3: A a tag. 145 00:09:31,639 --> 00:09:35,279 Speaker 4: Like just link or a button or should I use 146 00:09:35,600 --> 00:09:39,840 section elements? What is it what it should be used for. 147 00:09:40,320 --> 00:09:43,279 Speaker 1: Especially because you can style them to look like anything, 148 00:09:43,279 --> 00:09:45,080 So you can style your anchor to look like your button, 149 00:09:45,120 --> 00:09:46,600 or you can sell your button looks like an anchor. 150 00:09:46,679 --> 00:09:49,360 So these are all really valid points of when do 151 00:09:49,399 --> 00:09:51,879 I use them? Do you have a resource to point 152 00:09:51,919 --> 00:09:52,960 to you as far as like. 153 00:09:54,559 --> 00:09:54,840 Speaker 5: Question. 154 00:09:55,159 --> 00:10:00,600 Speaker 4: One resource created by Manuel Matozos as far as remember 155 00:10:00,679 --> 00:10:04,639 he's from Austria and the project called HML help. 156 00:10:05,720 --> 00:10:07,120 Speaker 5: I am currently looking at the. 157 00:10:07,720 --> 00:10:16,039 Speaker 4: Costs is unaccessible HHML markup and styling and explains why 158 00:10:16,039 --> 00:10:21,080 it's wrong and how to make it right. And he 159 00:10:21,200 --> 00:10:25,440 definitely has few posts regarding atak and the bottom and 160 00:10:25,639 --> 00:10:26,320 things like that. 161 00:10:26,559 --> 00:10:27,879 Speaker 2: It's really cool project. 162 00:10:27,919 --> 00:10:32,720 Speaker 4: It's open source so anyone can contribute and add new 163 00:10:32,840 --> 00:10:35,840 posts and they have separate titter accounts. 164 00:10:37,480 --> 00:10:40,600 Speaker 2: It should be called health but I'm not. 165 00:10:40,480 --> 00:10:44,519 Speaker 4: Sure how properly a writed as any end discourse and 166 00:10:44,559 --> 00:10:50,919 things like that. And in general, this guy Manuel, he's 167 00:10:51,080 --> 00:10:57,919 really knowledgeable in accessibility topics. He writes in black pasts 168 00:10:57,960 --> 00:11:04,759 and really good content. Another guy Surgeate Trigger. He also 169 00:11:05,159 --> 00:11:10,360 has a good accessibility talks regarding charts, for example, how 170 00:11:10,399 --> 00:11:15,600 to make your charts accessible and things like that a bunch. 171 00:11:15,720 --> 00:11:20,759 And as I said, this topic gaining more and more attention, 172 00:11:21,480 --> 00:11:26,559 So content, amount of content growing a lot. 173 00:11:27,320 --> 00:11:30,360 Speaker 1: You found it, it's dot dev. Don't go to the 174 00:11:30,440 --> 00:11:35,080 side on it's not the official one. 175 00:11:35,279 --> 00:11:36,679 Speaker 3: I seem I see it's right when. 176 00:11:38,799 --> 00:11:39,679 Speaker 2: It's really cool. 177 00:11:40,440 --> 00:11:44,320 Speaker 6: Yeah, it kind of gives me makes me a little 178 00:11:44,320 --> 00:11:45,559 bit sad reading through it. 179 00:11:45,519 --> 00:11:49,120 Speaker 3: And it's like, oh, some of this looks awful. 180 00:11:52,360 --> 00:11:55,240 Speaker 1: So that's how your first piece of advice is HML. 181 00:11:55,759 --> 00:11:57,799 Know what you're doing with it, know what it's used for. 182 00:11:58,559 --> 00:12:02,360 Speaker 4: Actually you can go wrong. We say, just HTML if 183 00:12:02,399 --> 00:12:07,519 you use it properly. But our applications nowadays are not 184 00:12:07,720 --> 00:12:10,600 just stage camels. So we have Java screed and we're 185 00:12:10,600 --> 00:12:16,799 creating smart digets like fancy buttons with pop ups, models 186 00:12:16,919 --> 00:12:21,840 with I don't know, flash text and whatever, and all 187 00:12:21,879 --> 00:12:27,240 of these we should be somehow described to screen readers, 188 00:12:27,360 --> 00:12:31,720 to machines to be understanded what is what is it 189 00:12:32,320 --> 00:12:35,120 and how to use it and what is more important, 190 00:12:35,879 --> 00:12:39,720 how to use it. For example, with keyboard, most of 191 00:12:39,799 --> 00:12:46,600 developers just developing components with mouths and mind or touch pod, 192 00:12:47,399 --> 00:12:52,360 but not keyboard. And actually keyboard navigation and interactions are 193 00:12:52,440 --> 00:12:58,039 not used only by disabled people. Even developers love keyboard 194 00:12:58,120 --> 00:13:01,879 shortcuts like standards ones. If you have applications to edit 195 00:13:01,960 --> 00:13:07,080 something like let's say audio, you want to edit some 196 00:13:07,279 --> 00:13:11,600 audio tracked and you want to use some common tests 197 00:13:11,799 --> 00:13:16,639 command see comment be to copy some parts of audio, 198 00:13:17,159 --> 00:13:20,080 to save the projects and things like that. It's natural 199 00:13:20,200 --> 00:13:26,679 because it exists for ages in all systems. And also 200 00:13:27,000 --> 00:13:31,559 sometimes you have to use keyboards. Let's say your battery 201 00:13:31,679 --> 00:13:33,519 diets in your mouths. 202 00:13:33,480 --> 00:13:38,440 Speaker 1: And yeah, you're trying to repair, to argue repair and 203 00:13:38,519 --> 00:13:42,360 your painting, yeah, and you need. 204 00:13:42,279 --> 00:13:45,639 Speaker 2: To navigate the stuffs and rrows. 205 00:13:46,679 --> 00:13:50,519 Speaker 4: For example, our app has a huge grid of cards. 206 00:13:50,559 --> 00:13:55,960 It's project management applications with a lot of task as 207 00:13:56,000 --> 00:14:01,399 the cards something close to travel let's say board, and 208 00:14:02,000 --> 00:14:05,960 if you will use taps only to navigate through this 209 00:14:06,360 --> 00:14:08,159 grid of cards, it. 210 00:14:08,159 --> 00:14:09,440 Speaker 2: Will be really annoying. 211 00:14:10,240 --> 00:14:12,879 Speaker 4: Let's say you want to go to the card in 212 00:14:13,000 --> 00:14:16,919 the right bottom corner and you have let's say fifty 213 00:14:16,960 --> 00:14:22,039 of them. You want to click fifty times to go 214 00:14:22,159 --> 00:14:23,320 through all the cards. 215 00:14:23,639 --> 00:14:24,480 Speaker 2: What you should do. 216 00:14:24,559 --> 00:14:29,240 Speaker 4: You should do kind of greed that should be accessed 217 00:14:29,279 --> 00:14:31,759 to be at top, and then you will be able 218 00:14:31,799 --> 00:14:35,639 to use arrows to navigate through the grid like roll 219 00:14:35,759 --> 00:14:39,039 down column, right, left and things like that. It will 220 00:14:39,080 --> 00:14:42,759 speed up you a lot. Angler CITYK provides a lot 221 00:14:42,799 --> 00:14:47,360 of primitives for accessibility, and for this particular case they 222 00:14:47,399 --> 00:14:52,279 have Oh I forgot how this package called something like 223 00:14:52,679 --> 00:14:56,799 focus Manager as far as I remember, but basically what 224 00:14:56,879 --> 00:14:59,600 it does you can specify the parent element and the 225 00:14:59,759 --> 00:15:03,080 cha house and how to navigate through them with not 226 00:15:03,279 --> 00:15:05,120 just stubs but arrows as well. 227 00:15:05,919 --> 00:15:10,559 Speaker 2: Another common problem all we have this side. 228 00:15:10,360 --> 00:15:16,320 Speaker 4: Navigations that is killn by some Hamburger items, and sometimes 229 00:15:16,360 --> 00:15:20,519 the developers to forget to exclude this navigation from the 230 00:15:20,639 --> 00:15:23,159 navigation flow via capboard. 231 00:15:23,320 --> 00:15:23,960 Speaker 2: So you can. 232 00:15:23,879 --> 00:15:28,399 Speaker 4: Navigate to some items which are not visible and it's 233 00:15:28,440 --> 00:15:33,600 not right, or you can open some model dialogue or 234 00:15:33,720 --> 00:15:39,360 pop up and you should your navigation flow shouldn't go 235 00:15:39,519 --> 00:15:41,879 out from this model or pop up. 236 00:15:43,480 --> 00:15:45,679 Speaker 2: To the overlay elements as well. 237 00:15:45,799 --> 00:15:48,159 Speaker 4: And there are a lot of such conor cases that 238 00:15:49,360 --> 00:15:54,759 should be taken for attention. And what I'm trying to 239 00:15:54,799 --> 00:16:00,639 say as a summary, short summary that accessibility war lots 240 00:16:00,639 --> 00:16:03,519 of required for only disabled. 241 00:16:03,000 --> 00:16:05,600 Speaker 2: People, but for all of us, and it. 242 00:16:05,639 --> 00:16:11,639 Speaker 4: Will reprove improves the overall level of user experience of 243 00:16:11,720 --> 00:16:13,120 your application. 244 00:16:13,399 --> 00:16:16,720 Speaker 1: And I think it's always important to remember like that. 245 00:16:18,039 --> 00:16:20,759 It's it's hard to know who has accessibility needs and 246 00:16:20,799 --> 00:16:23,600 who doesn't. So I think it's a lot more common 247 00:16:23,639 --> 00:16:27,240 than you think. I was actually testing like many years 248 00:16:27,279 --> 00:16:29,240 ago before became a web dev. I signed up to 249 00:16:29,240 --> 00:16:31,879 go and help like kind of do the accessibility testing 250 00:16:31,879 --> 00:16:35,080 that your team does for a group of developers that 251 00:16:35,120 --> 00:16:39,080 I admired in Orlando, and one of the UI designers 252 00:16:39,440 --> 00:16:42,240 Dan Denny. He's like a really big designer and he's 253 00:16:42,240 --> 00:16:45,919 super awesome. He came over and he was like, he's like, 254 00:16:45,960 --> 00:16:47,919 what did what did you do to the page? And 255 00:16:47,960 --> 00:16:50,320 I was like what, I'm just looking, I'm reading through it, 256 00:16:50,360 --> 00:16:54,120 and he goes, yeah, but you broke my design. And 257 00:16:54,240 --> 00:16:56,759 I guess I had command plus to a certain point 258 00:16:56,759 --> 00:16:59,320 that like broke his layout and he didn't like plan 259 00:16:59,440 --> 00:17:01,240 for that or real and I was like, I was like, yeah, 260 00:17:01,240 --> 00:17:03,279 I really, I have really bad eyes. So any website 261 00:17:03,279 --> 00:17:04,799 I go to, this is the first thing that I do. 262 00:17:05,440 --> 00:17:08,279 And he was like making notes. He's like, good to know. 263 00:17:09,680 --> 00:17:14,519 So I think it's just you know, really, it's it's 264 00:17:14,519 --> 00:17:17,480 not always very accessive, like people who have accessility needs, 265 00:17:17,480 --> 00:17:20,720 but it's also hard to know like who in your 266 00:17:20,799 --> 00:17:23,200 users like might have them, so it's always super good 267 00:17:23,240 --> 00:17:24,400 to plan plan for that. 268 00:17:24,599 --> 00:17:26,880 Speaker 6: I thoughtways interesting what we were talking about the tabbing 269 00:17:27,160 --> 00:17:29,599 tabbing order as well. I was working on an app 270 00:17:29,799 --> 00:17:34,920 in my last job where I'm like, what it did 271 00:17:35,000 --> 00:17:37,240 is not important, but basically, like one of the other 272 00:17:37,279 --> 00:17:39,880 developers that I was working with just came up to 273 00:17:39,920 --> 00:17:41,559 my desk one day and is like, you've got to 274 00:17:41,599 --> 00:17:45,880 fix this this thing on a login screen or something 275 00:17:45,920 --> 00:17:47,839 like that, and like, what thing with the login screen? 276 00:17:47,839 --> 00:17:49,440 Speaker 3: It's like the buttons are in the wrong order, Like 277 00:17:49,480 --> 00:17:50,279 what are you talking about? 278 00:17:50,799 --> 00:17:52,920 Speaker 6: Pulled it up, but like just got this little login 279 00:17:53,000 --> 00:17:56,559 model and like this is all absolutely fine, and he goes, yeah, 280 00:17:56,559 --> 00:17:58,640 but it's all right because you're using your mouth. But 281 00:17:58,720 --> 00:18:00,880 I always just tabbed through all of the forms all 282 00:18:00,880 --> 00:18:02,720 the time. And I I tabed through all of the 283 00:18:03,200 --> 00:18:05,279 inputs and then I pressed tab and then the next 284 00:18:05,279 --> 00:18:07,000 thing that happens is it tabs to the cancel button 285 00:18:07,079 --> 00:18:09,960 and I enter and it closes my modor and cancels 286 00:18:09,960 --> 00:18:10,240 it out. 287 00:18:10,440 --> 00:18:11,119 Speaker 3: It says, it. 288 00:18:11,119 --> 00:18:14,519 Speaker 6: Happens to me several times a day, and it's really annoying. Me, 289 00:18:14,920 --> 00:18:17,200 and it hadn't even occurred to me, and I can't 290 00:18:17,240 --> 00:18:19,079 remember what was causing it. Actually, it was something to 291 00:18:19,119 --> 00:18:21,119 do with something that was up with the tab order. 292 00:18:21,119 --> 00:18:23,400 I mean in the end, I actually I think I 293 00:18:23,400 --> 00:18:25,960 I rearranged the buttons in the HM out and then 294 00:18:26,160 --> 00:18:27,559 and then put them in a flex box so they 295 00:18:27,559 --> 00:18:29,559 were reversed so it didn't actually on the front and 296 00:18:29,799 --> 00:18:31,200 it looked exactly the same. 297 00:18:31,480 --> 00:18:32,920 Speaker 3: But his tab order was restored. 298 00:18:32,960 --> 00:18:36,279 Speaker 5: But I got I've done that exact thing with flex Yeah. 299 00:18:36,039 --> 00:18:40,200 Speaker 4: Yeah, absolutely, But yeah, this even easier to do the 300 00:18:40,279 --> 00:18:47,839 reorder stuff, is it? Because I'm like, really, you can 301 00:18:48,079 --> 00:18:54,119 just specify the call let's say, sell names. You can 302 00:18:54,559 --> 00:18:58,440 assign them names and assign some elements to the cells 303 00:18:58,680 --> 00:19:03,480 or group of cells. So it's really powerful easier to 304 00:19:03,559 --> 00:19:05,400 reorder stuff I need. 305 00:19:05,720 --> 00:19:10,359 Speaker 1: I need to get comfier with the great So I 306 00:19:10,400 --> 00:19:13,799 was looking it up and actually the CDK package that 307 00:19:13,839 --> 00:19:16,920 you were talking about, I found like a listy manager one. 308 00:19:17,559 --> 00:19:19,359 But I'm just going to link to it in the 309 00:19:19,440 --> 00:19:22,440 show notes in case you're curious about pulling in the 310 00:19:22,480 --> 00:19:25,440 CDK for your Angular application to get those. 311 00:19:25,599 --> 00:19:30,920 Speaker 4: So yeah, and in general, all of silica components are 312 00:19:30,960 --> 00:19:34,680 pretty accessible. I believe they also passed on a special 313 00:19:34,720 --> 00:19:36,400 review for accessibility. 314 00:19:37,160 --> 00:19:39,839 Speaker 1: Sorry I have I didn't mute myself, and I have 315 00:19:40,920 --> 00:19:46,000 hummus set as my Slack message notification noise. So you 316 00:19:46,119 --> 00:19:50,319 randomly hear a lady yelling hummus in my office, it's slack. 317 00:19:53,759 --> 00:19:55,680 Speaker 3: Do you want to deep dive on that tool? Give 318 00:19:55,720 --> 00:19:56,640 us a little bit more end fun. 319 00:19:57,920 --> 00:19:59,960 Speaker 1: Oh, me and my husband work in the same office 320 00:20:00,079 --> 00:20:02,519 and our notifications they were driving is crazy because they 321 00:20:02,519 --> 00:20:05,920 sound the same, so we never knew. And also we 322 00:20:05,960 --> 00:20:09,319 each have like six or seven different Slack channels, so 323 00:20:09,720 --> 00:20:12,559 you know, hummus I thought was a really original sound 324 00:20:12,960 --> 00:20:14,000 like for my work. 325 00:20:14,319 --> 00:20:17,759 Speaker 5: So I know, and I hear hummus being yelled at me. 326 00:20:17,880 --> 00:20:26,160 It's important. Yeah, that checks out. Okay, totally derailed us. 327 00:20:26,200 --> 00:20:28,480 Back to accessibility. 328 00:20:28,839 --> 00:20:31,559 Speaker 2: Verifications also need to be accessible is. 329 00:20:31,559 --> 00:20:36,440 Speaker 4: There are a lot of aspects of these things. For example, 330 00:20:36,480 --> 00:20:41,599 we have special media queries like reduce reduce motion motion 331 00:20:42,119 --> 00:20:43,640 prefer to reduced motion. 332 00:20:43,839 --> 00:20:46,000 Speaker 2: Yeah, for people. 333 00:20:45,799 --> 00:20:51,440 Speaker 4: Who can't normally work with things that's moving around a 334 00:20:51,480 --> 00:20:52,599 lot and things like that. 335 00:20:53,319 --> 00:20:55,400 Speaker 2: So using this mediac query, you. 336 00:20:55,400 --> 00:21:02,880 Speaker 4: Can remove all moving animations from your application, like sliding 337 00:21:02,960 --> 00:21:08,519 dialogs or like that, so it basically should should not be. 338 00:21:08,480 --> 00:21:10,680 Speaker 2: Animated for those kind of people. 339 00:21:12,000 --> 00:21:15,759 Speaker 6: And yeah, sorry, how do you know? How do you 340 00:21:15,759 --> 00:21:18,519 know when to tell it when not to animate? Would 341 00:21:18,519 --> 00:21:20,559 people have like a browser setting or something. 342 00:21:21,519 --> 00:21:24,839 Speaker 4: They have special preference in browser? But I'm not sure 343 00:21:24,920 --> 00:21:29,440 if it gets some settings from the system level like 344 00:21:29,559 --> 00:21:30,359 dark mode. 345 00:21:31,200 --> 00:21:34,240 Speaker 2: Okay, but maybe I'm not sure. 346 00:21:34,599 --> 00:21:36,799 Speaker 6: I guess maybe if somebody is using a screen reader, 347 00:21:37,160 --> 00:21:39,160 it stands to reason that maybe they might not be 348 00:21:39,240 --> 00:21:42,039 interested in your heavy use of like the blink tag 349 00:21:42,160 --> 00:21:42,880 or something like that. 350 00:21:43,680 --> 00:21:45,119 Speaker 2: Yeah, that's true. 351 00:21:45,759 --> 00:21:49,200 Speaker 4: Another aspects is colors as well, the outs and stuff 352 00:21:49,279 --> 00:21:55,119 that some people have disabilities related to colors, color blinds 353 00:21:55,279 --> 00:21:58,759 or things like that. Rare a bunch of extensions to 354 00:21:59,000 --> 00:22:06,960 test your views with such issues. It applies screen filters 355 00:22:07,440 --> 00:22:13,640 to simulate such disabilities, so we can try how it 356 00:22:13,680 --> 00:22:17,440 looks like for different people with different kinds of feelness 357 00:22:17,640 --> 00:22:22,519 of eyes, things like that. It's also important again it's 358 00:22:22,559 --> 00:22:26,079 not only for people with any disabilities. It's for daily 359 00:22:26,200 --> 00:22:30,240 usage because if your text is not contrast enough, people 360 00:22:30,880 --> 00:22:34,079 will not be able to read it on some outdoors 361 00:22:34,119 --> 00:22:40,400 for example. Or good usage of dark mode as well, 362 00:22:40,440 --> 00:22:44,039 because at night where when people might use in your 363 00:22:44,039 --> 00:22:49,279 application in dark place without any additional lightning, it will 364 00:22:49,279 --> 00:22:54,200 be annoying to use it in completely white mode when 365 00:22:54,240 --> 00:22:57,960 you have a white background and there are a black 366 00:22:58,000 --> 00:23:01,119 text on it and you will be blinded with the 367 00:23:01,160 --> 00:23:05,440 shine of your screen. And you can actually use some 368 00:23:06,400 --> 00:23:11,279 happy Some of them are experimental, like accessing the lightning 369 00:23:11,359 --> 00:23:18,279 sensors of device. It's available via Generic Sensors API, and 370 00:23:18,480 --> 00:23:23,720 you can listen to light sensor of device if it's available, 371 00:23:23,759 --> 00:23:27,680 and user allows you to read the values and you 372 00:23:27,720 --> 00:23:34,720 can adjust the seam of your application regarding the surrounding light. 373 00:23:35,240 --> 00:23:36,920 Speaker 5: That's cool. That's really neat. 374 00:23:37,400 --> 00:23:38,240 Speaker 2: Same comes out. 375 00:23:38,519 --> 00:23:44,240 Speaker 4: It's not really accessibility, but it's like battery levels, and 376 00:23:45,519 --> 00:23:50,480 for example you might consider to reduce the amount of 377 00:23:50,920 --> 00:23:55,559 animations when your user has a low battery. There is 378 00:23:55,640 --> 00:24:00,559 also available values of battery levels through the sensors a PI, 379 00:24:01,920 --> 00:24:03,000 so you can. 380 00:24:04,759 --> 00:24:07,319 Speaker 2: Give user more power. 381 00:24:08,559 --> 00:24:13,640 Speaker 4: Before the device will will they die without battery. 382 00:24:14,519 --> 00:24:15,119 Speaker 5: Just an idea. 383 00:24:15,640 --> 00:24:17,200 Speaker 1: You see that their battery is dying and you just 384 00:24:17,400 --> 00:24:18,880 really ramp up the animations. 385 00:24:22,799 --> 00:24:23,759 Speaker 2: Last coal animation. 386 00:24:25,599 --> 00:24:28,640 Speaker 6: I think you must be the most considerate developer I've 387 00:24:28,759 --> 00:24:33,039 ever met, actually taking time to think you're you're the 388 00:24:33,319 --> 00:24:37,440 polar opposite of what I just described that actually thinking 389 00:24:37,480 --> 00:24:40,039 people are batteries running out. Let me just let me 390 00:24:40,119 --> 00:24:43,200 just help you. Yeah, you should just like alert plug 391 00:24:43,240 --> 00:24:44,680 your baptop in. That's how I do. 392 00:24:45,559 --> 00:24:50,720 Speaker 4: And as I think, you can the user agent headers 393 00:24:51,359 --> 00:24:55,880 that asks for less data data users, so you can 394 00:24:55,960 --> 00:25:01,720 reduce the requests. For example, if user has the browsers 395 00:25:01,720 --> 00:25:06,839 that request less data, you can for example disable some advertisements. 396 00:25:07,200 --> 00:25:11,160 Nobody will do this, but yeah, you can to save 397 00:25:11,400 --> 00:25:15,960 the data for the user because in some countries data 398 00:25:16,880 --> 00:25:22,720 mobile internet data I mean still very very expensive, like 399 00:25:23,559 --> 00:25:27,599 you bugs kill abide or something like this, or when 400 00:25:27,640 --> 00:25:32,279 you are some outside of your country and you're using 401 00:25:32,440 --> 00:25:38,240 roaming and roving always very expensive as well. So you 402 00:25:38,279 --> 00:25:42,519 want just to check some let's say weather or something, 403 00:25:43,119 --> 00:25:47,559 and you might pay a lot of money for getting 404 00:25:48,119 --> 00:25:51,160 twenty kilobase of some data. 405 00:25:51,400 --> 00:25:52,039 Speaker 2: Things like that. 406 00:25:52,319 --> 00:25:54,799 Speaker 1: This just reminds me of that's like really funny side 407 00:25:54,839 --> 00:26:00,279 story promise last tangent of me and shy Resnik hang 408 00:26:00,319 --> 00:26:03,519 on Poland one time and I had data and he didn't, 409 00:26:03,640 --> 00:26:06,000 so he was tethering off my phone. But I have 410 00:26:06,200 --> 00:26:08,319 supremely like if you've ever hung out with me in person, 411 00:26:08,359 --> 00:26:12,279 you know, severe, like the most severe ADHD. And we're 412 00:26:12,319 --> 00:26:14,640 just like walking around this market in Poland and he 413 00:26:14,720 --> 00:26:17,279 keeps losing me and then losing his phone connection, so 414 00:26:17,319 --> 00:26:18,160 he's like chasing me. 415 00:26:18,240 --> 00:26:20,440 Speaker 5: He's like, wait, listen, I can't find you, and. 416 00:26:20,400 --> 00:26:23,319 Speaker 1: I'm like, but look this thing like it was really 417 00:26:23,559 --> 00:26:25,559 it was really amusing for me at least, poor Schy. 418 00:26:25,759 --> 00:26:26,400 Speaker 5: But that. 419 00:26:28,319 --> 00:26:31,880 Speaker 1: Then then a random dude who only spoke Polish came 420 00:26:31,920 --> 00:26:34,799 over and started singing, and Shy and him like linked arms, 421 00:26:34,839 --> 00:26:37,160 did not know him, and they started singing together. So 422 00:26:37,480 --> 00:26:39,559 if you know a shy resnic from the either community, 423 00:26:39,680 --> 00:26:43,319 that should give you Yeah, but no. 424 00:26:43,480 --> 00:26:44,440 Speaker 5: You're definitely right. 425 00:26:44,480 --> 00:26:47,440 Speaker 1: There's especially for people who travel a ton for work, 426 00:26:47,559 --> 00:26:50,440 there's a lot of times when you're just like, either 427 00:26:51,079 --> 00:26:53,319 you're worried about data or the coverage is not great, 428 00:26:53,359 --> 00:26:55,400 so you're taking about ten minutes to load a site. 429 00:26:55,480 --> 00:27:03,000 Speaker 4: So yeah, and I just I'm during commute, for example, 430 00:27:03,279 --> 00:27:08,119 when you moving in underground or somewhere in public transport 431 00:27:08,200 --> 00:27:13,880 and you're using your device with one hand, so you 432 00:27:13,920 --> 00:27:20,240 should consider about replacement of important buttons about data saving 433 00:27:20,319 --> 00:27:23,400 as well. For example, when you're moving in underground. It's 434 00:27:23,440 --> 00:27:29,799 cool when you have a web service worker to get 435 00:27:29,880 --> 00:27:34,920 the data beforehand cash sheets, so when the data internet 436 00:27:34,920 --> 00:27:41,880 connection lasting tube underground tube, you won't lose the content 437 00:27:42,000 --> 00:27:46,039 and things like that. There's so many points you can 438 00:27:46,119 --> 00:27:47,039 consider about. 439 00:27:47,920 --> 00:27:51,880 Speaker 1: Yeah, So do you have, like for your own personal 440 00:27:52,000 --> 00:27:56,279 use a like a document or something that you keep 441 00:27:56,640 --> 00:27:59,440 all these things to like double check yourself whenever you're 442 00:27:59,480 --> 00:28:01,279 creating a component, and. 443 00:28:03,440 --> 00:28:07,359 Speaker 4: To be honest now not now, but yeah, time to time. 444 00:28:07,400 --> 00:28:11,240 I just mordin some ideas that they have for the future, 445 00:28:12,440 --> 00:28:13,200 to check it out. 446 00:28:13,519 --> 00:28:17,920 Speaker 6: Do you have any priority of what is important? So 447 00:28:18,000 --> 00:28:21,799 imagine that I have an existing application, which I'm sure 448 00:28:21,880 --> 00:28:24,480 many of us do, and that I have put absolutely 449 00:28:24,480 --> 00:28:29,079 no consideration into the accessibility as I'm sure there's plenty 450 00:28:29,119 --> 00:28:29,680 of people who do. 451 00:28:29,960 --> 00:28:30,119 Speaker 2: Right. 452 00:28:30,400 --> 00:28:33,880 Speaker 6: We've already said that getting your HTML semantic is important 453 00:28:33,880 --> 00:28:36,319 and I'm I'm a big believer of that as well. 454 00:28:36,319 --> 00:28:38,920 People who just everything's a div and I just style 455 00:28:38,960 --> 00:28:42,000 it differently, You know that that is annoying. So that's 456 00:28:42,079 --> 00:28:46,359 number one, or maybe maybe what other things are like 457 00:28:46,839 --> 00:28:50,160 the first things I should do to try and beef 458 00:28:50,240 --> 00:28:52,400 up my my accessibility. 459 00:28:52,920 --> 00:28:59,200 Speaker 4: So yeah, first one should be semantics. Then you should 460 00:28:59,279 --> 00:29:04,599 consider about color contrast of the content. Then I would 461 00:29:04,599 --> 00:29:09,039 say it's navigation flow. And then you should move to 462 00:29:09,400 --> 00:29:14,599 describing some elements which are not content that is not 463 00:29:14,720 --> 00:29:23,240 a text, like charts, images, icons, something like this. Then 464 00:29:23,319 --> 00:29:29,680 you should work on your rich fidgets like drop downs 465 00:29:29,720 --> 00:29:33,599 and things like that, model dialogues because usually in these 466 00:29:34,880 --> 00:29:42,480 components we have some let's say site site functionality not 467 00:29:42,599 --> 00:29:47,160 that important hidden and pop ups and models. And basically 468 00:29:47,359 --> 00:29:52,440 just try to use your application with keyboard for example, 469 00:29:53,160 --> 00:29:56,720 or with any screen reader available on your system. 470 00:29:57,079 --> 00:29:57,960 Speaker 2: Just go through it. 471 00:29:58,279 --> 00:30:04,279 Speaker 4: Try to follow some common user paths. Let's say like 472 00:30:04,400 --> 00:30:09,400 if you have some e commerce application, try to just 473 00:30:09,559 --> 00:30:14,240 go through the list of products, add something to the card, 474 00:30:14,319 --> 00:30:15,559 and go to the checkout. 475 00:30:16,359 --> 00:30:19,400 Speaker 2: How it looks like, does it work at all? 476 00:30:20,519 --> 00:30:24,039 Speaker 1: Yeah, Chrome boxes might go to for testing things with 477 00:30:24,160 --> 00:30:27,519 screen readers, So if you've never opened up your application 478 00:30:27,559 --> 00:30:30,519 with a screen reader, definitely highly recommend it. Even if 479 00:30:30,519 --> 00:30:32,079 it's like you said, just to go through the common 480 00:30:32,119 --> 00:30:33,799 path of like logging in or something. 481 00:30:34,400 --> 00:30:39,640 Speaker 4: And all these applications are built in any system like 482 00:30:39,839 --> 00:30:46,400 on androids, re Stackbeck always in systems on Marcus voice 483 00:30:46,519 --> 00:30:51,680 or on Windows they should forget how they call the 484 00:30:51,880 --> 00:30:57,200 system one. So it's available everywhere, so you just need 485 00:30:57,240 --> 00:30:59,680 to read how to turn it on and that's it. 486 00:31:00,480 --> 00:31:05,440 And yeah, back to this, I believe there is no 487 00:31:06,519 --> 00:31:13,880 ideal applic tool or application to test automate accessibility testing 488 00:31:14,759 --> 00:31:19,240 like one hundred percent, so time to time you really 489 00:31:19,279 --> 00:31:23,319 need to just go through the application and try it out. 490 00:31:24,079 --> 00:31:27,640 You can start with using tools like Lighthouse, which is 491 00:31:28,000 --> 00:31:32,119 a pretty basic one. There was even a past how 492 00:31:32,160 --> 00:31:38,960 to achieve one hundred accessibility in Lighthouse, but for completely 493 00:31:39,160 --> 00:31:47,240 unaccessible application, very basic rules. And for our projects we 494 00:31:47,279 --> 00:31:53,279 are using called x I X because it was already 495 00:31:53,279 --> 00:31:56,359 built in in our like CI flow and things like that. 496 00:31:56,640 --> 00:31:58,799 And it's really cool because it checks a lot of 497 00:31:59,200 --> 00:32:07,240 rules from particular standards like what beg accessibility rules and 498 00:32:08,400 --> 00:32:12,240 all of them. Like it can check some particular rules 499 00:32:12,319 --> 00:32:18,559 for just elements, and it can check the rules for 500 00:32:18,799 --> 00:32:22,759 document level like do you have a title and such 501 00:32:22,799 --> 00:32:26,160 basic things. It also can check if you run it 502 00:32:26,319 --> 00:32:30,160 in havelets browser in real browser you can check for 503 00:32:30,480 --> 00:32:36,000 color contrast and such kinds of issues and which what 504 00:32:36,160 --> 00:32:40,319 is cool about it that you can for example disable 505 00:32:40,480 --> 00:32:44,000 some rules until you're working on it. For example, you're 506 00:32:44,039 --> 00:32:48,480 working on semantics first, so you can turn off all 507 00:32:49,400 --> 00:32:53,960 errors regarding other areas like color contrast. 508 00:32:54,160 --> 00:32:54,759 Speaker 2: Let's say. 509 00:32:55,599 --> 00:32:58,480 Speaker 4: Then when you get into the point when you are 510 00:32:58,519 --> 00:33:01,440 ready to work on color trust, you just enable it 511 00:33:01,720 --> 00:33:06,000 to work on that. But still it can't catch everything 512 00:33:06,160 --> 00:33:10,359 because it doesn't have any idea regarding how to use 513 00:33:10,480 --> 00:33:15,119 your your elements, your components, how to use your application. 514 00:33:15,400 --> 00:33:18,799 It just checks if, for example, you specify that some 515 00:33:19,440 --> 00:33:22,160 components should be a pop up, it has pop up, 516 00:33:22,400 --> 00:33:26,440 that it has all additional properties that should describe a 517 00:33:26,519 --> 00:33:28,839 pop up and things like that. 518 00:33:29,640 --> 00:33:32,240 Speaker 1: Well, it's still really even though it doesn't check for everything. 519 00:33:32,799 --> 00:33:35,480 If you can't afford, you know, a whole team to 520 00:33:35,839 --> 00:33:38,480 go through and run tests, at least better to have 521 00:33:38,559 --> 00:33:40,319 that a part of your bill process than nothing. 522 00:33:40,480 --> 00:33:45,559 Speaker 4: So also it will help to maintain the level of accessibility. 523 00:33:45,759 --> 00:33:49,599 So you're working on new features, you just add one 524 00:33:50,960 --> 00:33:54,839 one additional test to your unit tests or to end 525 00:33:54,839 --> 00:33:58,440 test with running this tool, and you get the idea 526 00:33:58,480 --> 00:34:02,680 of what issues might be hidden in these new components. 527 00:34:03,079 --> 00:34:06,359 So it's pretty cool and dry. A lot of alternative 528 00:34:06,440 --> 00:34:12,880 to this tool, and a X has also a chrome extension. 529 00:34:14,119 --> 00:34:20,599 There was also some cool the online tool made by Microsoft. 530 00:34:20,639 --> 00:34:25,000 As far as I remember, when you just give it 531 00:34:25,280 --> 00:34:29,800 a link to your application, Anti checks for accessibility issues 532 00:34:29,840 --> 00:34:30,280 on it. 533 00:34:30,800 --> 00:34:32,880 Speaker 1: So the Chrome extension, how did that work? It's like 534 00:34:33,039 --> 00:34:35,920 running while your app is like while you're on the 535 00:34:35,920 --> 00:34:38,800 page and it's just yelling at you about different things 536 00:34:38,920 --> 00:34:39,480 or what is that? 537 00:34:40,320 --> 00:34:41,400 Speaker 5: What would that look like? 538 00:34:42,719 --> 00:34:46,159 Speaker 4: Yeah, it could be runt like in background, or it 539 00:34:46,199 --> 00:34:48,039 can be run like Lighthouse. 540 00:34:48,400 --> 00:34:52,440 Speaker 2: Just run through it and try and figure out what 541 00:34:52,639 --> 00:34:59,519 might these issues? Same for this color blind extension I 542 00:34:59,639 --> 00:35:03,360 used for Chrome, but I believe there was similar or 543 00:35:03,800 --> 00:35:08,199 the same extension for other browsers as well. And yeah, 544 00:35:08,719 --> 00:35:14,199 browsers also getting better in debugging accessibility. In the futures, 545 00:35:14,280 --> 00:35:17,000 they will allow you to see what's. 546 00:35:16,840 --> 00:35:21,800 Speaker 4: Going on on accessibility three because behind the scenes, browsers 547 00:35:21,920 --> 00:35:27,519 also building another tree of objects really related to accessibility. 548 00:35:28,039 --> 00:35:32,679 Sometimes browsers have issues internal issues as well, like rock 549 00:35:32,760 --> 00:35:35,480 semantics for basic elements. 550 00:35:34,960 --> 00:35:39,400 Speaker 2: But they improve in it and fixed those bogs. 551 00:35:40,679 --> 00:35:43,559 Speaker 6: Is accessibility part of the Lighthouse score? Did I completely 552 00:35:43,639 --> 00:35:48,960 made up? What lighthouse? Which is the chrime? Is accessibility 553 00:35:49,000 --> 00:35:50,480 in there? Did I just imagine it? 554 00:35:50,559 --> 00:35:50,719 Speaker 1: Yeah? 555 00:35:50,800 --> 00:35:52,239 Speaker 2: They have accessibility chase. 556 00:35:52,519 --> 00:35:54,159 Speaker 3: Yeah, so I mean I guess that'd be a good 557 00:35:54,159 --> 00:35:55,679 place to start as well. 558 00:35:58,400 --> 00:36:00,559 Speaker 1: For p w A's right, like excess ability is just 559 00:36:00,599 --> 00:36:02,599 like one of those things like marks that you want 560 00:36:02,639 --> 00:36:02,880 to hit. 561 00:36:03,400 --> 00:36:08,960 Speaker 4: Yeah, yeah, but it's pretty basic. Yeah, it doesn't have 562 00:36:09,039 --> 00:36:11,000 a lot of rules to check here. 563 00:36:11,719 --> 00:36:17,079 Speaker 7: Okay, So would you say X is more robust than Lighthouse. 564 00:36:17,800 --> 00:36:22,400 Speaker 4: Yes, they have like all the checks from main standards, 565 00:36:22,599 --> 00:36:24,559 accessibility standards. 566 00:36:24,000 --> 00:36:25,199 Speaker 2: From what do we ge? 567 00:36:26,000 --> 00:36:30,719 Speaker 7: Yeah, ACTS looks really cool because we yeah, we use 568 00:36:30,840 --> 00:36:33,880 Cypress as our end to end and they have a 569 00:36:33,920 --> 00:36:36,840 plug in between ACTS and Cypress, so it can like 570 00:36:36,960 --> 00:36:37,960 run with our end end tests. 571 00:36:38,039 --> 00:36:40,199 Speaker 4: Yeah, and it's cool to run it on end to 572 00:36:40,320 --> 00:36:44,679 end test because you can check page level rules like 573 00:36:44,800 --> 00:36:46,079 titles and things like that. 574 00:36:46,239 --> 00:36:46,440 Speaker 2: Yeah. 575 00:36:46,480 --> 00:36:50,360 Speaker 4: But in my particular carri Is, I'm using them on 576 00:36:50,480 --> 00:36:54,320 both end to end and on unit testing, on un 577 00:36:54,480 --> 00:36:58,639 testing and checking keyboard navigations and things like that on 578 00:36:58,679 --> 00:36:59,280 that level. 579 00:36:59,719 --> 00:37:09,840 Speaker 5: So have you all heard of dark patterns before darks? 580 00:37:06,320 --> 00:37:12,559 Speaker 1: Well, well, it's kind of it's kind I did a 581 00:37:12,599 --> 00:37:15,719 talk I think flash Share on it, and it's I 582 00:37:15,719 --> 00:37:18,840 think in like the Harry Bricknell like form like coined 583 00:37:18,880 --> 00:37:22,039 the name dark pattern in like twenty eleven or something. 584 00:37:22,079 --> 00:37:26,920 But it's essentially using the knowledge of UX against users. 585 00:37:27,119 --> 00:37:29,719 So a good example, we're talking about contrast over and 586 00:37:29,760 --> 00:37:32,599 over again, right about how important contrasting colors can be. 587 00:37:32,920 --> 00:37:35,840 And you know, you know how it's a requirement to 588 00:37:36,079 --> 00:37:38,400 have a way for a user to unsubscribe from an 589 00:37:38,400 --> 00:37:42,800 email chain. Well, this company that I found, they had 590 00:37:43,280 --> 00:37:45,840 they had a way to unsubscribe from their email and 591 00:37:45,880 --> 00:37:48,519 it was at the very bottom of their email, white 592 00:37:48,519 --> 00:37:53,280 text on the white background. And so so that is 593 00:37:53,320 --> 00:37:56,000 like a very clear like dark pattern that you're using 594 00:37:56,199 --> 00:37:57,679 against everyone. 595 00:37:57,920 --> 00:38:03,719 Speaker 4: So using such things a lot, like you have to 596 00:38:03,880 --> 00:38:08,559 pop up with video running out and the closed button 597 00:38:08,679 --> 00:38:12,400 is so small or hidden somewhere. Yeah, it exists, but 598 00:38:13,280 --> 00:38:16,800 especially it's an on mobile devices when you don't have 599 00:38:17,280 --> 00:38:21,239 that much screen size to use for content. 600 00:38:21,239 --> 00:38:24,559 Speaker 1: And the ex is like small, smaller than your pinky finger, 601 00:38:24,599 --> 00:38:27,719 and you're like, yeah. 602 00:38:27,719 --> 00:38:29,960 Speaker 2: It's another issue. 603 00:38:30,000 --> 00:38:34,400 Speaker 4: And accessibility basically issue when links are so small, and 604 00:38:34,800 --> 00:38:39,519 I'm personally getting these issues a lot, like clicking on 605 00:38:39,679 --> 00:38:43,760 wrong button because they are too small, or these jumping 606 00:38:43,880 --> 00:38:47,760 layouts when you load in some content you want to 607 00:38:47,800 --> 00:38:51,519 click some button, but actually click some advertisements. 608 00:38:51,639 --> 00:38:57,400 Speaker 2: So here you go, three your tops and these things 609 00:38:57,480 --> 00:38:58,239 you don't need. 610 00:38:58,719 --> 00:39:01,239 Speaker 1: Oh my goodness. So I'm trying to go over our 611 00:39:01,360 --> 00:39:07,119 lesson see if we've Is there any other accessibility pointers. 612 00:39:07,239 --> 00:39:10,559 I know that you did a talk and no apologies 613 00:39:10,559 --> 00:39:13,440 making app successful at nd D as. 614 00:39:13,360 --> 00:39:16,960 Speaker 2: You right, Yeah, not only at the conference. 615 00:39:17,280 --> 00:39:21,599 Speaker 4: I believe I did this talk two or three times. Yeah, 616 00:39:22,559 --> 00:39:31,079 but basically I covered pretty same points in very fast minor. 617 00:39:31,119 --> 00:39:36,920 Speaker 1: Because with no visuals, right like, that's always challenging. 618 00:39:38,440 --> 00:39:42,920 Speaker 4: Yeah, I believe, yes, And there are so many resources 619 00:39:43,000 --> 00:39:50,719 on deft your medium to go through accessibility tweeter just 620 00:39:50,880 --> 00:39:57,199 follow some people like Manuel, like Cergey Krigger. Even more, 621 00:39:57,519 --> 00:40:03,039 there is some new topics Guardian CSS accessibility. 622 00:40:03,760 --> 00:40:04,599 Speaker 2: For example, you. 623 00:40:04,559 --> 00:40:11,159 Speaker 4: Can get give an alternate text for content CSS content property, 624 00:40:11,920 --> 00:40:16,880 which is used usually for some additions. You can give 625 00:40:16,960 --> 00:40:19,960 alternate text for that as well. And I believe in 626 00:40:20,039 --> 00:40:25,559 the futures I build consider for more features related to accessibility, 627 00:40:26,079 --> 00:40:30,199 like those media quaries, prefers, reduced motion. 628 00:40:31,079 --> 00:40:32,880 Speaker 5: So yeah, we're reaching the top of hour where we 629 00:40:32,920 --> 00:40:33,559 do picks. 630 00:40:33,639 --> 00:40:36,800 Speaker 1: Do you have anything else on accessibility that you'd like 631 00:40:36,840 --> 00:40:39,400 to add before we get to that section no, I. 632 00:40:39,400 --> 00:40:43,079 Speaker 4: Believe I shared pretty much what I had in my 633 00:40:43,159 --> 00:40:45,199 mind for now. 634 00:40:46,519 --> 00:40:50,800 Speaker 1: Well, gentlemen, Addie and Chris picks anything interesting. 635 00:40:51,360 --> 00:40:55,039 Speaker 6: I could pick some things, always got, always got my picks. 636 00:40:55,360 --> 00:40:58,280 I can pick a figure games coming out in a 637 00:40:58,320 --> 00:41:03,119 couple of months. Back in I think maybe twenty twelve thereabouts, 638 00:41:03,280 --> 00:41:05,159 there was a game that I had on my Xbox 639 00:41:05,199 --> 00:41:11,519 three sixty called Kingdoms of Amla Reckoning, which is fantasy RPG, 640 00:41:12,079 --> 00:41:15,639 kind of my favorite style of game to play. I 641 00:41:15,679 --> 00:41:19,800 really loved it, like a quite a deep, rich fantasy world, 642 00:41:19,840 --> 00:41:23,079 et cetera, et cetera. It didn't really gain much traction sadly, 643 00:41:23,119 --> 00:41:26,360 and I think the company that made it went like 644 00:41:26,679 --> 00:41:31,360 horrifically financially under and took the whole property with them. 645 00:41:31,519 --> 00:41:34,639 But then recently it was the property was bought by 646 00:41:35,039 --> 00:41:39,679 THHQ Nordic, and then out of nowhere they announced that 647 00:41:39,719 --> 00:41:44,599 they're they're basically the remastering it for modern systems, and 648 00:41:44,639 --> 00:41:46,320 that's coming out in September. 649 00:41:46,800 --> 00:41:49,400 Speaker 1: My keyboard died, and so I can't google anything that 650 00:41:49,440 --> 00:41:50,280 you're talking about. 651 00:41:50,400 --> 00:41:51,559 Speaker 5: I need a link to quick. 652 00:41:51,519 --> 00:41:53,079 Speaker 6: I will put a linka I'll put a link in 653 00:41:53,079 --> 00:41:56,639 in notes. So the remaster's coming out I think September eighth. 654 00:41:56,679 --> 00:41:58,719 But I loved that game. It was it was as 655 00:41:58,760 --> 00:41:59,599 good I've pre ordered it. 656 00:41:59,599 --> 00:42:00,519 Speaker 3: I never order anything. 657 00:42:00,519 --> 00:42:02,679 Speaker 6: I pre ordered GTA five and I think I've pre 658 00:42:02,760 --> 00:42:05,320 ordered Mass Effect Andromeda until I render reviews and I 659 00:42:05,360 --> 00:42:06,239 canceled my pre order. 660 00:42:06,880 --> 00:42:08,400 Speaker 5: You had a fantasy rpg. 661 00:42:08,679 --> 00:42:13,960 Speaker 6: I was like, that's that's Kingdoms of Amla re reckoning 662 00:42:14,440 --> 00:42:17,280 and then I'm going to pick one more thing. So 663 00:42:17,360 --> 00:42:21,679 at the weekend, I went back to my hometown, the 664 00:42:21,800 --> 00:42:24,960 beautiful city of Oxford. Haven't been there for five months. 665 00:42:25,159 --> 00:42:28,880 Love it very very special place to me. I haven't 666 00:42:28,880 --> 00:42:31,360 actually lived there in the area for like twenty years, 667 00:42:31,360 --> 00:42:33,800 but whenever I go back, I enjoy it. But because 668 00:42:33,800 --> 00:42:35,840 I've been back for so long because of the pandemic, I took. 669 00:42:35,960 --> 00:42:38,679 I took just took some time wandering around and just 670 00:42:38,719 --> 00:42:40,880 looking at stuff because it's it's such a beautiful city. 671 00:42:41,719 --> 00:42:43,960 And oddly, when I was doing my explore, I found 672 00:42:43,960 --> 00:42:46,679 a GitHub office, which I was really surprised by because 673 00:42:46,679 --> 00:42:48,440 I had no idea they even had any presence in 674 00:42:48,440 --> 00:42:52,400 the UK, and in like a tiny back alley in Oxford. 675 00:42:52,760 --> 00:42:55,480 But anyway, this this is going somewhere there's because I 676 00:42:55,519 --> 00:42:58,400 love the city so much and I don't get back 677 00:42:58,480 --> 00:43:01,239 very often. There is a TV show that I love 678 00:43:01,280 --> 00:43:02,800 to watch which is set in Oxford. 679 00:43:03,679 --> 00:43:05,000 Speaker 3: It's like a murder mystery thing. 680 00:43:05,239 --> 00:43:07,800 Speaker 6: We have this set of murder mysteries set in Oxford 681 00:43:07,840 --> 00:43:10,719 from like the seventies and eighties called Inspector Morse. Hasn't 682 00:43:10,760 --> 00:43:14,960 aged particularly well, I will say, but recently there, or 683 00:43:15,280 --> 00:43:17,559 say recently in the last few years, they've they've made 684 00:43:17,559 --> 00:43:20,400 this new TV series based on this police detective in 685 00:43:20,440 --> 00:43:24,000 his in his formative years, and it's called Endeavor. And 686 00:43:24,000 --> 00:43:26,519 that's Endeavor with a U because we put us and 687 00:43:26,559 --> 00:43:28,280 everything in that in words that we spell. 688 00:43:28,599 --> 00:43:30,280 Speaker 3: And so if you like a murder mystery and. 689 00:43:30,199 --> 00:43:33,679 Speaker 6: You like things set in beautiful British cities where you 690 00:43:33,760 --> 00:43:36,079 have lots of people punching each other and then like 691 00:43:36,280 --> 00:43:39,920 drinking beer from big glass big glasses and things, I 692 00:43:40,000 --> 00:43:42,000 recommend that I'll put a link in that as well 693 00:43:42,119 --> 00:43:43,760 for that where you can find it on iTunes. 694 00:43:44,800 --> 00:43:45,480 Speaker 3: There's my picks. 695 00:43:45,800 --> 00:43:46,199 Speaker 5: Listen. 696 00:43:46,719 --> 00:43:51,320 Speaker 1: My first and most bright impression of my trip to 697 00:43:51,360 --> 00:43:54,719 the UK was this little pub where I got fish 698 00:43:54,960 --> 00:43:57,320 and the best wine that I've ever had. I was 699 00:43:57,360 --> 00:44:00,880 hanging out with Jen Looper and so now never you know, 700 00:44:00,880 --> 00:44:02,880 people are like, oh, on some wine. I'm like, it's 701 00:44:02,920 --> 00:44:04,440 just not going to like, it's not going to. 702 00:44:04,639 --> 00:44:06,960 Speaker 3: Be that so if you got any fish to go 703 00:44:07,000 --> 00:44:09,960 with it, but. 704 00:44:10,119 --> 00:44:14,320 Speaker 5: Seriously, great pics. So is it only on iTunes? Because 705 00:44:14,480 --> 00:44:15,360 you know, I just. 706 00:44:15,599 --> 00:44:18,199 Speaker 6: iTunes is my go to for like online content. I 707 00:44:18,199 --> 00:44:21,199 mean to be honest, we our streaming services in the UK. 708 00:44:21,360 --> 00:44:23,440 Even though we've got that Netflix and Amazon Prime stuff, 709 00:44:23,840 --> 00:44:25,800 all of the content is different, so I wouldn't have 710 00:44:25,840 --> 00:44:31,039 the faintest idea no access So anyway I'll spell it. 711 00:44:31,239 --> 00:44:34,119 I'll spell it because of our fanciful way of spelling 712 00:44:34,159 --> 00:44:35,559 things with yous just because. 713 00:44:35,760 --> 00:44:39,039 Speaker 5: Interested thank you awesome Eddie, what about you. 714 00:44:39,239 --> 00:44:43,639 Speaker 7: I'm gonna have my first pick actually be that accessibility 715 00:44:43,719 --> 00:44:46,360 because as we were talking about all this, I'm seeing 716 00:44:46,360 --> 00:44:48,159 here trying to figure out how in the world are 717 00:44:48,159 --> 00:44:51,559 we going to start figuring out accessibility at my job? 718 00:44:52,079 --> 00:44:54,840 And then I was like, wow, acces is like a 719 00:44:54,840 --> 00:44:58,000 good start towards figuring things out and then from there 720 00:44:58,119 --> 00:45:00,079 we can figure out how to do things, you know, 721 00:45:00,280 --> 00:45:02,559 actually running through it. But it's like for first past, 722 00:45:02,679 --> 00:45:04,920 like how are we doing. We'll probably get an F 723 00:45:05,119 --> 00:45:08,679 but you know, run acts, so I'm super excited about that. 724 00:45:08,880 --> 00:45:13,199 Besides that, I've been playing around with swift Jui, which 725 00:45:13,320 --> 00:45:17,960 is Apple's newest kind of UI paradigm, and I like 726 00:45:18,039 --> 00:45:22,280 it a lot because it's, you know, normally mobile development 727 00:45:22,480 --> 00:45:24,840 is a lot more difficult than web development, but with 728 00:45:24,920 --> 00:45:27,800 swift Jui, I feel like it makes mobile development like 729 00:45:27,960 --> 00:45:30,440 on par and in some ways easier. Because of course 730 00:45:30,400 --> 00:45:33,400 we'ven to talking about accessibility and swift Jui. 731 00:45:33,400 --> 00:45:35,480 Speaker 5: The thing I really like is it. 732 00:45:35,320 --> 00:45:38,639 Speaker 7: Bakes in a whole bunch of accessibility with it, like 733 00:45:38,719 --> 00:45:41,199 you say, hey, here's some labels, and the labels automatically 734 00:45:41,280 --> 00:45:43,320 grow and shrink because they can do that because it's 735 00:45:43,400 --> 00:45:46,000 you know, on one platform. But yeah, so I've been 736 00:45:46,039 --> 00:45:49,360 really enjoying that and all the benefits it brings, very 737 00:45:49,480 --> 00:45:50,320 very cool. 738 00:45:50,880 --> 00:45:55,039 Speaker 1: I'm gonna paste mine in the chat too. Mine is 739 00:45:55,079 --> 00:45:57,119 the same as it's been for a couple of weeks now. 740 00:45:57,360 --> 00:46:01,360 I do streams weekly on the coded live channel twitch 741 00:46:01,400 --> 00:46:05,519 so Twitch dot tv slash coded Live every Wednesday afternoon 742 00:46:05,960 --> 00:46:10,159 CDT time, so I'll be on talking about UI issues 743 00:46:10,199 --> 00:46:14,079 and tackling CSS challenges and goofing off, So join me 744 00:46:14,119 --> 00:46:16,519 there for some fun and then we also do like 745 00:46:16,760 --> 00:46:19,000 about I think every month we have these big, like 746 00:46:19,119 --> 00:46:22,320 eight hour streams where we're giving away things like switches 747 00:46:22,800 --> 00:46:27,639 and xboxes and Amazon gift cards. So definitely follow our 748 00:46:27,719 --> 00:46:31,280 channel and look for you know, fun hanging out times 749 00:46:31,280 --> 00:46:33,639 and price giveaway. What more can you want? Yeah, that's 750 00:46:33,760 --> 00:46:36,239 my that's my pick the telly, what about you? 751 00:46:37,079 --> 00:46:44,079 Speaker 4: Actually, regarding those small vigits, last time, I was online 752 00:46:44,280 --> 00:46:48,199 interview online on site interview for one big tech company 753 00:46:48,239 --> 00:46:50,920 and they asked me to build actually a small vigit 754 00:46:52,239 --> 00:46:56,320 like star rating, and I wanted to build it accessible, 755 00:46:56,360 --> 00:47:00,880 but my interviewer asked me actually to just write JavaScript 756 00:47:00,960 --> 00:47:02,760 for dissent spans. 757 00:47:03,320 --> 00:47:06,000 Speaker 2: I believe that's why give past that interview. 758 00:47:06,039 --> 00:47:11,800 Speaker 4: But yeah, come back to my pigs. And actually, as 759 00:47:11,840 --> 00:47:15,559 I said, I'm doing an app on my free time 760 00:47:16,039 --> 00:47:21,119 with guitar effects, and I would like to everyone who 761 00:47:21,440 --> 00:47:26,239 interested in music to follow the project on GitHub and 762 00:47:27,159 --> 00:47:33,679 contribute to it. For now, I have like a simulations 763 00:47:33,760 --> 00:47:40,000 for a few real amplifiers models and a bunch of effects, 764 00:47:41,159 --> 00:47:44,480 something like fifteen of them. For right now, I'm trying 765 00:47:44,480 --> 00:47:51,119 to replicate real ones because I'm actually have some effects 766 00:47:51,159 --> 00:47:55,280 sometimes building the clones on my own in an other way, 767 00:47:55,400 --> 00:48:00,800 and I'm trying to replicate. So I'm reading how the 768 00:48:01,840 --> 00:48:08,079 I don't know how it called in English, actually amplitude, frequency, 769 00:48:08,199 --> 00:48:15,639 characteristics of these effects. I'm trying to replicate those in 770 00:48:16,159 --> 00:48:20,760 digital way and playing around that. And I'm really excited 771 00:48:20,760 --> 00:48:26,119 to get regarding the audio work clots that came in 772 00:48:26,400 --> 00:48:31,440 Chrome and Firefox right now, so it's supported by majority 773 00:48:31,519 --> 00:48:36,760 of browsers and you allowed to use an actual separate 774 00:48:36,920 --> 00:48:44,440 threat for audio processing like it's done in classic applications, 775 00:48:44,519 --> 00:48:48,760 desktop applications Returnancy and C plus plus, and with a 776 00:48:48,920 --> 00:48:52,400 web assembly you can actually port some C plus plus 777 00:48:53,360 --> 00:48:59,239 plugins from those desktop applications to webb and yeah, it's 778 00:48:59,280 --> 00:49:03,239 kind of cool YouTube when we will see more and 779 00:49:03,360 --> 00:49:10,239 more professional applications like audio editors of level of que 780 00:49:10,400 --> 00:49:13,079 base and things like that in web. 781 00:49:13,760 --> 00:49:16,559 Speaker 1: Very very cool. Sorry, I'm trying to figure out this 782 00:49:16,639 --> 00:49:23,360 keyboard issue. No no link for you, this is but yeah, 783 00:49:23,400 --> 00:49:25,960 but Tali, thank you so much for coming on today. 784 00:49:26,639 --> 00:49:29,920 Speaker 5: Is there for me? It's Twitter. That's where I prefer 785 00:49:30,079 --> 00:49:30,960 to be hit. 786 00:49:30,840 --> 00:49:35,360 Speaker 1: Up and talk to you about anything web or life related. 787 00:49:35,440 --> 00:49:38,239 Is there one place that you prefer just if you 788 00:49:38,320 --> 00:49:39,679 want to contact. 789 00:49:39,280 --> 00:49:44,079 Speaker 2: You or reach out Twitter as well Twitter that we'll have. 790 00:49:44,039 --> 00:49:44,840 Speaker 5: That in the chat. 791 00:49:46,760 --> 00:49:51,039 Speaker 1: Well, thank you so much for perfect Yes. Yeah, Barbara 792 00:49:51,400 --> 00:49:52,280 nineteen eighty nine. 793 00:49:52,559 --> 00:49:55,119 Speaker 5: Very cool. Well, thank you so much for the awesome 794 00:49:55,159 --> 00:49:58,800 show today. Yeah, I think that is all for me. 795 00:50:00,159 --> 00:50:04,400 Speaker 2: Really cool time for chatting. Yeah, thank you