1
00:00:00,881 --> 00:00:04,641
Hiya, my name is Jemima and I'm going to be talking to you about the cost of accessibility

2
00:00:04,641 --> 00:00:09,181
in AI, or as I like to call it, stop wasting tokens on building products that people can't

3
00:00:09,181 --> 00:00:13,101
use. Because at the end of the day, what is accessibility? Accessibility is the quality

4
00:00:13,101 --> 00:00:18,161
of being able to be used by anyone regardless of disability. So what this means is that when you

5
00:00:18,161 --> 00:00:23,381
read a product that is inaccessible, that product is inherently useless because people cannot use it.

6
00:00:23,641 --> 00:00:28,041
I think this is a very prevalent talk, especially in these days of vibe coding and prompt engineering

7
00:00:28,041 --> 00:00:32,561
and AI basically writing all the code for us. We need to ensure that even with all the code being

8
00:00:32,561 --> 00:00:37,361
written by AI, we're still building for humans and we're ensuring that humans are able to use

9
00:00:37,361 --> 00:00:41,301
the products that we are building. It's all very well and good to vibe code five different apps in

10
00:00:41,301 --> 00:00:44,841
one day, but if people can't use those apps, then is there really any point?

11
00:00:45,221 --> 00:00:50,721
A study by WebAIM shows that 96% of the homepages of the top 101 websites in the world have

12
00:00:50,721 --> 00:00:52,681
some form of accessibility issue or another.

13
00:00:52,821 --> 00:00:56,141
I'm someone that goes around a lot and speaks about accessibility, and whenever I ask why

14
00:00:56,141 --> 00:01:00,081
don't people build websites to be accessible, I usually hear it takes too long.

15
00:01:00,301 --> 00:01:03,961
While I will agree that accessibility is a labor and time intensive process, I do think

16
00:01:03,961 --> 00:01:07,081
that now that I've gotten to the stage of AI writing most of our code, it's actually

17
00:01:07,081 --> 00:01:08,861
easier to make things accessible.

18
00:01:08,861 --> 00:01:14,301
If anything, I would say it costs more time and more money to build inaccessible websites.

19
00:01:14,721 --> 00:01:17,721
So I tried to carry out a little experiment using the codebase at work.

20
00:01:17,901 --> 00:01:22,621
So I gave this prompt to the agents, it's just a simple prompt with no guidelines, implement this design from Figma.

21
00:01:22,981 --> 00:01:27,821
And I ran it twice, the first time without any accessibility skill and the second time by using the skill that I had written.

22
00:01:27,941 --> 00:01:36,661
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.

23
00:01:36,661 --> 00:01:44,141
And we can take a look at the data here. 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.

24
00:01:44,381 --> 00:01:48,921
So in conclusion, we can say that it is actually cheaper for AI agents to build accessible websites.

25
00:01:49,141 --> 00:01:54,121
We can 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.

26
00:01:54,121 --> 00:01:56,621
So it cannot serve as empirical data that proves the fact.

27
00:01:56,621 --> 00:02:06,961
But when we look into the reasons why it took the AI agent much longer to carry out the prompts without any accessibility skills, then we can have a better idea of why exactly it is faster to build accessible websites.

28
00:02:07,221 --> 00:02:09,741
But before we get into that, hi, my name is Jemima Abu.

29
00:02:09,981 --> 00:02:12,941
I am a product engineer at Case, an alternative investment platform.

30
00:02:13,081 --> 00:02:18,061
I'm also a Google Dev expert, a Microsoft's MVP and a certified professional in accessibility core competencies.

31
00:02:18,241 --> 00:02:21,801
Basically, I like to go around talking about how to make the web a more accessible place.

32
00:02:21,801 --> 00:02:25,621
Also, I will give a slight disclaimer, while a lot of my examples relating to accessibility

33
00:02:25,621 --> 00:02:29,801
will be web-based because that is my area of expertise, this can also apply regardless

34
00:02:29,801 --> 00:02:33,521
of whatever platform you're working on, whether that's mobile or hardware or anything at

35
00:02:33,521 --> 00:02:33,661
all.

36
00:02:33,841 --> 00:02:34,861
So let's get back to it.

