1 00:00:00,000 --> 00:00:10,720 Well, hello State of the Browser folks, or as my phone mail app had it, State of the 2 00:00:10,720 --> 00:00:16,760 Bro. That's what it showed when my speaker announcement went out and I have to say, 3 00:00:16,760 --> 00:00:23,080 a bit judgy Dave. I know, I'm old and fat but I have feelings! 4 00:00:23,080 --> 00:00:28,200 So yeah, thank you. Well, normally the thank yous come at the end but I wanted to start 5 00:00:28,200 --> 00:00:33,840 by saying thanks to Dave LeTorey for accepting my proposal to speak here. 6 00:00:33,840 --> 00:00:38,480 I've not spoken at web events for almost 20 years and only recently broke that drought 7 00:00:38,480 --> 00:00:42,280 at CSUN ATC in March this year. 8 00:00:42,280 --> 00:00:47,820 For those who do not know, CSUN is the California State University Northridge and the ATC part 9 00:00:47,820 --> 00:00:50,540 is the Assistive Technology Conference. 10 00:00:50,540 --> 00:00:53,320 For many years it was the biggest accessibility conference. 11 00:00:53,320 --> 00:00:58,480 I believe it still is the largest for face-to-face accessibility conferences, but also there 12 00:00:58,480 --> 00:01:04,000 are now some excellent online ones such as ID24, which happened just two days ago, and 13 00:01:04,000 --> 00:01:05,000 Axe-con. 14 00:01:05,000 --> 00:01:10,220 I mention this because I was petrified in the lead-up to CSUN at the prospect of public 15 00:01:10,220 --> 00:01:14,400 speaking, but in the end it went well and immediately afterwards I was like "ah, yeah, 16 00:01:14,400 --> 00:01:16,760 I could do this again". 17 00:01:16,760 --> 00:01:20,200 It's amazing how that little wave of relief at the end of a presentation can erase all 18 00:01:20,200 --> 00:01:26,840 those stressful moments in the lead up so easily. After CSUN I immediately forgot this 19 00:01:26,840 --> 00:01:31,400 was a nerve-shedding experience and looked for speaking opportunities. So thanks Dave, 20 00:01:31,400 --> 00:01:36,760 you could have said no. I do have a bit of imposter syndrome here because when I look 21 00:01:36,760 --> 00:01:40,720 at the list of speakers for this event over the years it does make me wonder what the 22 00:01:40,720 --> 00:01:47,480 heck was I thinking. I also feel like an imposter because I have only ever been to one London 23 00:01:47,480 --> 00:01:49,520 Web Standards meetup. 24 00:01:49,520 --> 00:01:51,640 And my main memory of it was that Jake Archibald 25 00:01:51,640 --> 00:01:55,400 was about to head to Poland for some web conference, I think. 26 00:01:55,400 --> 00:01:59,440 And he had a copy of "Krakow in Your Pocket." 27 00:01:59,440 --> 00:02:03,080 Surely the most unfortunately named book in that series. 28 00:02:03,080 --> 00:02:04,720 I'm sure that there was some discussion 29 00:02:04,720 --> 00:02:06,080 about web standards at that meetup, 30 00:02:06,080 --> 00:02:08,040 but that's what *I* remember. 31 00:02:08,040 --> 00:02:12,080 The reason I have not been to any more of these 32 00:02:12,080 --> 00:02:14,480 is because I live in the beautiful town of Swindon. 33 00:02:14,480 --> 00:02:16,080 So why would I want to leave? 34 00:02:17,040 --> 00:02:21,800 The image shown has a very colorful, upbeat, Swindon banner, which is somewhat in contrast 35 00:02:21,800 --> 00:02:28,240 with what could be best described as a post-apocalyptic view that is Swindon Town Centre. 36 00:02:28,240 --> 00:02:33,040 Despite my very infrequent visits to events like these, or speaking gigs, I have been 37 00:02:33,040 --> 00:02:38,440 involved with accessibility for around 20 years. Some of you might also remember this 38 00:02:38,440 --> 00:02:43,160 old website that I used to run, Accessify. 39 00:02:43,160 --> 00:02:45,440 Emphasis on 'used to'. 40 00:02:45,440 --> 00:02:49,480 The domain still exists, but it's absolute dog shit now. 41 00:02:49,480 --> 00:02:53,840 I really wish I had not sold that domain. 42 00:02:53,840 --> 00:02:59,760 Most of this 20-year stint was as a developer who always wanted to influence and shape accessibility. 43 00:02:59,760 --> 00:03:04,800 And often that was a frustrating experience as I did not have any real power or remit. 44 00:03:04,800 --> 00:03:10,120 I have been working exclusively in the accessibility arena though for 5 years now, and every day 45 00:03:10,120 --> 00:03:15,800 I see the same shit I've been trying to fix for the last 25 years or so. 46 00:03:15,800 --> 00:03:19,960 So what am I going to talk about today? 47 00:03:19,960 --> 00:03:22,560 First of all there's the old low hanging fruit. 48 00:03:22,560 --> 00:03:27,200 This is the part of the presentation where I explain why and where accessibility is 49 00:03:27,200 --> 00:03:28,200 easy. 50 00:03:28,200 --> 00:03:33,200 I'll cover just a dash of the basics to show how simple changes can have a great effect. 51 00:03:33,200 --> 00:03:37,400 The T-shirt that I'm wearing now, which has the phrase "Button up, buttercup" can give you 52 00:03:37,400 --> 00:03:40,520 a hint about that part. 53 00:03:40,520 --> 00:03:44,360 Then just to show you what people in this room probably think is fairly simple stuff, 54 00:03:44,360 --> 00:03:48,560 I will share some examples of absolute markup horror shows. 55 00:03:48,560 --> 00:03:52,600 Finally, I will move on to the more juicy fruit where I will show more complex 56 00:03:52,600 --> 00:03:55,080 UIs that need more thought. 57 00:03:55,080 --> 00:04:00,760 I'll explain the issues that they present, I'll cover what WCAG SCs they fail and I'll 58 00:04:00,760 --> 00:04:03,680 demo a fixed version. 59 00:04:03,680 --> 00:04:07,720 I just slipped in some jargon, which a good percentage of you probably know, but you know 60 00:04:07,720 --> 00:04:08,960 what they say about assumptions. 61 00:04:08,960 --> 00:04:13,320 Samuel L Jackson speaking: "And everyone knows when you make an assumption you're making an ass out of you 62 00:04:13,320 --> 00:04:14,320 and umption." 63 00:04:14,320 --> 00:04:17,560 That's right Samuel, so let's get some of the jargon out of the way for those who may 64 00:04:17,560 --> 00:04:19,680 not be familiar. 65 00:04:19,680 --> 00:04:23,040 WCAG is Web Content Accessibility Guidelines. 66 00:04:23,040 --> 00:04:28,440 These are the W3C's guidelines for how we should create web content to make it accessible. 67 00:04:28,440 --> 00:04:33,880 I think we're on safe ground here and don't need to explain what W3C is. 68 00:04:33,880 --> 00:04:36,840 SC = Success Criterion 69 00:04:36,840 --> 00:04:41,720 In the WCAG guidelines, issues that may affect users are grouped into four main categories 70 00:04:41,720 --> 00:04:47,640 Perceivable, Operable, Understandable, and Rebust, and each of them are numbered. 71 00:04:47,640 --> 00:04:52,480 When auditing a website, accessibility nerds have very dull conversations or arguments 72 00:04:52,480 --> 00:04:54,680 that consist primarily of numbers. 73 00:04:54,680 --> 00:05:01,880 Oh, that's definitely a 1.1.1 failure, but it's also a 2.5.3, plus there's a 1.4.11 74 00:05:01,880 --> 00:05:07,880 issue to flag. You know, that kind of thing. We are fun at parties. 75 00:05:07,880 --> 00:05:13,880 ARIA equals Accessible Rich Internet Applications. This is a set of documentation that defines 76 00:05:13,880 --> 00:05:18,680 ways to make web content and web applications more accessible to people with disabilities, 77 00:05:18,680 --> 00:05:20,460 especially with dynamic content. 78 00:05:20,460 --> 00:05:24,460 a11y is accessibility. 79 00:05:24,460 --> 00:05:25,400 This is the abbreviation 80 00:05:25,400 --> 00:05:27,140 that you will often see for accessibility. 81 00:05:27,140 --> 00:05:29,500 It's an A, then 11, 82 00:05:29,500 --> 00:05:32,720 for the characters that have been removed, then Y. 83 00:05:32,720 --> 00:05:36,880 Is it pronounced alley, ally, A-eleven-Y? 84 00:05:36,880 --> 00:05:38,540 It depends on who you ask. 85 00:05:38,540 --> 00:05:41,380 I go with 'alley', so just in case I say that, 86 00:05:41,380 --> 00:05:42,680 I try to avoid it, 87 00:05:42,680 --> 00:05:45,640 but in case I do, that's what I mean by it. 88 00:05:45,640 --> 00:05:49,120 Finally, there's AT for assistive technology. 89 00:05:49,120 --> 00:05:51,120 Typically this will mean screen readers, 90 00:05:51,120 --> 00:05:54,180 but it could also be a refreshable Braille display. 91 00:05:54,180 --> 00:05:58,600 So let's start with some of the basics. 92 00:05:58,600 --> 00:06:01,420 And we'll kick off with the classic, a button. 93 00:06:01,420 --> 00:06:03,880 Some of you might be thinking, 94 00:06:03,880 --> 00:06:07,120 "Oh know not this old chestnut again." 95 00:06:07,120 --> 00:06:09,120 And I completely agree. 96 00:06:09,120 --> 00:06:10,840 At a recent conference I attended, 97 00:06:10,840 --> 00:06:12,800 there were three presentations back-to-back 98 00:06:12,800 --> 00:06:15,080 that all gave the example of using a button. 99 00:06:15,080 --> 00:06:18,760 and I thought I had gone to ButtonConf by mistake! 100 00:06:18,760 --> 00:06:21,080 I am guilty of it too, having written an article covering 101 00:06:21,080 --> 00:06:25,160 this issue and related issues on the TPGi blog. 102 00:06:25,160 --> 00:06:27,800 But it's a useful way to make a point. 103 00:06:27,800 --> 00:06:32,240 So I will cover this very briefly. 104 00:06:32,240 --> 00:06:35,000 If you are repurposing non-semantic divs or span 105 00:06:35,000 --> 00:06:38,960 elements as buttons, you will need to make sure that they 106 00:06:38,960 --> 00:06:42,680 are keyboard-focussable and operable with a tabindex 107 00:06:42,680 --> 00:06:44,480 attribute. 108 00:06:44,480 --> 00:06:47,280 they are exposed to assistive technology as buttons 109 00:06:47,280 --> 00:06:49,240 through the HTML role attribute. 110 00:06:49,240 --> 00:06:53,220 You can style them with CSS to look like buttons, 111 00:06:53,220 --> 00:06:56,480 but to be frank, you'd want to do that with real buttons too. 112 00:06:56,480 --> 00:07:01,440 Scripts are used to ensure that states are updated 113 00:07:01,440 --> 00:07:03,320 and conveyed to assistive technology, 114 00:07:03,320 --> 00:07:06,560 such as is the button pressed, is this thing expanded? 115 00:07:06,560 --> 00:07:09,440 You're creating yourself a lot of work 116 00:07:09,440 --> 00:07:11,760 and it's not particularly robust. 117 00:07:11,760 --> 00:07:14,320 So, you know, you could just use a button. 118 00:07:14,320 --> 00:07:18,160 Now, using real buttons is all well and good, 119 00:07:18,160 --> 00:07:20,280 but it can only get you so far. 120 00:07:20,280 --> 00:07:23,200 For most sites, this will represent just a small percentage 121 00:07:23,200 --> 00:07:25,560 of the UI of interactive elements. 122 00:07:25,560 --> 00:07:29,520 Unless, of course, your website is pretty much 123 00:07:29,520 --> 00:07:32,900 only a collection of buttons, like a soundboard. 124 00:07:32,900 --> 00:07:37,120 If your website were just a collection of buttons, 125 00:07:37,120 --> 00:07:39,680 you could quickly, very quickly improve the accessibility 126 00:07:39,680 --> 00:07:45,120 it by changing from non-semantic divs to buttons, particularly if you have not made these buttons 127 00:07:45,120 --> 00:07:49,680 keyboard operable. And if I were building a soundboard, I'm not going to lie, it would 128 00:07:49,680 --> 00:07:59,480 probably be a fart soundboard. Now here is the markup with non-semantic divs, not accessible 129 00:07:59,480 --> 00:08:06,080 at all. And here's the fixed version for this pretend soundboard, where the only change 130 00:08:06,080 --> 00:08:11,280 is literally to swap the developments for buttons. Minimal changes in the markup, but 131 00:08:11,280 --> 00:08:18,980 big improvements for accessibility, with barely any overhead. Actually, I lied a bit back 132 00:08:18,980 --> 00:08:24,760 then when I said that this is a pretend website. To create the screenshots of the UI and the 133 00:08:24,760 --> 00:08:30,040 underlying markup, I had to build something, and it was just not within me to create an 134 00:08:30,040 --> 00:08:37,720 inaccessible farting soundboard. So, yeah, that exists. No, I'm not demoing. But there 135 00:08:37,720 --> 00:08:41,400 is a link to the accessible fartboard at the end for people with a similar mental age to 136 00:08:41,400 --> 00:08:46,780 me when it comes to jokes. So you'd think that buttons are a pretty simple thing and 137 00:08:46,780 --> 00:08:51,920 people should get them right. But time and time again, I've been proven wrong. Recently, 138 00:08:51,920 --> 00:08:58,500 I saw this tweet which read, "senior developer quiz using only HTML and no JavaScript, make 139 00:08:58,500 --> 00:09:03,780 a link that will navigate to another page. It's supposed to be sarcastic, but really 140 00:09:03,780 --> 00:09:09,140 it's painfully on the money. Developers with galaxy brains in many areas often balls up 141 00:09:09,140 --> 00:09:14,900 the most basic fundamentals of the web, and you cannot get much more fundamental than links 142 00:09:14,900 --> 00:09:20,780 and buttons. Some of you may be thinking "This is just hyperbole. People don't screw 143 00:09:20,780 --> 00:09:26,380 things up that badly, do they?" I fear that this audience may not have seen some of the 144 00:09:26,380 --> 00:09:31,500 the horrors I have seen. So let me share with you some right now. 145 00:09:31,500 --> 00:09:39,540 We have a channel in Teams at TPGI which, hang on, I said the T word, I need a drink. 146 00:09:39,540 --> 00:09:46,420 I need a stronger drink. In one of our Teams channels we share some of the absolute beauties 147 00:09:46,420 --> 00:09:50,660 that we have come across while auditing. This is just a selection of many of the horrors 148 00:09:50,660 --> 00:09:58,260 that we have come across. We'll start with something nice and easy. Is this a 'linkput'? 149 00:09:58,260 --> 00:10:04,340 It's a button implemented as an input with type of button. It's not common approach but 150 00:10:04,340 --> 00:10:10,140 it's still valid HTML. But why not then just wrap that in a link and then remove the link's 151 00:10:10,140 --> 00:10:19,940 semantics by giving it a role of presentation? Or why not just have a button? 152 00:10:19,940 --> 00:10:24,980 Anoher example of link button confusion here or as we shall call it a "lutton". Here we 153 00:10:24,980 --> 00:10:29,020 have a perfectly focusable link that has had a `tabindex` added for no reason 154 00:10:29,020 --> 00:10:34,260 whatsoever. Oh and of course they want it to be a button instead so they've given 155 00:10:34,260 --> 00:10:40,220 it a role of button. It's a logout button but hey let's just completely overwrite 156 00:10:40,220 --> 00:10:44,540 that logout "lutton" with a totally different accessible name of "my account", 157 00:10:44,540 --> 00:10:48,900 thus ensuring that dictation software users can't select that "lutton" and 158 00:10:48,900 --> 00:10:51,900 and AT users will always log themselves out 159 00:10:51,900 --> 00:10:55,900 when they thought they were actually just going to view their account! 160 00:10:55,900 --> 00:10:58,900 And now we have a collection of div elements that really are a list. 161 00:10:58,900 --> 00:11:04,900 So, you know, they could have used proper list markup, like UL, Li, that sort of thing. 162 00:11:04,900 --> 00:11:08,900 Instead, they tried to convince assistive technology users that this is a list 163 00:11:08,900 --> 00:11:12,900 by providing an ARIA label of "list" on the parent container 164 00:11:12,900 --> 00:11:15,900 and an ARIA label of "list item" for each item. 165 00:11:15,900 --> 00:11:18,820 This is a list item, this is a list item. 166 00:11:18,820 --> 00:11:20,340 What the hell is this? 167 00:11:20,340 --> 00:11:23,320 Okay, so you take a div 168 00:11:23,320 --> 00:11:25,460 and then you redefine it as a button. 169 00:11:25,460 --> 00:11:27,700 Then you mysteriously indicate that it is checked 170 00:11:27,700 --> 00:11:28,900 with aria-checked, 171 00:11:28,900 --> 00:11:30,940 despite it not being a checkbox. 172 00:11:30,940 --> 00:11:34,220 Then, just to confuse matters further, 173 00:11:34,220 --> 00:11:36,500 you add aria-expanded=true, 174 00:11:36,500 --> 00:11:39,040 which suggests that it's a disclosure. 175 00:11:39,040 --> 00:11:39,880 It is not. 176 00:11:39,880 --> 00:11:43,060 All of that is wrapped around a link, 177 00:11:43,060 --> 00:11:46,660 which has no `href` because it's not a link, 178 00:11:46,660 --> 00:11:48,940 and it's not a link because inside of that link 179 00:11:48,940 --> 00:11:51,060 is a heading, an H5 heading! 180 00:11:51,060 --> 00:11:53,820 Seriously, what are people smoking 181 00:11:53,820 --> 00:11:55,820 before writing this stuff? 182 00:11:55,820 --> 00:11:58,180 The most hilarious part of this is that visually 183 00:11:58,180 --> 00:12:01,240 and functionally, despite all of that crap markup, 184 00:12:01,240 --> 00:12:03,980 this component behaved like a radio button. 185 00:12:03,980 --> 00:12:08,420 The animated GIF shows a cat gesticulating in time 186 00:12:08,420 --> 00:12:11,580 with the words, "What the fuck are you doing?" 187 00:12:11,580 --> 00:12:18,940 I have a theory about this. The video clip shows a showroom dummy head on the end of 188 00:12:18,940 --> 00:12:24,380 a robotic arm which is then mashed and rolled across a keyboard. Well, it's as good a theory 189 00:12:24,380 --> 00:12:32,020 as any. You can't just fix any crappy old markup with ARIA. The image shows a red car 190 00:12:32,020 --> 00:12:36,220 with the wheels sideways on the front of the vehicle and a bumper that runs down the side 191 00:12:36,220 --> 00:12:38,620 and it says, we can fix it with ARIA. 192 00:12:38,620 --> 00:12:43,660 Remember the first rule of ARIA is, 193 00:12:43,660 --> 00:12:45,740 if you can use a native HTML element 194 00:12:45,740 --> 00:12:48,100 or attribute with the semantics and behavior 195 00:12:48,100 --> 00:12:50,340 you require already built in, 196 00:12:50,340 --> 00:12:51,860 instead of repurposing an element 197 00:12:51,860 --> 00:12:54,040 and adding an ARIA role, state or property 198 00:12:54,040 --> 00:12:56,500 to make it accessible, then do so. 199 00:12:56,500 --> 00:13:00,380 You actually can fix some pretty atrocious markup 200 00:13:00,380 --> 00:13:02,620 with ARIA if you know what you're doing, 201 00:13:02,620 --> 00:13:05,100 but it's not robust, it's not right, 202 00:13:05,100 --> 00:13:07,800 And if you do, Steve Faulkner, author of the ARIA rules, 203 00:13:07,800 --> 00:13:10,080 will come and kick you in the nether regions. 204 00:13:10,080 --> 00:13:11,940 In fact, he's in the audience right now 205 00:13:11,940 --> 00:13:13,580 and can personally administer a kicking 206 00:13:13,580 --> 00:13:15,380 if you try this sort of nonsense. 207 00:13:15,380 --> 00:13:19,820 To reiterate, don't make complicated stuff 208 00:13:19,820 --> 00:13:21,500 when you can have all of that complicated stuff 209 00:13:21,500 --> 00:13:23,300 provided for free. 210 00:13:23,300 --> 00:13:24,920 The image shows a hideous vehicle 211 00:13:24,920 --> 00:13:26,580 that appears to have been made out of a collection 212 00:13:26,580 --> 00:13:28,200 of entirely mismatched panels, 213 00:13:28,200 --> 00:13:30,820 and the caption reads, "Use a button? 214 00:13:30,820 --> 00:13:32,620 But I can make my own button!" 215 00:13:34,500 --> 00:13:35,980 Time for a mini quiz. 216 00:13:35,980 --> 00:13:38,940 It's very mini, there's just one question. 217 00:13:38,940 --> 00:13:40,100 I'll make it easier though, 218 00:13:40,100 --> 00:13:42,700 by providing multiple choice answers. 219 00:13:42,700 --> 00:13:45,260 And the question is, what is this thing? 220 00:13:45,260 --> 00:13:47,700 It is opened using a button, 221 00:13:47,700 --> 00:13:49,860 then it shows a menu-like set of options, 222 00:13:49,860 --> 00:13:53,660 but it also has a close button and a curtain underneath. 223 00:13:53,660 --> 00:13:57,500 So, audience participation time. 224 00:13:57,500 --> 00:14:01,820 Put your hands up if you think it is a menu. 225 00:14:01,820 --> 00:14:08,820 Put your hands up if you think that it is a dialog. 226 00:14:08,820 --> 00:14:15,820 Finally, put your hands up if you think it's a disclosure. 227 00:14:15,820 --> 00:14:21,820 Okay, well, you're all wrong. 228 00:14:21,820 --> 00:14:24,820 It's actually a diaMenuClosure, which of course is not a thing at all, 229 00:14:24,820 --> 00:14:27,820 but you try telling some developers that. 230 00:14:27,820 --> 00:14:32,820 The point is that there are patterns for all of those three things I mentioned. 231 00:14:32,820 --> 00:14:35,820 Each has expected roles that are exposed to AT, 232 00:14:35,820 --> 00:14:41,820 and those roles imply certain expected behaviors for AT users. 233 00:14:41,820 --> 00:14:45,820 This diaMenuClosure has features of each pattern, 234 00:14:45,820 --> 00:14:51,820 and frankly the developers who do this sort of thing need to pick one and do it right. 235 00:14:51,820 --> 00:14:55,820 When auditing such things it's tricky to know sometimes what to report. 236 00:14:55,820 --> 00:14:59,140 What is it a poorly implemented dialog? 237 00:14:59,140 --> 00:15:04,660 Or is it a badly implemented menu? 238 00:15:04,660 --> 00:15:08,980 The examples I show in the next section are going to be mockups or recreations of real 239 00:15:08,980 --> 00:15:11,220 interfaces that I've audited. 240 00:15:11,220 --> 00:15:15,220 I can't show you the real interfaces because of client confidentiality reasons, but these 241 00:15:15,220 --> 00:15:17,820 are functionally equivalent to the real thing. 242 00:15:17,820 --> 00:15:24,740 Oh, and clearly I am not a designer as you are about to see. 243 00:15:24,740 --> 00:15:29,740 In this panel, the user makes a selection from a table of data, and a more detailed view 244 00:15:29,740 --> 00:15:33,220 of that data is shown in the right panel. 245 00:15:33,220 --> 00:15:37,020 The table is ever present taking up three quarter width, or at least it was in the original 246 00:15:37,020 --> 00:15:38,580 version that I audited. 247 00:15:38,580 --> 00:15:43,800 The panel for the details is also ever present taking up the remaining quarter width. 248 00:15:43,800 --> 00:15:46,180 Is there a pattern for this? 249 00:15:46,180 --> 00:15:50,180 There are patterns that exist for various parts of this, the table as a whole, button 250 00:15:50,180 --> 00:15:54,080 elements inside the table, but there's nothing that ties this particular 251 00:15:54,080 --> 00:15:59,180 interaction together in any standard way. The challenges this one presented were 252 00:15:59,180 --> 00:16:03,120 around how do you make a table row clickable, and what is the 253 00:16:03,120 --> 00:16:07,920 accessible name that will be exposed to AT users. There's potentially a whole lot 254 00:16:07,920 --> 00:16:13,520 of wording if that whole row is interactive. Managing focus should 255 00:16:13,520 --> 00:16:18,880 focus move when a row is selected or not. What should be announced for screen 256 00:16:18,880 --> 00:16:24,720 reader uses, a summary of the displayed data, all of the data displayed, or just confirmation 257 00:16:24,720 --> 00:16:28,080 that the panel has updated. 258 00:16:28,080 --> 00:16:33,200 In the original audited version, the problems that we noted were there was no keyboard operability. 259 00:16:33,200 --> 00:16:39,720 It relied solely on mouse clicks, so it failed 2.1.1 keyboard. No content update was provided 260 00:16:39,720 --> 00:16:46,000 for assistive technology users and failed 4.1.3 status messages. There are also numerous 261 00:16:46,000 --> 00:16:52,640 issues related to color that are not shown in this recreation. 262 00:16:52,640 --> 00:16:57,200 To address the keyboard issue, one cell of the table needed to have a focusable button, 263 00:16:57,200 --> 00:17:03,560 which I have lazily indicated with the eye emoji button here. Not a designer, see? 264 00:17:03,560 --> 00:17:08,840 The ability to select a row with the mouse can still happen, but you cannot wrap a