1 00:00:05,239 --> 00:00:07,259 [music] 2 00:00:09,825 --> 00:00:11,845 [music] 3 00:00:15,040 --> 00:00:17,119 Okay, welcome. We're back for our third 4 00:00:17,119 --> 00:00:18,960 speak speaker on this track. Please 5 00:00:18,960 --> 00:00:21,359 welcome Emma with a round of applause. 6 00:00:21,359 --> 00:00:23,039 Erin. Erin, I should have brought the 7 00:00:23,039 --> 00:00:24,800 piece of paper. [applause] 8 00:00:24,800 --> 00:00:27,119 Too confident for my own good. Welcome, 9 00:00:27,119 --> 00:00:28,640 Erin. 10 00:00:28,640 --> 00:00:31,519 Uh, hi. Um, so I work for a little 11 00:00:31,519 --> 00:00:34,880 company called Atlassian. Um, you 12 00:00:34,880 --> 00:00:38,079 probably heard of us. Um, and at 13 00:00:38,079 --> 00:00:40,000 Atlassian, we take accessibility pretty 14 00:00:40,000 --> 00:00:41,760 seriously. 15 00:00:41,760 --> 00:00:43,680 I would like to say that that's just 16 00:00:43,680 --> 00:00:45,360 because, you know, it's the right thing 17 00:00:45,360 --> 00:00:48,800 to do. After all, don't crunch at bang 18 00:00:48,800 --> 00:00:50,879 percent the customer is one of our core 19 00:00:50,879 --> 00:00:54,320 company values. Um, but we live in this 20 00:00:54,320 --> 00:00:56,719 latestage capitalist hellscape. So 21 00:00:56,719 --> 00:00:58,160 obviously there's a financial incentive 22 00:00:58,160 --> 00:01:01,920 here too. Uh for us our customers are 23 00:01:01,920 --> 00:01:05,119 businesses and businesses have employees 24 00:01:05,119 --> 00:01:07,600 and unless something has gone terribly 25 00:01:07,600 --> 00:01:09,520 wrong in the hiring pipeline some of 26 00:01:09,520 --> 00:01:11,360 those employees have disabilities. So 27 00:01:11,360 --> 00:01:13,040 basically businesses want to make sure 28 00:01:13,040 --> 00:01:15,119 that they can use our software before 29 00:01:15,119 --> 00:01:18,320 they pay for it. Uh to that end we do 30 00:01:18,320 --> 00:01:19,520 actually have a page here that you can 31 00:01:19,520 --> 00:01:20,960 have a look at if you're interested 32 00:01:20,960 --> 00:01:23,600 about our accessibility stuff. 33 00:01:23,600 --> 00:01:25,439 Um, the most interesting thing on here I 34 00:01:25,439 --> 00:01:28,640 think though is this page which has our 35 00:01:28,640 --> 00:01:30,720 VPAD documents. So a VPAD document is a 36 00:01:30,720 --> 00:01:32,640 voluntary product accessibility template 37 00:01:32,640 --> 00:01:34,479 and this is the industry standard way of 38 00:01:34,479 --> 00:01:36,000 describing how accessible your product 39 00:01:36,000 --> 00:01:37,759 is. So if you are putting in the effort 40 00:01:37,759 --> 00:01:39,119 to improve the accessibility of your 41 00:01:39,119 --> 00:01:40,159 product, you want to make sure that 42 00:01:40,159 --> 00:01:41,840 people know about it, right? So this is 43 00:01:41,840 --> 00:01:44,960 how you can go about doing that. 44 00:01:44,960 --> 00:01:48,159 Um, which is that website there. So 45 00:01:48,159 --> 00:01:49,200 today I'm going to talk through a bunch 46 00:01:49,200 --> 00:01:50,720 of different processes and systems that 47 00:01:50,720 --> 00:01:52,399 we use to improve the accessibility of 48 00:01:52,399 --> 00:01:53,759 our products. I'm going to be 49 00:01:53,759 --> 00:01:55,680 concentrating on the dev side of things 50 00:01:55,680 --> 00:01:57,680 because I'm a dev. That's what I'm 51 00:01:57,680 --> 00:02:00,000 familiar with. Um, but I do want to take 52 00:02:00,000 --> 00:02:01,520 a moment to recognize that good 53 00:02:01,520 --> 00:02:04,479 accessibility starts with design. So if 54 00:02:04,479 --> 00:02:06,560 your designers treat accessibility like 55 00:02:06,560 --> 00:02:08,720 something to work around rather than a 56 00:02:08,720 --> 00:02:11,039 goal in and of itself, that's a big 57 00:02:11,039 --> 00:02:12,640 problem that you're going to run into 58 00:02:12,640 --> 00:02:15,520 and you probably want to address that. 59 00:02:15,520 --> 00:02:18,160 Um, but that said, even in that 60 00:02:18,160 --> 00:02:19,200 situation, there are still some things 61 00:02:19,200 --> 00:02:20,640 you can do on the dev side to improve 62 00:02:20,640 --> 00:02:22,239 the accessibility of your product. Um, 63 00:02:22,239 --> 00:02:24,319 I'm going to go through a bunch of them. 64 00:02:24,319 --> 00:02:26,160 Uh, I am going to talk about some things 65 00:02:26,160 --> 00:02:27,599 that are freely available and you can 66 00:02:27,599 --> 00:02:29,200 just go out and start using now. And I'm 67 00:02:29,200 --> 00:02:30,239 also going to talk about some things 68 00:02:30,239 --> 00:02:32,160 that we use inhouse that we don't make 69 00:02:32,160 --> 00:02:34,080 publicly available, but I still think 70 00:02:34,080 --> 00:02:35,519 it's valuable to talk about them because 71 00:02:35,519 --> 00:02:37,599 often the reason that we don't make them 72 00:02:37,599 --> 00:02:38,959 publicly available is just that they're 73 00:02:38,959 --> 00:02:41,280 tied to our particular systems. Um, but 74 00:02:41,280 --> 00:02:42,800 the concept still like the concept 75 00:02:42,800 --> 00:02:45,040 scales. So you could go and take that 76 00:02:45,040 --> 00:02:46,400 concept and build it for your own 77 00:02:46,400 --> 00:02:48,879 systems. You know, vibe code it or 78 00:02:48,879 --> 00:02:52,400 whatever. Um so hopefully today there'll 79 00:02:52,400 --> 00:02:53,680 be at least one thing that you can take 80 00:02:53,680 --> 00:02:54,959 away from this talk that you can then 81 00:02:54,959 --> 00:02:56,720 start applying to your particular 82 00:02:56,720 --> 00:02:59,040 product. 83 00:02:59,040 --> 00:03:01,360 So when I start building a feature, the 84 00:03:01,360 --> 00:03:03,120 first accessibility tool that I'm going 85 00:03:03,120 --> 00:03:05,680 to to use is our design system. So 86 00:03:05,680 --> 00:03:07,760 design systems are a really excellent 87 00:03:07,760 --> 00:03:10,400 way for developers who have that 88 00:03:10,400 --> 00:03:11,840 knowledge and experience in 89 00:03:11,840 --> 00:03:14,720 accessibility and other UX sort of areas 90 00:03:14,720 --> 00:03:16,959 to encode that knowledge so that 91 00:03:16,959 --> 00:03:19,440 developers with less experience can then 92 00:03:19,440 --> 00:03:22,000 reuse it. And I guess you can all avoid 93 00:03:22,000 --> 00:03:24,400 writing CSS if that's something that you 94 00:03:24,400 --> 00:03:26,720 don't like doing. 95 00:03:26,720 --> 00:03:29,200 Um uh you can and you can do this via 96 00:03:29,200 --> 00:03:30,400 things like making sure that you have 97 00:03:30,400 --> 00:03:31,920 color tokens so you always have proper 98 00:03:31,920 --> 00:03:33,360 contrast, making sure that your icon 99 00:03:33,360 --> 00:03:35,840 buttons all have required label icon, uh 100 00:03:35,840 --> 00:03:37,680 properties, that kind of thing. Our 101 00:03:37,680 --> 00:03:39,680 design system is actually available um 102 00:03:39,680 --> 00:03:40,959 publicly. You can go and have a look at 103 00:03:40,959 --> 00:03:43,360 it if you like. Uh it is the Atlassian 104 00:03:43,360 --> 00:03:44,720 design system though, so it is very 105 00:03:44,720 --> 00:03:46,400 opinionated about the Atlassian design 106 00:03:46,400 --> 00:03:48,879 language. Uh, so unless you're building 107 00:03:48,879 --> 00:03:50,720 a third party plugin for one of our 108 00:03:50,720 --> 00:03:53,200 products or you like really like the 109 00:03:53,200 --> 00:03:56,720 color blue, um, you probably don't want 110 00:03:56,720 --> 00:03:59,840 to just use it wholesale. Uh, but you 111 00:03:59,840 --> 00:04:01,120 might want to take some inspiration from 112 00:04:01,120 --> 00:04:03,439 it. So, for instance, we have a date 113 00:04:03,439 --> 00:04:05,040 time picker and we have a select 114 00:04:05,040 --> 00:04:06,640 components. These are both things that 115 00:04:06,640 --> 00:04:08,239 people frequently want to customize, 116 00:04:08,239 --> 00:04:09,920 which are also very hard to get right 117 00:04:09,920 --> 00:04:11,519 from an accessibility point of view. And 118 00:04:11,519 --> 00:04:12,720 we've built both of those components 119 00:04:12,720 --> 00:04:14,080 from the ground up with both 120 00:04:14,080 --> 00:04:16,239 accessibility and customizability in 121 00:04:16,239 --> 00:04:18,320 mind. So if you want to have a look, the 122 00:04:18,320 --> 00:04:20,160 code is all available up on um 123 00:04:20,160 --> 00:04:23,280 Bitbucket. You can go and plagiarize it 124 00:04:23,280 --> 00:04:26,560 to your heart's content. 125 00:04:26,560 --> 00:04:29,680 All right. Along with our 126 00:04:29,680 --> 00:04:31,759 design system, we also have a bunch of 127 00:04:31,759 --> 00:04:34,560 agent skills. Um and these cover the 128 00:04:34,560 --> 00:04:36,240 different parts of the of the software 129 00:04:36,240 --> 00:04:37,680 development life cycle everywhere from 130 00:04:37,680 --> 00:04:40,800 the design part um up to like PR reviews 131 00:04:40,800 --> 00:04:42,720 and they cover like a broad range of 132 00:04:42,720 --> 00:04:46,320 different topics. So everything from um 133 00:04:46,320 --> 00:04:48,639 like generic accessibility advice like 134 00:04:48,639 --> 00:04:50,160 before producing code define the 135 00:04:50,160 --> 00:04:51,680 keyboard and focus flow the names and 136 00:04:51,680 --> 00:04:54,160 the roles and the states 137 00:04:54,160 --> 00:04:56,000 um to things that are specific to a 138 00:04:56,000 --> 00:04:58,400 particular component. Add area labels 139 00:04:58,400 --> 00:05:01,360 for icon only buttons and finally things 140 00:05:01,360 --> 00:05:02,880 that are specific to Atlassian. So use 141 00:05:02,880 --> 00:05:04,720 Atlassian design system components when 142 00:05:04,720 --> 00:05:06,960 available. We don't make these skills 143 00:05:06,960 --> 00:05:08,479 available publicly but you can go out 144 00:05:08,479 --> 00:05:09,840 and Google. There are a ton of skills 145 00:05:09,840 --> 00:05:11,280 out there that you can use. you probably 146 00:05:11,280 --> 00:05:13,039 want to set that are like those publicly 147 00:05:13,039 --> 00:05:15,120 available ones that can uh like check 148 00:05:15,120 --> 00:05:17,600 against the WAG requirements. Um I can't 149 00:05:17,600 --> 00:05:19,520 recommend one because I obviously don't 150 00:05:19,520 --> 00:05:21,600 use them, but you you know how to 151 00:05:21,600 --> 00:05:24,080 Google. Um so yeah, you can go out and 152 00:05:24,080 --> 00:05:25,280 get some of those publicly accessible 153 00:05:25,280 --> 00:05:26,720 ones and then you probably also want to 154 00:05:26,720 --> 00:05:28,639 build on top of that with some that are 155 00:05:28,639 --> 00:05:32,960 specific to your particular environment. 156 00:05:32,960 --> 00:05:35,440 All right. So once we've written some 157 00:05:35,440 --> 00:05:36,880 code, obviously the next thing that's 158 00:05:36,880 --> 00:05:38,240 going to happen to it is that it's going 159 00:05:38,240 --> 00:05:41,759 to get linted. And at Atlassian, we use 160 00:05:41,759 --> 00:05:44,960 a surprising number of linting tools. So 161 00:05:44,960 --> 00:05:48,320 the first tool we use is um axe 162 00:05:48,320 --> 00:05:51,919 accessibility llinter from DQ. Uh this 163 00:05:51,919 --> 00:05:54,479 is actually an IDE plugin. So it is 164 00:05:54,479 --> 00:05:56,320 available for free if you're using like 165 00:05:56,320 --> 00:05:59,840 VS code or VS code VS code derived IDE. 166 00:05:59,840 --> 00:06:02,639 Um, or if you can afford a Jet Brains 167 00:06:02,639 --> 00:06:04,160 subscription, then you have to pay for 168 00:06:04,160 --> 00:06:06,319 it. Um, or perhaps you could win a Jet 169 00:06:06,319 --> 00:06:07,759 Brains subscription outside and then you 170 00:06:07,759 --> 00:06:10,720 could use the money that you saved to 171 00:06:10,720 --> 00:06:12,240 Yeah, I'm not sure. I don't even know if 172 00:06:12,240 --> 00:06:13,520 they're giving away subscriptions. You 173 00:06:13,520 --> 00:06:16,160 should just suggest it to them. Um, so 174 00:06:16,160 --> 00:06:18,240 it just works like any old IDE plugin. 175 00:06:18,240 --> 00:06:20,000 You put violations in your code and it 176 00:06:20,000 --> 00:06:22,400 puts red squiggly lines. So, the nice 177 00:06:22,400 --> 00:06:24,240 thing about this is of course that you 178 00:06:24,240 --> 00:06:25,600 can just add it to your ID now. You 179 00:06:25,600 --> 00:06:27,440 don't have to ask anyone's permission, I 180 00:06:27,440 --> 00:06:30,400 hope. Um, and you can just start finding 181 00:06:30,400 --> 00:06:31,600 out about the accessibility in your 182 00:06:31,600 --> 00:06:32,960 code. The downside, of course, is that 183 00:06:32,960 --> 00:06:34,479 it's an IDE plugin, so you're the only 184 00:06:34,479 --> 00:06:36,560 one using it. Um, and even if you do 185 00:06:36,560 --> 00:06:38,160 convince other people in your team to 186 00:06:38,160 --> 00:06:40,479 use it, it turns out that some people 187 00:06:40,479 --> 00:06:42,160 just don't care about red squiggly 188 00:06:42,160 --> 00:06:44,080 lines. 189 00:06:44,080 --> 00:06:46,880 Like I know, I was shocked too. And like 190 00:06:46,880 --> 00:06:49,199 coding agents completely impervious to 191 00:06:49,199 --> 00:06:50,960 red squiggly lines. They will commit all 192 00:06:50,960 --> 00:06:53,199 kinds of different colored squiggly 193 00:06:53,199 --> 00:06:55,520 lined code. So this solution is kind of 194 00:06:55,520 --> 00:06:59,859 better for um I guess artisal code I 195 00:06:59,859 --> 00:07:01,599 [laughter] 196 00:07:01,599 --> 00:07:03,759 um and we do need to use like a standard 197 00:07:03,759 --> 00:07:05,440 linting pipeline that's part of our 198 00:07:05,440 --> 00:07:07,360 general build pipeline on top of this. 199 00:07:07,360 --> 00:07:10,000 So for this we use eslint with a couple 200 00:07:10,000 --> 00:07:12,880 of custom plugins. So we use eslint- 201 00:07:12,880 --> 00:07:15,039 plugin jsx-11y. 202 00:07:15,039 --> 00:07:16,479 This is the standard plugin that you 203 00:07:16,479 --> 00:07:19,199 want if you're writing react or anything 204 00:07:19,199 --> 00:07:22,240 jsxbased. If you're not writing react 205 00:07:22,240 --> 00:07:24,000 then have a google. there will there 206 00:07:24,000 --> 00:07:25,680 will be an equivalent plugin unless 207 00:07:25,680 --> 00:07:27,039 you're using something really obscure 208 00:07:27,039 --> 00:07:28,880 and even then who knows people will 209 00:07:28,880 --> 00:07:30,880 write code. 210 00:07:30,880 --> 00:07:31,759 Um, we're also using 211 00:07:31,759 --> 00:07:33,599 eslints-plugin-styled 212 00:07:33,599 --> 00:07:36,319 components- a11y because I don't know at 213 00:07:36,319 --> 00:07:37,440 some point in the past we were using 214 00:07:37,440 --> 00:07:38,880 styled components. So now that's in the 215 00:07:38,880 --> 00:07:41,680 codebase forever. 216 00:07:41,680 --> 00:07:44,000 And we also have a couple of custom 217 00:07:44,000 --> 00:07:45,919 rules that are just based on our design 218 00:07:45,919 --> 00:07:47,360 system and those are freely available 219 00:07:47,360 --> 00:07:49,520 with the design system. So if you are 220 00:07:49,520 --> 00:07:51,520 borrowing that you can borrow the rules 221 00:07:51,520 --> 00:07:53,360 as well. 222 00:07:53,360 --> 00:07:57,280 Uh and finally we use oxlint. So, Oxlint 223 00:07:57,280 --> 00:07:58,720 is an alternative to ESLint that's 224 00:07:58,720 --> 00:08:02,800 written in Rust, so it's cooler. Um, 225 00:08:02,800 --> 00:08:05,520 uh, and it also runs faster and we have 226 00:08:05,520 --> 00:08:08,800 like a lot of like so much code. So, 227 00:08:08,800 --> 00:08:10,639 linting time becomes a problem for us. 228 00:08:10,639 --> 00:08:12,479 We, we, we need the faster Oxind. The 229 00:08:12,479 --> 00:08:14,319 downside to Oxland is that you can't add 230 00:08:14,319 --> 00:08:17,120 custom plugins for it. It does have some 231 00:08:17,120 --> 00:08:19,599 accessibility rules built in, but they 232 00:08:19,599 --> 00:08:21,199 don't cover everything that we get from 233 00:08:21,199 --> 00:08:23,440 our custom rules. 234 00:08:23,440 --> 00:08:26,879 So what we actually do is we run oxlint 235 00:08:26,879 --> 00:08:29,360 and then we run eslint but we have a 236 00:08:29,360 --> 00:08:31,039 plugin for eslint that knows about 237 00:08:31,039 --> 00:08:33,519 oxlint that tells eslint not to run the 238 00:08:33,519 --> 00:08:35,039 rules that have been already run by 239 00:08:35,039 --> 00:08:37,120 oxint because it turns out that the 240 00:08:37,120 --> 00:08:40,080 answer to having too much code is more 241 00:08:40,080 --> 00:08:42,159 code. 242 00:08:42,159 --> 00:08:44,080 Um 243 00:08:44,080 --> 00:08:45,920 all right once we've finished writing 244 00:08:45,920 --> 00:08:47,760 our code our llinter is happy with what 245 00:08:47,760 --> 00:08:49,120 we've done. The next thing we need to 246 00:08:49,120 --> 00:08:52,399 move on to is testing. Uh so the first 247 00:08:52,399 --> 00:08:53,600 thing I want to touch on is something 248 00:08:53,600 --> 00:08:56,959 that you might already be using and that 249 00:08:56,959 --> 00:08:59,600 is testing library. So React developers 250 00:08:59,600 --> 00:09:01,440 all call this React testing library. 251 00:09:01,440 --> 00:09:02,640 It's actually just called testing 252 00:09:02,640 --> 00:09:04,320 library which is a terrible name for a 253 00:09:04,320 --> 00:09:06,959 testing library. Um but it is a very 254 00:09:06,959 --> 00:09:08,720 good testing library. Uh and the reason 255 00:09:08,720 --> 00:09:10,560 for that is that when it's uh 256 00:09:10,560 --> 00:09:12,240 interacting with your code under test, 257 00:09:12,240 --> 00:09:13,839 it interacts with it in a similar way to 258 00:09:13,839 --> 00:09:15,760 the way that a user interacts with it. 259 00:09:15,760 --> 00:09:17,279 And that actually often means that it 260 00:09:17,279 --> 00:09:19,440 interacts with it like a screen reader. 261 00:09:19,440 --> 00:09:21,360 So my advice here would be that if you 262 00:09:21,360 --> 00:09:22,720 are writing a test where you need to 263 00:09:22,720 --> 00:09:24,880 find an interactive element on the page, 264 00:09:24,880 --> 00:09:26,880 you should prefer using these get by 265 00:09:26,880 --> 00:09:28,720 roll, query by ro, find by ro, which is 266 00:09:28,720 --> 00:09:30,080 also just the recommendation from the 267 00:09:30,080 --> 00:09:33,440 library creators. Um, the reason is that 268 00:09:33,440 --> 00:09:35,440 when you use these selectors, you're 269 00:09:35,440 --> 00:09:37,760 going to pass it a ro as in like an area 270 00:09:37,760 --> 00:09:40,959 ro and an accessible name. And if you 271 00:09:40,959 --> 00:09:43,120 can't find your element using these two 272 00:09:43,120 --> 00:09:44,880 pieces of information, then it probably 273 00:09:44,880 --> 00:09:46,000 doesn't work with a screen reader 274 00:09:46,000 --> 00:09:48,880 either. Um, of course, it can't tell you 275 00:09:48,880 --> 00:09:50,640 that you're using the correct role or 276 00:09:50,640 --> 00:09:52,480 that it's a good name, but it is at 277 00:09:52,480 --> 00:09:55,519 least like a baseline, right? So, if you 278 00:09:55,519 --> 00:09:58,560 um aren't able to find your elements 279 00:09:58,560 --> 00:10:00,160 or you get an error like this, right? 280 00:10:00,160 --> 00:10:02,399 Found multiple elements with the role 281 00:10:02,399 --> 00:10:04,959 whatever and the name play episode, this 282 00:10:04,959 --> 00:10:07,440 is an accessibility violation. There are 283 00:10:07,440 --> 00:10:08,880 well, usually I mean there's there's 284 00:10:08,880 --> 00:10:10,480 some cases where it might be okay to 285 00:10:10,480 --> 00:10:12,080 have two things that have the same role 286 00:10:12,080 --> 00:10:13,600 and the same name if they actually do 287 00:10:13,600 --> 00:10:15,680 the same thing. So, like if you have a 288 00:10:15,680 --> 00:10:17,200 back button at the top of the page and a 289 00:10:17,200 --> 00:10:18,399 back button at the bottom of the page, 290 00:10:18,399 --> 00:10:19,519 they're both going to have a ro link and 291 00:10:19,519 --> 00:10:22,240 the name back. And that's okay. But if 292 00:10:22,240 --> 00:10:24,240 you've got 14 elements on your page that 293 00:10:24,240 --> 00:10:26,160 all have the ro link and the name play 294 00:10:26,160 --> 00:10:27,680 episode and they all play different 295 00:10:27,680 --> 00:10:30,320 episodes, then that's a mess, right? A 296 00:10:30,320 --> 00:10:31,519 screen reader can't tell what's going to 297 00:10:31,519 --> 00:10:32,880 go on. A user doesn't know what 298 00:10:32,880 --> 00:10:34,000 episode's going to play. It's an 299 00:10:34,000 --> 00:10:36,000 accessibility issue. 300 00:10:36,000 --> 00:10:39,200 Okay? So, use roles. 301 00:10:39,200 --> 00:10:41,120 Uh on top of this we also use like 302 00:10:41,120 --> 00:10:43,040 accessibility like explicit 303 00:10:43,040 --> 00:10:45,120 accessibility tests and these usually 304 00:10:45,120 --> 00:10:47,040 are based on this library called axe 305 00:10:47,040 --> 00:10:49,279 core which again comes from DQ the same 306 00:10:49,279 --> 00:10:51,200 DQ they brought us the um linting 307 00:10:51,200 --> 00:10:53,120 plugin. Uh they build a bunch of 308 00:10:53,120 --> 00:10:54,880 different accessibility tools. They're 309 00:10:54,880 --> 00:10:58,320 very helpful. So, Axecore is an 310 00:10:58,320 --> 00:11:01,120 accessibility engine, which means that 311 00:11:01,120 --> 00:11:03,040 it's basically a list of all of the 312 00:11:03,040 --> 00:11:06,000 WUKAG recommendations for accessibility 313 00:11:06,000 --> 00:11:09,120 and like how to test whether your code 314 00:11:09,120 --> 00:11:11,360 passes that particular recommendation or 315 00:11:11,360 --> 00:11:12,720 not. So, it's just going to go through 316 00:11:12,720 --> 00:11:14,160 your code and check it against every 317 00:11:14,160 --> 00:11:15,920 recommendation that it can in that 318 00:11:15,920 --> 00:11:17,680 environment. 319 00:11:17,680 --> 00:11:19,680 Um, you don't generally use Axecore on 320 00:11:19,680 --> 00:11:21,120 its own. You're going to use like a 321 00:11:21,120 --> 00:11:22,720 wrapper on top of it for your particular 322 00:11:22,720 --> 00:11:25,440 test runner. So for instance, we use 323 00:11:25,440 --> 00:11:27,279 justest test. So we use justest axe and 324 00:11:27,279 --> 00:11:29,040 we use playwright tests via axe 325 00:11:29,040 --> 00:11:31,279 core/playright. 326 00:11:31,279 --> 00:11:33,839 A just test looks like this. You're 327 00:11:33,839 --> 00:11:36,399 going to import axe and to have no 328 00:11:36,399 --> 00:11:38,640 violations. And you need to add to have 329 00:11:38,640 --> 00:11:41,440 no violations to your expects. Um you're 330 00:11:41,440 --> 00:11:42,560 not going to do this in every single 331 00:11:42,560 --> 00:11:44,240 test. You would just do it once in your 332 00:11:44,240 --> 00:11:46,320 test setup file, but um it's a slide. 333 00:11:46,320 --> 00:11:49,360 There's not much space. 334 00:11:49,360 --> 00:11:50,560 And then you're going to run your test. 335 00:11:50,560 --> 00:11:52,240 So the first thing you want to do is 336 00:11:52,240 --> 00:11:54,160 you're going to do in any test is render 337 00:11:54,160 --> 00:11:56,160 the components. Um in this particular 338 00:11:56,160 --> 00:11:58,399 case we're using testing library um with 339 00:11:58,399 --> 00:12:00,160 its render method but this will work 340 00:12:00,160 --> 00:12:03,680 with anything that produces HTML. So if 341 00:12:03,680 --> 00:12:06,320 you're using enzyme uh add that to the 342 00:12:06,320 --> 00:12:07,600 list of reasons why you should stop 343 00:12:07,600 --> 00:12:10,079 using enzyme. Um but yeah anything that 344 00:12:10,079 --> 00:12:12,639 renders HTML will work here and then you 345 00:12:12,639 --> 00:12:14,160 can pass that into act and it will check 346 00:12:14,160 --> 00:12:16,720 for violations. 347 00:12:16,720 --> 00:12:19,440 Similarly, uh for a playwright test, we 348 00:12:19,440 --> 00:12:21,440 are going to import this time it's axe 349 00:12:21,440 --> 00:12:22,560 builder. Well, I mean it's a default 350 00:12:22,560 --> 00:12:23,760 import. You could call it whatever you 351 00:12:23,760 --> 00:12:26,880 wanted. Um but it is a constructor. So, 352 00:12:26,880 --> 00:12:30,000 it's going to have a capital letter. 353 00:12:30,000 --> 00:12:31,279 Uh then you're going to navigate to your 354 00:12:31,279 --> 00:12:33,279 page, pass the page into ax builder and 355 00:12:33,279 --> 00:12:35,360 get it to analyze it and it will return 356 00:12:35,360 --> 00:12:37,120 a list of violations that you can then 357 00:12:37,120 --> 00:12:39,920 check. So you might be wondering why do 358 00:12:39,920 --> 00:12:41,360 the playright tests when we already do 359 00:12:41,360 --> 00:12:43,279 the gest tests and the answer is that 360 00:12:43,279 --> 00:12:45,360 the playright tests have more context so 361 00:12:45,360 --> 00:12:47,360 they can pick up more violations. So for 362 00:12:47,360 --> 00:12:49,040 instance the playright test renders the 363 00:12:49,040 --> 00:12:50,800 entire page. It can check things like 364 00:12:50,800 --> 00:12:54,639 heading structure. Um also just uh uses 365 00:12:54,639 --> 00:12:57,760 just DOM to render the the um actual 366 00:12:57,760 --> 00:13:00,639 HTML. It doesn't render any CSS. So you 367 00:13:00,639 --> 00:13:02,240 can't check things like color contrast 368 00:13:02,240 --> 00:13:04,000 with the tests but you can check them 369 00:13:04,000 --> 00:13:05,760 with the playwright tests. So I'd highly 370 00:13:05,760 --> 00:13:06,959 recommend both. I mean, I guess you 371 00:13:06,959 --> 00:13:08,240 could just use the playright test, but 372 00:13:08,240 --> 00:13:11,440 that's a very slow feedback loop. 373 00:13:11,440 --> 00:13:13,360 Um, so this works great, picks up lots 374 00:13:13,360 --> 00:13:14,959 of violations. The downside though is 375 00:13:14,959 --> 00:13:16,720 that you have to rely on developers 376 00:13:16,720 --> 00:13:19,839 remembering to add these tests in, which 377 00:13:19,839 --> 00:13:21,680 I don't know if you've met developers, 378 00:13:21,680 --> 00:13:25,440 but not reliable. Uh, so to fix that 379 00:13:25,440 --> 00:13:27,680 problem, we've actually built our own 380 00:13:27,680 --> 00:13:30,480 little tool called 381 00:13:30,480 --> 00:13:33,600 Auto Alley, um, which automates adding 382 00:13:33,600 --> 00:13:35,920 the accessibility tests. So we don't 383 00:13:35,920 --> 00:13:37,680 need to remember to do it at all. Uh 384 00:13:37,680 --> 00:13:39,519 this tool is another one that is just 385 00:13:39,519 --> 00:13:41,600 sort of internal because it's hooked 386 00:13:41,600 --> 00:13:44,000 into our repos and stuff. But the core 387 00:13:44,000 --> 00:13:46,880 of this utility is basically just this 388 00:13:46,880 --> 00:13:48,959 in the just setup file. It runs an after 389 00:13:48,959 --> 00:13:52,079 each which says is this accessible? Um 390 00:13:52,079 --> 00:13:53,600 so if you wanted to build that for 391 00:13:53,600 --> 00:13:55,360 yourself 392 00:13:55,360 --> 00:13:58,000 that's that's it. We've added a couple 393 00:13:58,000 --> 00:14:00,399 of different things to the utility uh so 394 00:14:00,399 --> 00:14:02,320 that you can exclude files like because 395 00:14:02,320 --> 00:14:03,279 when you first start out there's going 396 00:14:03,279 --> 00:14:04,560 to be a lot of violations. Obviously, 397 00:14:04,560 --> 00:14:06,160 you need to deal with them gradually. 398 00:14:06,160 --> 00:14:09,760 Um, and also to um make it so that you 399 00:14:09,760 --> 00:14:11,040 don't have to run this against every 400 00:14:11,040 --> 00:14:12,880 single test, every single test run 401 00:14:12,880 --> 00:14:14,560 because it does add a little bit of time 402 00:14:14,560 --> 00:14:18,959 to your tests. Um, but yeah, that's been 403 00:14:18,959 --> 00:14:21,199 working well for us. 404 00:14:21,199 --> 00:14:23,279 So, between uh all of these different 405 00:14:23,279 --> 00:14:24,720 tools and one other that I'll talk about 406 00:14:24,720 --> 00:14:27,600 a bit later, we calculate that we are 407 00:14:27,600 --> 00:14:30,560 picking up 98% of violations that can be 408 00:14:30,560 --> 00:14:33,440 picked up with automated testing. 409 00:14:33,440 --> 00:14:35,680 Um the way that we measure that is that 410 00:14:35,680 --> 00:14:37,839 we release our code and then we do 411 00:14:37,839 --> 00:14:39,519 manual testing and then we go through 412 00:14:39,519 --> 00:14:41,120 the violations that come from the manual 413 00:14:41,120 --> 00:14:43,199 testing and we check which of them could 414 00:14:43,199 --> 00:14:45,199 have been picked up by automated 415 00:14:45,199 --> 00:14:46,720 testing. And at this point we think 416 00:14:46,720 --> 00:14:48,959 we're catching most of them which of 417 00:14:48,959 --> 00:14:51,360 course raises the question 418 00:14:51,360 --> 00:14:53,519 how much how many v how what percentage 419 00:14:53,519 --> 00:14:55,199 of violations can be picked up by 420 00:14:55,199 --> 00:14:57,199 automated testing versus what needs to 421 00:14:57,199 --> 00:15:00,000 go via manual testing. Um and the answer 422 00:15:00,000 --> 00:15:03,040 is about half. So DQ, who we spoke about 423 00:15:03,040 --> 00:15:04,800 earlier, released a study last year 424 00:15:04,800 --> 00:15:06,800 where they found that their tools could 425 00:15:06,800 --> 00:15:10,000 pick up about 57% of violations via 426 00:15:10,000 --> 00:15:11,680 automated testing. And you can imagine 427 00:15:11,680 --> 00:15:13,440 it's a company doing a study on their 428 00:15:13,440 --> 00:15:15,440 own tools. So that's going to be the 429 00:15:15,440 --> 00:15:17,920 very upper limit of what is possible. So 430 00:15:17,920 --> 00:15:19,600 about half of things can be picked up 431 00:15:19,600 --> 00:15:22,000 with automated testing. And the reason 432 00:15:22,000 --> 00:15:24,240 for that is that accessibility testing 433 00:15:24,240 --> 00:15:27,519 relies very heavily on context. 434 00:15:27,519 --> 00:15:29,519 So, as an example of a couple of things 435 00:15:29,519 --> 00:15:31,440 that you can't pick up with automated 436 00:15:31,440 --> 00:15:33,279 testing, 437 00:15:33,279 --> 00:15:36,560 um, Wikip recommendation 1.4.11, non-ext 438 00:15:36,560 --> 00:15:38,560 contrast. Uh, you might be familiar 439 00:15:38,560 --> 00:15:40,000 already with the text contrast 440 00:15:40,000 --> 00:15:41,519 recommendation, which is that there 441 00:15:41,519 --> 00:15:42,959 needs to be a minimum contrast between 442 00:15:42,959 --> 00:15:45,120 text and its background. That one's very 443 00:15:45,120 --> 00:15:47,120 easy to automate because you just get 444 00:15:47,120 --> 00:15:48,399 you get your element, you get your 445 00:15:48,399 --> 00:15:49,839 color, you get the background color, you 446 00:15:49,839 --> 00:15:51,519 put them in a contrast checker, and it 447 00:15:51,519 --> 00:15:53,360 tells you. 448 00:15:53,360 --> 00:15:55,360 Non-ext contrast though is dealing with 449 00:15:55,360 --> 00:15:56,800 images. 450 00:15:56,800 --> 00:16:00,160 So what are you comparing right? What is 451 00:16:00,160 --> 00:16:02,959 the thing that is the thing in the 452 00:16:02,959 --> 00:16:04,720 picture and what what's the background 453 00:16:04,720 --> 00:16:06,399 like the automated tools don't know how 454 00:16:06,399 --> 00:16:09,040 to tell that so you need a human to 455 00:16:09,040 --> 00:16:11,600 figure that out. Another example is 456 00:16:11,600 --> 00:16:14,639 2.1.1 keyboard which basically says if 457 00:16:14,639 --> 00:16:15,680 you can do it with a mouse you should be 458 00:16:15,680 --> 00:16:17,199 able to do it with a keyboard as well. 459 00:16:17,199 --> 00:16:19,279 Again, it's very easy to automate a 460 00:16:19,279 --> 00:16:20,959 check that says if there's a click 461 00:16:20,959 --> 00:16:22,480 handler, make sure there's a key down 462 00:16:22,480 --> 00:16:25,199 handler, but that's generally not 463 00:16:25,199 --> 00:16:26,320 sufficient, right? You don't know 464 00:16:26,320 --> 00:16:27,759 whether the two things do the same 465 00:16:27,759 --> 00:16:29,519 thing. And often when you're building 466 00:16:29,519 --> 00:16:33,600 complex um UIs, the mouse and the 467 00:16:33,600 --> 00:16:35,519 keyboard interactions aren't onetoone 468 00:16:35,519 --> 00:16:37,360 like that. So, for instance, if you're 469 00:16:37,360 --> 00:16:40,160 building a drag and drop interface, then 470 00:16:40,160 --> 00:16:41,920 the mouse interaction is like a mouse 471 00:16:41,920 --> 00:16:44,720 down and then a drag. the keyboard 472 00:16:44,720 --> 00:16:46,000 interaction is probably something 473 00:16:46,000 --> 00:16:47,920 entirely different. It might be like 474 00:16:47,920 --> 00:16:50,160 clicking on a menu and selecting shift 475 00:16:50,160 --> 00:16:52,000 up and shift down or it might be some 476 00:16:52,000 --> 00:16:54,320 different kind of keyboard um shortcuts. 477 00:16:54,320 --> 00:16:55,839 So there's not that onetoone contrast. 478 00:16:55,839 --> 00:16:57,199 It's not something you can easily pick 479 00:16:57,199 --> 00:16:59,839 up or even not easily pick up with 480 00:16:59,839 --> 00:17:01,920 automated testing. 481 00:17:01,920 --> 00:17:04,959 Uh and the final example is 3.3.3 482 00:17:04,959 --> 00:17:06,959 error suggestion. So this one says that 483 00:17:06,959 --> 00:17:09,199 if a user makes an error, if they do 484 00:17:09,199 --> 00:17:11,760 something that causes an error and you 485 00:17:11,760 --> 00:17:13,919 know what they need to do to fix it, 486 00:17:13,919 --> 00:17:16,559 then you have to tell them. Again, it's 487 00:17:16,559 --> 00:17:18,319 very easy to automate a check that says, 488 00:17:18,319 --> 00:17:20,559 "Do you create an error?" It's very hard 489 00:17:20,559 --> 00:17:22,160 to make sure that it it says the right 490 00:17:22,160 --> 00:17:25,520 thing, right? So all of these things are 491 00:17:25,520 --> 00:17:28,000 things that AI can probably help with, 492 00:17:28,000 --> 00:17:29,600 but the tooling certainly isn't there 493 00:17:29,600 --> 00:17:31,440 right now, and it's unlikely to sort of 494 00:17:31,440 --> 00:17:33,679 be doing it on its own. It's more like 495 00:17:33,679 --> 00:17:36,640 it can help a human do it. 496 00:17:36,640 --> 00:17:38,880 So we also need manual accessibility 497 00:17:38,880 --> 00:17:41,760 testing. Uh at at Lassian that looks 498 00:17:41,760 --> 00:17:43,600 like an internal team. We have an 499 00:17:43,600 --> 00:17:45,520 internal team that do this this uh these 500 00:17:45,520 --> 00:17:47,200 audits for us. You finish a feature, you 501 00:17:47,200 --> 00:17:48,480 request an audit, they go through and do 502 00:17:48,480 --> 00:17:49,840 the testing and they give you a list of 503 00:17:49,840 --> 00:17:52,559 violations. On the off chance that you 504 00:17:52,559 --> 00:17:54,000 don't have an entire team to get 505 00:17:54,000 --> 00:17:56,080 dedicated to this at your company, you 506 00:17:56,080 --> 00:17:57,760 can get an external consultancy who will 507 00:17:57,760 --> 00:17:59,600 come in and and run these audits for 508 00:17:59,600 --> 00:18:03,679 you. Um, that's just a question of like 509 00:18:03,679 --> 00:18:06,960 money. I guess the tricky thing though 510 00:18:06,960 --> 00:18:08,880 is dealing with the list of violations 511 00:18:08,880 --> 00:18:11,440 that come back. Like even at Alassian, 512 00:18:11,440 --> 00:18:13,039 these these audits aren't blocking, 513 00:18:13,039 --> 00:18:14,880 right? The code goes to production and 514 00:18:14,880 --> 00:18:16,640 then the audit happens and then you get 515 00:18:16,640 --> 00:18:18,640 back a list of violations which you then 516 00:18:18,640 --> 00:18:20,640 have to convince developers to go back 517 00:18:20,640 --> 00:18:22,720 and fix in code that is already in 518 00:18:22,720 --> 00:18:23,760 production and they're like, you know, 519 00:18:23,760 --> 00:18:25,679 they're finished with it. So, you need a 520 00:18:25,679 --> 00:18:27,600 system to make sure that these these 521 00:18:27,600 --> 00:18:30,160 issues get dealt with. At Atlassian, we 522 00:18:30,160 --> 00:18:31,440 use something called an external work 523 00:18:31,440 --> 00:18:34,240 order request, which is just the same 524 00:18:34,240 --> 00:18:36,880 system that we use for any team asking 525 00:18:36,880 --> 00:18:39,200 another team to do some work. So, it's 526 00:18:39,200 --> 00:18:41,840 the system that the security team uses 527 00:18:41,840 --> 00:18:43,440 when they want to ask your team to fix a 528 00:18:43,440 --> 00:18:45,520 security violation. It's the team that 529 00:18:45,520 --> 00:18:47,200 the platform it's the system that the 530 00:18:47,200 --> 00:18:48,640 platform team uses when they want to ask 531 00:18:48,640 --> 00:18:50,640 you to upgrade a library. Um, and it's 532 00:18:50,640 --> 00:18:52,720 the same system that any sort of team if 533 00:18:52,720 --> 00:18:54,080 they're like using your code and they 534 00:18:54,080 --> 00:18:55,679 want you to make a change, they they 535 00:18:55,679 --> 00:18:58,080 will use this same system. Um, it's 536 00:18:58,080 --> 00:19:00,000 basically a cheer ticket that has a 537 00:19:00,000 --> 00:19:02,400 priority and a deadline on it, which 538 00:19:02,400 --> 00:19:04,160 means that teams can then just put it 539 00:19:04,160 --> 00:19:06,400 into their general backlog and they can 540 00:19:06,400 --> 00:19:08,400 easily prioritize it against their other 541 00:19:08,400 --> 00:19:10,320 work. Um, and it also has built-in 542 00:19:10,320 --> 00:19:12,000 consequences. Like if you don't meet the 543 00:19:12,000 --> 00:19:13,919 deadline, then your your manager is 544 00:19:13,919 --> 00:19:15,760 going to get notified and if you still 545 00:19:15,760 --> 00:19:17,360 don't, their manager will get notified 546 00:19:17,360 --> 00:19:19,600 and like eventually Mike Cannon Brooks 547 00:19:19,600 --> 00:19:21,600 comes in and yells at you and like no 548 00:19:21,600 --> 00:19:23,200 one wants that, right? He's he's a busy 549 00:19:23,200 --> 00:19:24,480 man. He's got better things to do with 550 00:19:24,480 --> 00:19:26,720 his time. 551 00:19:26,720 --> 00:19:28,240 The point here though is that you need 552 00:19:28,240 --> 00:19:31,120 to find a way to make accessibility work 553 00:19:31,120 --> 00:19:33,600 with your existing systems. You need to 554 00:19:33,600 --> 00:19:35,440 make it as easy as possible for people 555 00:19:35,440 --> 00:19:37,200 to just treat it like all of their other 556 00:19:37,200 --> 00:19:39,120 work. And you need to make it as hard as 557 00:19:39,120 --> 00:19:43,640 possible for them to just ignore it. 558 00:19:44,720 --> 00:19:47,440 All right. So one final thing that we do 559 00:19:47,440 --> 00:19:50,320 on top of this is um this alley scan 560 00:19:50,320 --> 00:19:51,840 pipeline. 561 00:19:51,840 --> 00:19:53,600 So this is a pipeline that we have that 562 00:19:53,600 --> 00:19:56,640 runs once a day. Um, and it does a bunch 563 00:19:56,640 --> 00:19:58,480 of different checks. So, it runs our 564 00:19:58,480 --> 00:20:00,799 gest story book and Gemini is visual 565 00:20:00,799 --> 00:20:02,960 regression testing. And then it also 566 00:20:02,960 --> 00:20:05,360 does a bunch of other scans. So, one of 567 00:20:05,360 --> 00:20:08,320 those is that. So, remember that auto 568 00:20:08,320 --> 00:20:09,760 alley thing I told you about that was 569 00:20:09,760 --> 00:20:11,840 really cool. We don't use it for Jira 570 00:20:11,840 --> 00:20:15,694 because Jira is special. 571 00:20:15,694 --> 00:20:17,714 [laughter] 572 00:20:17,919 --> 00:20:19,520 But, uh, we still need a way to make 573 00:20:19,520 --> 00:20:21,840 sure that we have that test coverage. So 574 00:20:21,840 --> 00:20:25,039 our um the bare pipeline part of the 575 00:20:25,039 --> 00:20:26,720 pipeline here runs through and just 576 00:20:26,720 --> 00:20:29,679 basically does a test coverage check and 577 00:20:29,679 --> 00:20:31,440 finds anywhere that the accessibility 578 00:20:31,440 --> 00:20:33,840 testing is missing. Then on top of that 579 00:20:33,840 --> 00:20:35,039 we go through and check all of the 580 00:20:35,039 --> 00:20:37,760 linting rules because each project can 581 00:20:37,760 --> 00:20:40,080 set up their own eslint configuration. 582 00:20:40,080 --> 00:20:41,840 They can turn rules off or set them to 583 00:20:41,840 --> 00:20:43,760 warn if they want to. But this pipeline 584 00:20:43,760 --> 00:20:45,760 scans everything with all of the errors 585 00:20:45,760 --> 00:20:48,400 turned on to error. Um, and then it also 586 00:20:48,400 --> 00:20:51,679 goes through and scans anywhere where a 587 00:20:51,679 --> 00:20:53,919 a linting rule has been disabled in the 588 00:20:53,919 --> 00:20:56,000 code. Um, and we basically just track 589 00:20:56,000 --> 00:20:59,120 all those in S3 and data bricks. And 590 00:20:59,120 --> 00:21:00,880 then the output to those are a number of 591 00:21:00,880 --> 00:21:02,480 different things. So an end health 592 00:21:02,480 --> 00:21:04,799 ticket is one of those external work 593 00:21:04,799 --> 00:21:06,720 order requests I said before. If you uh 594 00:21:06,720 --> 00:21:08,880 are missing test coverage in a Jira 595 00:21:08,880 --> 00:21:11,360 project, then you need to fix that. Um, 596 00:21:11,360 --> 00:21:12,960 the dashboards are I don't know 597 00:21:12,960 --> 00:21:14,720 dashboards. We like to look at stuff. 598 00:21:14,720 --> 00:21:17,120 TechOps is a report that any team that's 599 00:21:17,120 --> 00:21:19,200 on on call in Atlassian gets a does a 600 00:21:19,200 --> 00:21:20,720 tech ops report every week which is 601 00:21:20,720 --> 00:21:22,880 basically an overview of what the 602 00:21:22,880 --> 00:21:24,000 performance of your product's looking 603 00:21:24,000 --> 00:21:25,440 like, what the reliability is looking 604 00:21:25,440 --> 00:21:27,360 like and what your accessibility is 605 00:21:27,360 --> 00:21:28,559 looking like so that it can then be 606 00:21:28,559 --> 00:21:29,919 addressed and is treated the same as 607 00:21:29,919 --> 00:21:31,200 those performance and reliability 608 00:21:31,200 --> 00:21:33,679 metrics. And finally, remediation 609 00:21:33,679 --> 00:21:37,360 factory is um a cool new bit of stuff we 610 00:21:37,360 --> 00:21:39,760 have which is actually an AI agent that 611 00:21:39,760 --> 00:21:41,200 knows how to fix accessibility 612 00:21:41,200 --> 00:21:43,280 violations. So, it's been trained to fix 613 00:21:43,280 --> 00:21:45,760 a very specific subset. It only knows 614 00:21:45,760 --> 00:21:48,400 about like a small number of violations, 615 00:21:48,400 --> 00:21:50,159 but we're very confident that it can fix 616 00:21:50,159 --> 00:21:52,000 those. So, we can now automate fixing, 617 00:21:52,000 --> 00:21:53,520 which to be honest is easier than 618 00:21:53,520 --> 00:21:57,720 automating the audits themselves. 619 00:21:58,080 --> 00:22:00,640 All right. So with all of this in place 620 00:22:00,640 --> 00:22:02,320 over between last quarter and this 621 00:22:02,320 --> 00:22:05,200 quarter we had a 25% reduction in new 622 00:22:05,200 --> 00:22:08,400 accessibility issues and we were awarded 623 00:22:08,400 --> 00:22:10,960 a merit award at the 2026 tech diversity 624 00:22:10,960 --> 00:22:12,400 awards for our work in making things 625 00:22:12,400 --> 00:22:16,159 accessible by default. So I think we're 626 00:22:16,159 --> 00:22:19,039 doing something right at least. 627 00:22:19,039 --> 00:22:20,799 Um and hopefully there's been something 628 00:22:20,799 --> 00:22:23,120 here that you can have also found 629 00:22:23,120 --> 00:22:25,120 helpful. But the key takeaways are going 630 00:22:25,120 --> 00:22:27,679 to be lean into those automated tools, 631 00:22:27,679 --> 00:22:28,640 right? They're going to be your best 632 00:22:28,640 --> 00:22:31,360 bang for buck. Um, and they're going to 633 00:22:31,360 --> 00:22:33,039 be sort of like the most of them are 634 00:22:33,039 --> 00:22:34,400 free as in you don't have to pay for 635 00:22:34,400 --> 00:22:36,480 them and they're very cheap as in it's 636 00:22:36,480 --> 00:22:38,480 very easy to add them to your existing 637 00:22:38,480 --> 00:22:41,039 systems, but they will only get you so 638 00:22:41,039 --> 00:22:43,440 far. So, at some point you're also going 639 00:22:43,440 --> 00:22:46,000 to need some kind of expert input. Um, 640 00:22:46,000 --> 00:22:48,400 you might have to pay for it, but you're 641 00:22:48,400 --> 00:22:49,840 going to need to get someone to do some 642 00:22:49,840 --> 00:22:51,919 kind of manual auditing of your system. 643 00:22:51,919 --> 00:22:53,280 Um, the automated tools won't get you 644 00:22:53,280 --> 00:22:55,520 the whole way there. And finally, once 645 00:22:55,520 --> 00:22:57,280 you have that, you need to find a way to 646 00:22:57,280 --> 00:22:59,039 integrate all of this into your existing 647 00:22:59,039 --> 00:23:00,559 systems, right? You need to make it easy 648 00:23:00,559 --> 00:23:02,320 for people to do accessibility just the 649 00:23:02,320 --> 00:23:03,520 same as they're doing all of their other 650 00:23:03,520 --> 00:23:05,360 day-to-day work and make it hard for 651 00:23:05,360 --> 00:23:07,679 them to ignore it. 652 00:23:07,679 --> 00:23:08,960 All right, that's all I've got. If you 653 00:23:08,960 --> 00:23:10,320 want to play along at home, the slides 654 00:23:10,320 --> 00:23:13,840 are at a1 a1y.z.codes. 655 00:23:13,840 --> 00:23:16,240 Um, and there is a list of all of where 656 00:23:16,240 --> 00:23:17,760 the images came from if you have a 657 00:23:17,760 --> 00:23:20,240 sudden urge to uh go and watch some Star 658 00:23:20,240 --> 00:23:23,681 Trek for some reason. Thank you. 659 00:23:23,681 --> 00:23:25,701 [applause] 660 00:23:28,266 --> 00:23:30,159 [applause] 661 00:23:30,159 --> 00:23:31,679 We have a couple of minutes for 662 00:23:31,679 --> 00:23:35,960 questions if anyone has any. 663 00:23:37,120 --> 00:23:40,520 Okay, Russell, 664 00:23:42,400 --> 00:23:44,640 thanks for the talk. Um, interested in 665 00:23:44,640 --> 00:23:46,640 your thoughts on the intersection 666 00:23:46,640 --> 00:23:49,039 between design systems and things that 667 00:23:49,039 --> 00:23:51,840 browsers already do by default. Um, for 668 00:23:51,840 --> 00:23:53,280 example, you you pointed out the sort of 669 00:23:53,280 --> 00:23:54,880 the the select element that you've got 670 00:23:54,880 --> 00:23:57,440 there. Browsers have select elements and 671 00:23:57,440 --> 00:24:00,080 they do things in accessible ways as 672 00:24:00,080 --> 00:24:01,360 long as the browser is doing the right 673 00:24:01,360 --> 00:24:03,520 thing. And yet a lot of design systems 674 00:24:03,520 --> 00:24:05,200 then say, "Oh, okay. But we're going to 675 00:24:05,200 --> 00:24:07,520 redesign what a select element is and 676 00:24:07,520 --> 00:24:08,880 throws away everything the browser is 677 00:24:08,880 --> 00:24:10,720 giving you for free and the way like the 678 00:24:10,720 --> 00:24:13,039 the the system native appears system 679 00:24:13,039 --> 00:24:15,760 native rendering. 680 00:24:15,760 --> 00:24:17,520 what what's the what case would you make 681 00:24:17,520 --> 00:24:19,760 for using a design system to override or 682 00:24:19,760 --> 00:24:21,200 when do you use that system and how do 683 00:24:21,200 --> 00:24:22,480 you make sure that that thing actually 684 00:24:22,480 --> 00:24:24,240 doesn't isn't a regression in 685 00:24:24,240 --> 00:24:26,000 accessibility for the sake of making 686 00:24:26,000 --> 00:24:27,919 something look pretty. 687 00:24:27,919 --> 00:24:32,320 Um so generally like the the specific 688 00:24:32,320 --> 00:24:33,760 example of selects is up until very 689 00:24:33,760 --> 00:24:35,360 recently they just weren't customizable 690 00:24:35,360 --> 00:24:37,600 at all. Right? So they they're not going 691 00:24:37,600 --> 00:24:39,600 to fit in with the rest of your design. 692 00:24:39,600 --> 00:24:40,640 They're not going to they're not going 693 00:24:40,640 --> 00:24:42,720 to look good. they're not going to give 694 00:24:42,720 --> 00:24:46,400 like a consistent user experience and 695 00:24:46,400 --> 00:24:49,600 most places like that's just 696 00:24:49,600 --> 00:24:51,279 unfortunately the accessibility doesn't 697 00:24:51,279 --> 00:24:53,120 weigh in as much as it should there. But 698 00:24:53,120 --> 00:24:54,960 the advantage of using a design system 699 00:24:54,960 --> 00:24:56,559 means that you can then build this thing 700 00:24:56,559 --> 00:24:58,960 from scratch and make it accessible. And 701 00:24:58,960 --> 00:25:00,640 then when the platform catches up and 702 00:25:00,640 --> 00:25:03,200 the platform introduces customizability 703 00:25:03,200 --> 00:25:05,600 to your selects, you can invisibly fix 704 00:25:05,600 --> 00:25:06,960 that in your design system so that 705 00:25:06,960 --> 00:25:08,640 you're now using the platform and none 706 00:25:08,640 --> 00:25:10,880 of your developers need to need to even 707 00:25:10,880 --> 00:25:12,480 know that that's what's going on, right? 708 00:25:12,480 --> 00:25:14,080 It gives you the ability to have that 709 00:25:14,080 --> 00:25:16,240 consistent interface which then can use 710 00:25:16,240 --> 00:25:18,240 the platform as much as or as little as 711 00:25:18,240 --> 00:25:21,640 is necessary. 712 00:25:22,480 --> 00:25:26,120 Anyone else? Yep. 713 00:25:27,919 --> 00:25:30,240 Hi. Sorry this is slightly off topic but 714 00:25:30,240 --> 00:25:33,520 any tips on um convincing 715 00:25:33,520 --> 00:25:36,080 I guess management on the accessibility 716 00:25:36,080 --> 00:25:38,960 as a concern or importance? 717 00:25:38,960 --> 00:25:40,559 Yeah, improving the accessibility of 718 00:25:40,559 --> 00:25:43,679 your product. um for humans makes it 719 00:25:43,679 --> 00:25:47,837 work better with AI agents. [laughter] 720 00:25:52,559 --> 00:25:56,080 Hi, um I was wondering how uh this is 721 00:25:56,080 --> 00:25:58,400 more a question around documentation. Um 722 00:25:58,400 --> 00:26:00,080 when you have design systems, how do you 723 00:26:00,080 --> 00:26:01,840 go about documenting everything or do 724 00:26:01,840 --> 00:26:03,679 you maintain one source of truth or 725 00:26:03,679 --> 00:26:04,960 yeah, if you have different rules, how 726 00:26:04,960 --> 00:26:07,679 do you typically manage that? Um so like 727 00:26:07,679 --> 00:26:09,679 in terms of 728 00:26:09,679 --> 00:26:11,760 it's more on the design side I think. Um 729 00:26:11,760 --> 00:26:13,679 like that page is available for all of 730 00:26:13,679 --> 00:26:15,200 our how all of our things are documented 731 00:26:15,200 --> 00:26:16,480 from a developer point of view. You can 732 00:26:16,480 --> 00:26:18,240 have a look at alassian.design. It's all 733 00:26:18,240 --> 00:26:23,440 there. Um in terms of like 734 00:26:23,440 --> 00:26:24,880 what what particular part of the 735 00:26:24,880 --> 00:26:27,679 documentation are you? 736 00:26:27,679 --> 00:26:30,559 Oh, just um 737 00:26:30,559 --> 00:26:32,480 I guess in general of like if you have 738 00:26:32,480 --> 00:26:35,360 this particular component and um all the 739 00:26:35,360 --> 00:26:37,039 rules surrounding that. I'm assuming you 740 00:26:37,039 --> 00:26:38,559 would have it on a page in your 741 00:26:38,559 --> 00:26:40,480 documentation on that website and also 742 00:26:40,480 --> 00:26:42,080 maybe in skills and stuff like that. 743 00:26:42,080 --> 00:26:43,520 So there's there's the page there that 744 00:26:43,520 --> 00:26:44,960 has everything like how the component 745 00:26:44,960 --> 00:26:46,480 works and how you should use it. Um 746 00:26:46,480 --> 00:26:48,159 there's the linting rules attached to it 747 00:26:48,159 --> 00:26:50,880 as well. Uh and then we also have like 748 00:26:50,880 --> 00:26:52,960 on the design side of things in Figma, 749 00:26:52,960 --> 00:26:54,480 they have the whole design system with 750 00:26:54,480 --> 00:26:56,240 all like the design language and all of 751 00:26:56,240 --> 00:26:58,640 those design rules there. Um and then we 752 00:26:58,640 --> 00:27:00,960 also have the set of skills for the the 753 00:27:00,960 --> 00:27:03,039 agents to go and to check everything for 754 00:27:03,039 --> 00:27:06,000 us. 755 00:27:06,000 --> 00:27:07,520 Okay, 756 00:27:07,520 --> 00:27:11,440 last chance while I walk to the front. 757 00:27:11,440 --> 00:27:13,840 Okay. Well, please put your hands 758 00:27:13,840 --> 00:27:16,159 together for I will get her name right. 759 00:27:16,159 --> 00:27:18,828 Erin 760 00:27:18,828 --> 00:27:20,848 [applause] 761 00:27:23,039 --> 00:27:25,360 and as a thank you for giving the speech 762 00:27:25,360 --> 00:27:28,880 at Pyon AU 2026, here is your speaker 763 00:27:28,880 --> 00:27:29,679 gift. Ah, 764 00:27:29,679 --> 00:27:32,638 thank you. [applause] 765 00:27:33,440 --> 00:27:36,440 Okay.