WEBVTT NOTE Sentence-level transcript of https://www.youtube.com/watch?v=ZccJsdOE54M NOTE One cue per sentence. Cue ids are the line anchors on /transcripts/ZccJsdOE54M.html. A cue ends where the next begins, or 2 s after its last word. s1 00:00:00.000 --> 00:00:09.360 Hi all, my name is Rima, and I'm going to be talking to you about the cost of accessibility in AI, or as I like to call it, stop wasting tokens on building products that people can't use. s2 00:00:09.360 --> 00:00:11.520 Because at the end of the day, what is accessibility? s3 00:00:11.520 --> 00:00:16.560 Accessibility is the quality of being able to be used by anyone regardless of disability. s4 00:00:16.560 --> 00:00:23.200 So, what this means is that when you build a product that is inaccessible, that product is inherently useless because people cannot use it. s5 00:00:23.200 --> 00:00:30.000 I think this is a very prevalent talk, especially in these days of vibe coding and prompt engineering and AI basically writing all the code for us. s6 00:00:30.000 --> 00:00:38.240 We need to ensure that even with all the code being written by AI, we're still building for humans, and we're ensuring that humans are able to use the products that we are building. s7 00:00:38.240 --> 00:00:44.720 It's all very well and good to vibe good five different apps in one day, but if people can't use those apps, then is there really any point? s8 00:00:44.720 --> 00:00:52.320 A study by WebAIM shows that 96% of the homepages of the top 1 million websites in the world have some form of accessibility issue or another. s9 00:00:52.320 --> 00:00:59.800 Now, I'm someone that goes around a lot and speaks about accessibility, and whenever I ask why don't people build websites to be accessible, I usually hear it takes too long. s10 00:00:59.800 --> 00:01:08.720 While I will agree that accessibility is a labor and time-intensive process, I do think that now that we're at the stage of AI writing most of our code, it's actually easier to make things accessible. s11 00:01:08.720 --> 00:01:14.120 If anything, I would say it costs more time and more money to build inaccessible websites. s12 00:01:14.120 --> 00:01:17.360 So, I decided to carry out a little experiment using the code base at work. s13 00:01:17.360 --> 00:01:18.760 So, I gave this prompt to the agents. s14 00:01:18.760 --> 00:01:22.480 It's just a simple prompt with no guidelines, implement this design from Figma. s15 00:01:22.480 --> 00:01:23.360 And they ran it twice. s16 00:01:23.360 --> 00:01:27.440 The first time without any accessibility skill, and the second time by using the skill that I had written. s17 00:01:27.440 --> 00:01:36.400 And what I noticed was that not only was it faster for the agent to build the accessible skill, but there was also a 58% reduction in cost when using that skill. s18 00:01:36.400 --> 00:01:37.800 And we can take a look at the data here. s19 00:01:37.800 --> 00:01:43.960 We see that not only was it cheaper, but it also took a third of the time to finish the prompt while using the accessibility skill. s20 00:01:43.960 --> 00:01:48.720 So, in conclusion, we can't say that it is actually cheaper for AI agents to build accessible websites. s21 00:01:48.720 --> 00:02:01.920 We can't say that, but we won't say that because this was a one-off experiment, and it was not carried out in a constrained environment, so it cannot serve as empirical data that proves the of But, when we look into the reasons why it took the AI agent much longer to carry out the prompts without any accessibility skills, s22 00:02:01.920 --> 00:02:06.960 then we can have a better idea of why exactly it is faster to build accessible websites. s23 00:02:06.960 --> 00:02:09.520 But, before we get into that, hi, my name is Joreima Abu. s24 00:02:09.520 --> 00:02:12.640 I am a product engineer at Case and an alternative investment platform. s25 00:02:12.640 --> 00:02:17.680 I'm also a Google Dev Expert, a Microsoft MVP, and a certified professional in accessibility core competencies. s26 00:02:17.680 --> 00:02:21.560 Basically, I like to go around talking about how to make the web a more accessible place. s27 00:02:21.560 --> 00:02:23.000 Also, I will give a slight disclaimer. s28 00:02:23.000 --> 00:02:33.320 While a lot of my examples relating to accessibility will be web-based because that is my area of expertise, this can also apply regardless of whatever platform you're working on, whether that's mobile or hardware or anything at all. s29 00:02:33.320 --> 00:02:35.320 So, let's get back to it. s30 00:02:35.320 --> 00:02:36.920 This is your AI agent. s31 00:02:36.920 --> 00:02:42.200 Now, it's a super intelligent tool that can do almost anything in the world, but at the same time, it's just 3 years old. s32 00:02:42.200 --> 00:02:44.680 And much like a baby, AI is very impressionable. s33 00:02:44.680 --> 00:02:49.080 If you tell it enough times that the sky is red, eventually it will start to accept that the sky is red. s34 00:02:49.080 --> 00:02:58.680 What this means is as the responsible developers in charge, we have to make sure that we're providing the right skills and guidance for AI agents to build the product that we want them to build. s35 00:02:58.680 --> 00:03:01.080 There's a Japanese show on Netflix that I love called Old Enough. s36 00:03:01.080 --> 00:03:03.760 It's basically about toddlers being sent on their first errand. s37 00:03:03.760 --> 00:03:06.840 It can be like a 3-year-old being sent to a supermarket to purchase groceries. s38 00:03:06.840 --> 00:03:12.600 And one thing I like about the show is that you can always see the steps that the parents have put in place before they send them on that first errand. s39 00:03:12.600 --> 00:03:23.000 So, it could be that the child has gone with their parents to the supermarket multiple times, or they provide a list that's very clearly detailed that shows them where the supermarket is, what they need to get there, what paths to avoid, s40 00:03:23.000 --> 00:03:26.840 and it basically makes it a lot easier for the child to carry out that errand. s41 00:03:26.840 --> 00:03:27.959 It's the same thing with an agent. s42 00:03:27.959 --> 00:03:35.800 When you're given an instruction to an agent, if I'm saying build this webpage or implement this design, if I provide the right skills and prompts, it makes it a lot easier s43 00:03:35.800 --> 00:03:41.880 for that agent to avoid going down the wrong path and for the finished product to look like what I intended it to look like. s44 00:03:41.880 --> 00:03:46.560 So, let's take a look at what happens when we don't provide any form of guidance for our agents in developing products. s45 00:03:46.560 --> 00:03:49.200 Firstly, human bias becomes AI bias. s46 00:03:49.200 --> 00:03:54.120 For years, humans have been developing websites or products that are inaccessible because frankly we just don't think that way. s47 00:03:54.120 --> 00:03:57.120 Especially as developers, we tend to have a it works for me mindset. s48 00:03:57.120 --> 00:04:01.680 So I'm like this thing works on my laptop and it works the way I intended it to work and I'm not going to check anything else. s49 00:04:01.680 --> 00:04:06.120 I don't concern myself with if it works for screen readers or if it works in low light environments. s50 00:04:06.120 --> 00:04:07.800 I'm just like it works, it's built, I'm done. s51 00:04:07.800 --> 00:04:16.400 Whenever you build like that or if you have a code base that reflects that kind of mentality, once you put an AI agent in that code base, it's going to absorb all your biases. s52 00:04:16.400 --> 00:04:20.680 It's going to say, "Oh, we don't need to make these things accessible because that has not that been mentioned in the past. s53 00:04:20.680 --> 00:04:22.320 So I'm just going to build things anyhow." s54 00:04:22.320 --> 00:04:31.200 And then the more you use that AI agent to generate codes, the more you build a code base that is inherently inaccessible because accessibility was never constraint in the first place. s55 00:04:31.200 --> 00:04:36.960 Secondly, and this is something that I really noticed in the experiment, AI tends to default to a lot of verbose code. s56 00:04:36.960 --> 00:04:42.800 If you don't provide any particular prompt or guidelines for your agent, it will reinvent the wheel as many times as it wants to. s57 00:04:42.800 --> 00:04:51.000 So even if you tell it just build a simple accordion component or build a modal component, it's not going to bother checking is there already an existing semantic elements s58 00:04:51.000 --> 00:04:52.600 that can give me the same functionality? s59 00:04:52.600 --> 00:04:53.840 It's just going to build one from scratch. s60 00:04:53.840 --> 00:04:55.560 AI loves to write code. s61 00:04:55.560 --> 00:04:58.560 So it'll go off and write as many things as it wants. s62 00:04:58.560 --> 00:05:06.520 And as you can see here, if you are trying to recreate a semantic element, it takes a lot more time and effort because number one, you have to carry out a lot more testing, s63 00:05:06.520 --> 00:05:12.160 you have to implement a lot more features to replicate the native functionality, and it's just a very cumbersome process. s64 00:05:12.160 --> 00:05:16.120 So these are some of the things that you want to ensure you're focusing on when you're providing prompts to your agent. s65 00:05:16.120 --> 00:05:19.760 I saw an analogy once that said an accessible website is like a blueberry muffin. s66 00:05:19.760 --> 00:05:26.200 If someone hands you a plain muffin that they've shoved a bunch of blueberries on, similar to the picture on the right, that's not a blueberry muffin. s67 00:05:26.200 --> 00:05:31.040 For it to be a proper blueberry muffin like the one on the left, then the blueberries need to have been baked in from the start. s68 00:05:31.040 --> 00:05:32.680 It's the same thing with an accessible website. s69 00:05:32.680 --> 00:05:39.480 If you have a fully built website and then once it's done, you start shoving in area labels in different places, that is not an accessible website. s70 00:05:39.480 --> 00:05:44.760 For it to be an accessible website, you need to put accessibility at the forefront at every build process. s71 00:05:44.760 --> 00:05:48.760 And this does not just apply to developers, accessibility is the responsibility of everyone. s72 00:05:48.760 --> 00:05:59.240 So, you want to make sure that even from the business idea to design to QA, that we're ensuring that we're looking for accessibility and testing that can this product be used by everyone in the exact same way. s73 00:05:59.240 --> 00:06:03.600 And that issue with waiting till the end to consider accessibility is that you waste a lot of time on regressive testing. s74 00:06:03.600 --> 00:06:14.120 So, if you've waited until your website is fully built and then you start testing and going back to fix issues, you end up refactoring and rewriting a lot more code than you'd have had to do if you don't build it to be accessible from the start. s75 00:06:14.120 --> 00:06:18.000 And then of course, there are business consequences to building inaccessible products. s76 00:06:18.000 --> 00:06:24.320 The thing I hear sometimes is that a business might say, "Oh, but we don't have to consider accessibility because none of our users rely on assistive technologies." s77 00:06:24.320 --> 00:06:27.919 And I think that's very funny because it's sort of a self-fulfilling prophecy. s78 00:06:27.919 --> 00:06:35.960 It's not that your users don't rely on assistive technologies, it's that people with assistive technologies cannot use your website in the first place, so they just never go to it. s79 00:06:35.960 --> 00:06:38.040 Imagine a business that didn't have a door. s80 00:06:38.040 --> 00:06:39.240 You would never get any customers. s81 00:06:39.240 --> 00:06:40.440 How would they get in the building? s82 00:06:40.440 --> 00:06:42.400 It's the same thing with building an inaccessible product. s83 00:06:42.400 --> 00:06:45.880 If you build a product that people cannot use, then people will not use it. s84 00:06:45.880 --> 00:06:49.600 And then finally, there are legal repercussions to not making your website accessible. s85 00:06:49.600 --> 00:06:58.440 In the United States, the Americans with Disabilities Act states that any public-facing products must be accessible and can be used by people with disabilities, or you could face fines and even lawsuits. s86 00:06:58.440 --> 00:07:03.600 But on the plus side, you could get to use this really cute sticker on Microsoft Teams, so you know, weigh your options. s87 00:07:03.600 --> 00:07:08.680 Based on all this, we can see that it actually is a lot more expensive to be building products that aren't accessible. s88 00:07:08.680 --> 00:07:16.800 You're exposing yourself to losing money from customers, possible lawsuits where you have to pay fines, you're spending more time building code and refactoring things. s89 00:07:16.800 --> 00:07:22.480 So, if you do build your product to be accessible from the start, it's going to be a lot faster and a lot cheaper. s90 00:07:22.480 --> 00:07:27.760 So, now that we know all that, how can we actually ensure that our AI agents are building things to be accessible? s91 00:07:27.760 --> 00:07:36.520 Because everyone's code base is different and we can be working with different technologies, I'm just going to give an overarching general view of how to get your AI agents to produce accessible code. s92 00:07:36.520 --> 00:07:38.840 So firstly, you need to define your accessibility requirements. s93 00:07:38.840 --> 00:07:42.200 Accessibility requirements differ based on what platform you're working on. s94 00:07:42.200 --> 00:07:50.080 So, you do need to carry out research and ensure that you know what accessibility requirements you're supposed to be meeting for the platform you are building for. s95 00:07:50.080 --> 00:07:51.960 Once that's done, you need to audit your existing code base. s96 00:07:51.960 --> 00:08:01.240 So, if you're going to introduce an AI agent into your code base, you need to ensure that you don't have any pre-existing issues that the AI agent might copy as what it thinks is best behavior. s97 00:08:01.240 --> 00:08:06.240 So, you can use automated tools to carry out accessibility testing, or you can even tell your AI agent to do it. s98 00:08:06.240 --> 00:08:11.240 But, you want to identify any existing issues and then fix them before you start writing new features. s99 00:08:11.240 --> 00:08:14.440 Then, you want to implement some sort of reusable system. s100 00:08:14.440 --> 00:08:26.200 This is a very nice to have, but basically, if you're going to work with accessibility, it's a lot easier to fix things in one component that is used in multiple places as opposed to making fixes to the same components across different files. s101 00:08:26.200 --> 00:08:34.080 So, just having an implemented design system or any form of reusable component library is going to save you a lot more time in the long run when making things accessible. s102 00:08:34.080 --> 00:08:38.080 And then finally, you want to enforce a mandatory accessibility skill. s103 00:08:38.080 --> 00:08:45.880 This is a skill that your AI agents will basically use anytime you're running anything related to maybe generating UI or writing code that requires accessibility. s104 00:08:45.880 --> 00:08:48.800 One skill that I really like to use is the Modern Web Guidance skill from Chrome. s105 00:08:48.800 --> 00:08:55.400 It's basically a skill that ensures that your agent is using the newest HTML and CSS features as opposed to custom JavaScript implementations. s106 00:08:55.400 --> 00:08:57.520 You can also have a lightweight version of an accessibility skill. s107 00:08:57.520 --> 00:09:01.280 I think this is very important, especially if you're like vibe coding or you're not working in a big code base. s108 00:09:01.280 --> 00:09:05.320 You just want something quick that your agent can refer to and not carry out a lot of in-depth research. s109 00:09:05.320 --> 00:09:08.600 This is what I would recommend for meeting like bare minimum accessibility requirements. s110 00:09:08.600 --> 00:09:15.480 So, you want to make sure that you're using semantic HTML wherever possible, only reaching for ARIA when semantic HTML can't express the behavior. s111 00:09:15.480 --> 00:09:19.640 Every interactive element, if it can be operated by a mouse, it should also be operated by a keyboard. s112 00:09:19.640 --> 00:09:23.080 You also make sure that elements are properly labeled and can be read by screen readers. s113 00:09:23.080 --> 00:09:26.880 And then finally, before running the code, your agent should carry out an audit against all those steps. s114 00:09:26.880 --> 00:09:30.040 Of course, this is not enough to build a fully accessible website. s115 00:09:30.040 --> 00:09:36.200 You still need to carry out a lot of manual testing yourself because it's not possible for a one tool to make a website fully accessible. s116 00:09:36.200 --> 00:09:41.120 But, just having these skills in place can help a lot more than not having them there at all. s117 00:09:41.120 --> 00:09:45.120 Regardless of why you use AI, most times the goal is to solve a particular problem. s118 00:09:45.120 --> 00:09:48.880 So, just make sure that your solution is useful to as many people as possible. s119 00:09:48.880 --> 00:09:50.480 So, build things to be accessible. s120 00:09:50.480 --> 00:09:51.800 And that is all. s121 00:09:51.800 --> 00:09:53.320 Thank you so much for listening to my talk. s122 00:09:53.320 --> 00:09:54.320 I hope you enjoyed it. s123 00:09:54.320 --> 00:09:58.000 If you do have any questions, feel free to reach out to me online at Jemima Abu. s124 00:09:58.000 --> 00:09:59.680 That's LinkedIn, Twitter, or GitHub. s125 00:09:59.680 --> 00:10:01.000 I would love to hear from you. s126 00:10:01.000 --> 00:10:03.120 Okay, bye.