37
00:02:35,841 --> 00:02:37,321
This is your AI agent.

38
00:02:37,481 --> 00:02:40,781
Now, it's a super intelligent tool that can do almost anything in the world, but at the

39
00:02:40,781 --> 00:02:42,561
same time, it's just three years old.

40
00:02:42,721 --> 00:02:45,081
And much like a baby, AI is very impressionable.

41
00:02:45,241 --> 00:02:48,641
If you tell it enough times that the sky is red, eventually it will start to accept that

42
00:02:48,641 --> 00:02:49,301
the sky is red.

43
00:02:49,301 --> 00:02:57,861
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.

44
00:02:59,061 --> 00:03:01,541
There's a Japanese show on Netflix that I love called Old Enough.

45
00:03:01,701 --> 00:03:04,141
It's basically about toddlers being sent on their first errand.

46
00:03:04,261 --> 00:03:07,281
It can be like a three-year-old being sent to a supermarket to purchase groceries.

47
00:03:07,441 --> 00:03:13,061
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.

48
00:03:13,061 --> 00:03:19,021
So it might be that the child has gone with their parents to this market multiple times, or they provide a list that's very clearly detailed.

49
00:03:19,181 --> 00:03:23,221
It shows them where the supermarket is, what they need to get there, what paths to avoid.

50
00:03:23,361 --> 00:03:26,741
And it basically makes it a lot easier for the child to carry out that errand.

51
00:03:27,101 --> 00:03:32,441
It's the same thing with an agent. When you're giving an instruction to an agent, if I'm saying build this web page or implement this design,

52
00:03:32,581 --> 00:03:39,081
if I provide the right skills and prompts, it makes it a lot easier for that agent to avoid going down the wrong path

53
00:03:39,081 --> 00:03:41,941
and for the finished product to look like what I intended it to look like.

54
00:03:41,941 --> 00:03:45,181
So let's take a look at what happens when we don't provide any form of guidance for

55
00:03:45,181 --> 00:03:46,641
our agents in developing products.

56
00:03:47,101 --> 00:03:49,501
Firstly, human bias becomes AI bias.

57
00:03:49,781 --> 00:03:53,201
For years, humans have been developing websites or products that are inaccessible because

58
00:03:53,201 --> 00:03:54,621
frankly we just don't think that way.

59
00:03:54,701 --> 00:03:55,021
Especially as

60
00:03:55,101 --> 00:04:19,941
developers, we tend to have a it works for me mindset. 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. I don't concern myself with if it works for screen readers or if it works in low-life environments. I'm just like, it works, it's built, I'm done. 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. It's going to say, oh, we don't need to make these things accessible because that has not had

61
00:04:19,941 --> 00:04:23,961
a mentioned in the past so i'm just going to build things anyhow and then the more you use that ai

62
00:04:23,961 --> 00:04:28,641
agent to generate codes the more you build a code base that is inherently inaccessible because

63
00:04:28,641 --> 00:04:33,201
accessibility was never constrained in the first place secondly and this is something that i really

64
00:04:33,201 --> 00:04:38,281
noticed in the experiment ai tends to default to a lot of verbose code if you don't provide any

65
00:04:38,281 --> 00:04:42,621
particular prompts or guidelines for your agent it will reinvent the wheel as many times as it

66
00:04:42,621 --> 00:04:47,681
wants to so even if you tell it just build a simple accordion component or build a modal component

67
00:04:47,681 --> 00:04:51,841
it's not going to bother checking is there already an existing semantic element that can give me the

68
00:04:51,841 --> 00:04:56,501
same functionality it's just going to build one from scratch yeah it loves to write code so it'll

69
00:04:56,501 --> 00:05:01,401
go off and write as many things as it wants and as you can see here if you are trying to recreate

70
00:05:01,401 --> 00:05:05,961
a semantic element it takes a lot more time and effort because number one you have to carry out a

71
00:05:05,961 --> 00:05:10,321
lot more testing you have to implement a lot more features to replicate the native functionality

72
00:05:10,321 --> 00:05:14,241
and it's just a very cumbersome process so this is part of the things that you want to ensure you're

73
00:05:14,241 --> 00:05:18,521
focusing on when you're providing prompts to your agent. I saw an analogy once that said an accessible

74
00:05:18,521 --> 00:05:22,601
website is like a blueberry muffin. If someone hands you a plain muffin that they've shoved a

75
00:05:22,601 --> 00:05:27,061
bunch of blueberries on, similar to the picture on the right, that's not a blueberry muffin. For it to

76
00:05:27,061 --> 00:05:30,761
be a proper blueberry muffin like the one on the left, then the blueberries need to have been baked

77
00:05:30,761 --> 00:05:34,381
in from the start. It's the same thing on an accessible website. If you have a fully built

78
00:05:34,381 --> 00:05:38,861
website and then once it's done you start shoving in ARIA labels in different places, that is not an

79
00:05:38,861 --> 00:05:42,581
accessible website. For it to be an accessible website, you need to put accessibility at the

80
00:05:42,581 --> 00:05:47,641
forefront at every build process. And this does not just apply to developers. Accessibility is

81
00:05:47,641 --> 00:05:52,701
the responsibility of everyone. So we want to make sure that even from the business idea to design to

82
00:05:52,701 --> 00:05:57,141
QA, that we're ensuring that we're looking for accessibility and testing that can this product be

83
00:05:57,141 --> 00:06:01,381
used by everyone in the exact same way. And that actually we're waiting to the end to consider

84
00:06:01,381 --> 00:06:05,141
accessibility is that you waste a lot of time on regressive testing. So if you've waited until your

85
00:06:05,141 --> 00:06:09,761
website is fully built and then you start testing and going back to fix issues, you end up refactoring

86
00:06:09,761 --> 00:06:13,841
and rewriting a lot more code than you'd have had to do if you just built it to be accessible from

87
00:06:13,841 --> 00:06:18,201
the start. And then of course there are business consequences to building inaccessible products.

88
00:06:18,541 --> 00:06:21,681
The thing I hear sometimes is that a business might say oh but we don't have to consider

89
00:06:21,681 --> 00:06:25,721
accessibility because none of our users rely on assistive technologies. And I think that's very

90
00:06:25,721 --> 00:06:29,741
funny because it's sort of a self-fulfilling prophecy. It's not that your users don't rely

91
00:06:29,741 --> 00:06:33,881
on assistive technologies. It's that people with assistive technologies cannot use your website in

92
00:06:33,881 --> 00:06:38,101
the first place so they just never go to it. Imagine a business that didn't have a door.

93
00:06:38,101 --> 00:06:40,721
You would never get any customers. How would they get in the building?

94
00:06:40,921 --> 00:06:42,801
It's the same thing with building an inaccessible product.

95
00:06:43,021 --> 00:06:46,301
If you've built a product that people cannot use, then people will not use it.

96
00:06:46,441 --> 00:06:49,881
And then finally, there are legal repercussions to not making your website accessible.

97
00:06:50,161 --> 00:06:53,241
In the United States, the Americans with Disabilities Act states that any public-facing

98
00:06:53,241 --> 00:06:56,381
product must be accessible and can be used by people with disabilities,

99
00:06:56,381 --> 00:06:59,661
or you could face fines and even lawsuits. But on the plus side,

100
00:06:59,721 --> 00:07:03,741
you could get to use this really cute sticker on Microsoft Teams. So, you know, where you're off from.

101
00:07:04,061 --> 00:07:08,001
Based on all this, we can see that it actually is a lot more expensive to be building products

102
00:07:08,001 --> 00:07:13,161
that aren't accessible. You're exposing yourself to losing money from customers, possible lawsuits

103
00:07:13,161 --> 00:07:17,581
where you have to pay fines. You're spending more time building code and refactoring things. So if

104
00:07:17,581 --> 00:07:21,541
you do build your product to be accessible from the start, it's going to be a lot faster and a lot

105
00:07:21,541 --> 00:07:26,781
cheaper. So now that we know all that, how can we actually ensure that our AI agents are building

106
00:07:26,781 --> 00:07:30,561
things to be accessible? Because everyone's code base is different and we can be working with

107
00:07:30,561 --> 00:07:34,821
different technologies, I'm just going to give an overarching general view of how to get your

108
00:07:34,821 --> 00:07:39,281
agents to produce accessible code. So firstly, you need to define your accessibility requirements.

109
00:07:39,421 --> 00:07:43,461
Accessibility requirements differ based on what platform you're working on. So you do need to

110
00:07:43,461 --> 00:07:47,041
carry out research and ensure that you know what accessible requirements you're supposed to be

111
00:07:47,041 --> 00:07:52,041
meeting for the platform you are building for. Once that's done, you need to audit your existing

112
00:07:52,041 --> 00:07:55,461
code base. So if you're going to introduce an AI agent into your code base, you need to ensure

113
00:07:55,461 --> 00:08:00,961
that you don't have any pre-existing issues that the AI agent might copy as what it thinks is best

114
00:08:00,961 --> 00:08:05,301
behavior. So you can use automated tools to carry out accessibility testing, or you can even tell

115
00:08:05,301 --> 00:08:10,261
your AI agent to do it, but you won't identify any existing issues and then fix them before you start

116
00:08:10,261 --> 00:08:15,821
writing new features. Then you want to implement some sort of reusable system. This is a very nice

117
00:08:15,821 --> 00:08:19,281
to have, but basically if you're going to be working with accessibility, it's a lot easier to

118
00:08:19,281 --> 00:08:24,441
fix things in one component that is used in multiple places, as opposed to making fixes to

119
00:08:24,441 --> 00:08:28,821
the same components across different files. So just having an implemented design system or any

120
00:08:28,821 --> 00:08:32,241
form of reusable component library is going to save you a lot more time in the long run

121
00:08:32,241 --> 00:08:37,701
when making things accessible. And then finally, you want to enforce a mandatory accessibility

122
00:08:37,701 --> 00:08:42,041
skill. This is a skill that your AI agents will basically use anytime you're running anything

123
00:08:42,041 --> 00:08:46,941
related to maybe generating UI or writing code that requires accessibility. One skill that I

124
00:08:46,941 --> 00:08:50,101
really like to use is the Modern Web Guidance skill from Chrome. It's basically a skill that

125
00:08:50,101 --> 00:08:54,921
ensures that your agent is using the newest HTML and CSS features as opposed to custom JavaScript

126
00:08:54,921 --> 00:08:58,341
implementations. You can also have a lightweight version of an accessibility skill. I think this

127
00:08:58,341 --> 00:09:01,561
very important especially if you're like vibe coding where you're not working in a big code

128
00:09:01,561 --> 00:09:04,621
base you just want something quick that your agent can refer to and not carry out a lot of in-depth

129
00:09:04,621 --> 00:09:09,221
research this is what i would recommend for meeting like bare minimum accessibility requirements so

130
00:09:09,221 --> 00:09:13,101
you want to make sure that you're using semantic html wherever possible only reaching for aria

131
00:09:13,101 --> 00:09:17,821
when semantic html can't express the behavior every interactive element if it can be operated

132
00:09:17,821 --> 00:09:21,241
by a mouse it should also be operated by a keyboard you want to make sure that elements

133
00:09:21,241 --> 00:09:25,041
are properly labeled and can be read by screen readers and then finally before running the code

134
00:09:25,041 --> 00:09:29,261
your agent to carry out an audit against all those steps. Of course, this is not enough to build a

135
00:09:29,261 --> 00:09:33,361
fully accessible website. You still need to carry out a lot of manual testing yourself because it's

136
00:09:33,361 --> 00:09:38,381
not possible for one tool to make a website fully accessible. But just having these skills in place

137
00:09:38,381 --> 00:09:43,561
can help a lot more than not having them there at all. Regardless of why you use AI, most times the

138
00:09:43,561 --> 00:09:48,441
goal is to solve a particular problem. So just make sure that your solution is useful to as many people

139
00:09:48,441 --> 00:09:53,441
as possible. So build things to be accessible. And that is all. Thank you so much for listening to my

140
00:09:53,441 --> 00:09:57,221
talk i hope you enjoyed it if you do have any questions feel free to reach out to me online

141
00:09:57,221 --> 00:10:01,881
at jemima ambu that's linkedin twitter or github i would love to hear from you okay bye