# Teach Your AI Agent to Build Products Everyone Can Use - Jemima Abu, CAIS Jemima Abu, CAIS [Talk page](https://ai.engineer/talks/YV1x6gCdgQA-teach-your-ai-agent-build-products-everyone) · [Video](https://www.youtube.com/watch?v=YV1x6gCdgQA) ## Teach Your AI Agent to Build Products Everyone Can Use Jemima Abu gave a coding agent the same Figma design twice. The run with an accessibility skill took five minutes. A simple accordion shows what belongs in that skill and why the choice matters to someone using a keyboard. ### How far can you get with your eyes closed? [0:12](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=12s) Close your eyes, unlock your phone, open the notes app and type `hello world`. Jemima Abu, a product engineer and certified accessibility professional, gave the room that exercise, then scaled it back. Forget the note. Could people enter their lock password with their eyes closed? She gave them 30 seconds. With the screen out of view, it was hard to tell what a gesture had done. Even gathering answers exposed a similar problem. Abu couldn't see people nodding, so she asked them to answer aloud. Muscle memory could help someone swipe up and tap familiar key positions. What would happen on a phone they'd never used? A first-time user would need a way to discover where those keys were. Accessibility means building products that people can use regardless of disability. The phone exercise isolates one assumption about sight. An interface can just as easily depend on a movement someone can't make, a sound they can't hear or an interaction they find difficult to understand. A feature can be present on the device and still be out of reach. ### One Figma design, two agent runs [2:05](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=125s) Abu cites a figure of 96% of the top one million websites having accessibility issues. When she asks developers why accessibility gets put off, she hears that a manager won't sign off on extra time, a client hasn't asked for it, or the company has other priorities. Those answers treat accessibility as time added to a build. Abu wanted to see what would happen if an agent received the guidance before it started. How much work did the agent do on the same Figma design under each condition? On the first run, Abu asked it to implement the design and left the approach up to the agent. That took 15 minutes. On the second, she supplied a skill she'd written specifically for accessibility. That run took 5 minutes, used fewer tokens and cost 58% less. Abu catches herself before turning that result into a general savings claim. This was a one-off comparison in an uncontrolled environment. The figures describe the work of generating the implementation. How well people could use each result is a separate question. Her reason for giving an agent a skill is more specific: it can settle implementation choices the agent would otherwise have to make for itself. ### Why an agent reaches for custom JavaScript [4:11](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=251s) Abu compares a coding agent to a toddler on a first errand. In the Japanese show *Old Enough*, a parent sending a child to the supermarket might have walked the route with them, drawn a map or supplied a shopping list. The child knows where to go and what to bring back. A Figma design gives an agent a destination, too. It still leaves room for the agent to reproduce what it sees with a pile of `div` elements. Consider where the agent's examples come from. A developer tries a feature on a laptop, clicks through it successfully and ships. Someone navigating with a screen reader or using a keyboard alone may encounter a problem the developer's test never exercised. Models learn from human-written code, including code shipped after just such a test. An agent can reproduce the omission, and a developer using the same test can approve it again. Abu cites 16% of the world's population as having some form of disability. Take an accordion, where activating a heading reveals or hides content. A custom implementation can use JavaScript to manage that interaction. For a simple disclosure, HTML already provides the `details` element. The browser handles opening and closing it, which leaves less code to generate and less behavior for the developer to get right. Abu expects an agent to favor the more common custom implementation. A skill can tell it when to choose the native element. Leaving accessibility until the end reminds Abu of someone serving a plain muffin with blueberries shoved on top. Adding labels to a finished site has much the same limitation. A label can tell someone what a control is called. If the control still responds only to a click, a keyboard user who knows its name still can't operate it. ### The customer who switched banks [8:03](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=483s) At a conference, Abu heard from someone who moved from Bank A to Bank B because they couldn't use Bank A's app. Bank A could have had better features and still lost that customer. Being able to use the service settled the choice before a feature comparison mattered. That departure is easy for a business to misread. A team looks at its customers and concludes that nobody uses assistive technology. People who tried the app, couldn't navigate it and left are missing from the very group the team is looking at. Abu compares it to a shopkeeper wondering why nobody comes into a store that has no door. Inaccessible websites also carry legal risk. She points to US lawsuits under the Americans with Disabilities Act. ### Four changes to how the agent builds [9:47](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=587s) 1. **Define the product's accessibility requirements.** A web app and a mobile app can call for different standards and different ways of meeting them. Whoever specifies the work, whether a developer or a product manager, needs to identify the requirements that apply and include them when asking the agent to build. 2. **Audit the code the agent will copy.** A new roommate who finds dishes piled in the sink learns something about the house rules. Existing components send an agent much the same signal about what the team accepts. Look for accessibility faults in that codebase. An agent can also do a separate pass to find and fix problems in the examples it would otherwise follow. 3. **Fix shared components in a design system.** A simple reusable library is enough. Suppose 150 pages use the same component. Fix its implementation in the library and all 150 pages get the correction. Independently generated copies would each need attention. 4. **Make the guidelines part of every run.** Three hours before a deadline is a poor time to rely on someone remembering the keyboard requirement. A standing instruction gives the agent that requirement while it chooses and builds each control, including on the rushed job. ### What goes in a lightweight accessibility skill? [12:03](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=723s) What should the agent do differently the next time it builds a web control? Abu's lightweight skill gives it an implementation preference and a condition the result has to meet. - **Choose elements for their meaning.** Start with semantic HTML. For a section that expands and collapses, `details` tells the browser what interaction to provide. - **Require keyboard operation.** Every interactive element must work with the keyboard alone. For the accordion, someone using a keyboard must be able to reach the control, open the content and close it again. A complementary modern web guidance skill points the agent toward browser features it might overlook. It can suggest `details` for an accordion or bring `popover` to the agent's attention when it needs to show content over a page. The accessibility instruction tells the agent how a person must be able to use the control. The browser guidance helps it find an implementation. [Abu's examples at 12:29](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=749s) These prompts reflect Abu's work on the web and need adapting for other platforms. Even on the web, following them can address familiar barriers while leaving others in place. Whether someone can complete a task with the finished product remains the measure of success. ### A keyboard handler and a corner widget [13:27](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=807s) Asked about her biggest frustration with accessibility, Abu starts with a developer giving a `div` the job of a button and leaving out keyboard handling. Someone with a mouse can activate the control, so the developer may never encounter the failure. The person trying to use the keyboard encounters it every time. Then she remembers the accessibility overlay, often a small stick-person icon in the corner of a page. It brings her back to the blueberries on top of the muffin. A team can install a conspicuous accessibility widget while leaving that same control unusable. The repair belongs in the control, where the person pressing a key needs something to happen. ## Key takeaways - On one Figma build, the run with an accessibility skill took 5 minutes against 15 minutes without it and cost 58% less. The uncontrolled comparison leaves the savings on other builds an open question. - Pair an implementation preference with an observable requirement. For a simple accordion, choose the native `details` element and require that someone can open and close it using only a keyboard. - The code around an agent supplies examples of what a team accepts. Audit those examples, repair shared components and carry the product's accessibility requirements into every run. ## Slides ### The Cost of Accessibility in AI [0:12](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=12s) [“The Cost of Accessibility in AI” is subtitled “a.k.a stop wasting tokens on building products that people can’t use.” The bottom credit reads “Jemima Abu · AIE NYC.”](https://assets.ai.engineer/sites/aiecode2025/sha256/b551bd433fb28472e89052291f78cc5a343d374134b00c03ae8985cf53493c17.webp) The Cost of Accessibility in AI a.k.a stop wasting tokens on building products that people can't use Jemima Abu • AIE NYC ### Accessibility [1:34](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=94s) [The definition beneath “Accessibility” reads “Able to be used, regardless of disability.”](https://assets.ai.engineer/sites/aiecode2025/sha256/41bf6a0d6e9f50b2e6bd9826ff9879d8bc99b57f456c90b556f0977dac426e19.webp) Accessibility Able to be used, regardless of disability ### Accessibility issues among the top one million websites [2:05](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=125s) [Under “Observation,” the slide states that approximately 96% of the top one million websites have accessibility issues.](https://assets.ai.engineer/sites/aiecode2025/sha256/fb5a8ff0f8ec2f070ea4423ca3a39c85627aa77c5ad7e6ce90c6d89ceb0d064a.webp) ~96% of the top 1 million websites online have accessibility issues. Jemima Abu • The Cost of Accessibility • October 2026 ### Why aren’t websites built to be accessible? [2:25](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=145s) [The slide asks “Why aren’t websites built to be accessible?” At lower right, a cartoon person at a laptop holds their head and says “It takes too long.”](https://assets.ai.engineer/sites/aiecode2025/sha256/b4f38f93a35a0bbdcb95af353e333fc2d5125bcaa21ca86222631e8c6e6d0387.webp) QUESTION Why aren’t websites built to be accessible? It takes too long. ### AI runs with and without an accessibility skill [3:11](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=191s) [Both runs used the same prompt and model. With the accessibility skill, duration fell from 15.6 to 5.2 minutes, turns from 84 to 32, total tokens from 4,595,916 to 1,429,426 and estimated cost from $14.20 to $5.97, a 58% cost reduction.](https://assets.ai.engineer/sites/aiecode2025/sha256/285b569779fdeb6e4b2ed4df961c428ac4e0be90726b67a032de2433e7cd2820.webp) DATA Same prompt, same model | No accessibility skill | With accessibility skill Duration: 15.6m | 5.2m (−67%) Turns: 84 | 32 (−62%) Total token usage: 4,595,916 | 1,429,426 (−69%) Rough cost: $14.20 | $5.97 (−58%) Token usage = input + cache-create + cache-read + generated, summed across every turn. ### Building an accessible website was cheaper and faster in this… [3:28](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=208s) [The headline says it is cheaper and faster for AI agents to build accessible websites. An asterisk points to the qualification “in this one experiment.”](https://assets.ai.engineer/sites/aiecode2025/sha256/b16f893d23e531475f9b1c0daa633abe8452c2af55a2b4e7f69feadeb75262d4.webp) CONCLUSION It’s cheaper and faster for AI agents to build accessible websites* *in this one experiment ### Jemima Abu’s introduction [3:57](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=237s) [A portrait appears above the text “Jemima Abu” and “Product Engineer, CAIS.” A yellow speech bubble reads “Let’s make the web accessible!” A line of professional qualifications appears beneath her role.](https://assets.ai.engineer/sites/aiecode2025/sha256/6c0d06e9dd2d2f5e444d18befdc04c8a4c8784dee1a096412f81b867919d9188.webp) Let's make the web accessible! Jemima Abu Product Engineer, CAIS Google Developer Expert • Microsoft MVP • CPACC ### “I’m 3 years old” [4:10](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=250s) [A smiling cartoon robot labeled “Chat, Claude, Copilot…” raises its hands and says “I’m 3 years old.” A book, globe, map and code window surround it.](https://assets.ai.engineer/sites/aiecode2025/sha256/110e4f401a65c1bb17dbca67f362e2941d8d451f5e35898cb727e3f0829be6b5.webp) I’m 3 years old Chat, Claude, Copilot… ### Old Enough! and a toddler’s first errand [4:23](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=263s) [Two children carry shopping bags with balloons beside them. The still bears the title “Old Enough!” The caption describes a Japanese documentary series about toddlers being sent on their first errand.](https://assets.ai.engineer/sites/aiecode2025/sha256/49086ea6029667bb52a11f35cf70bc2c4c0bb42cc6bdee7f68f55aba4cde3357.webp) Old Enough! A Japanese documentary series about toddlers being sent on their first errand Jemima Abu • The Cost of Accessibility • October 2026 ### A child's first errand [4:34](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=274s) [A red arrow follows the main road from home to the supermarket. A pinned shopping list names milk, bread, eggs and apples.](https://assets.ai.engineer/sites/aiecode2025/sha256/f22f32d4ea5a7045adc594e770a2ffdd225aed1d5fa36b217d4ebdf8bf7265e3.webp) A child's first errand SUPERMARKET HOME start walk this way main road you made it! shopping list • milk • bread • eggs • apples Jemima Abu • The Cost of Accessibility • October 2026 ### A coding agent's prompt [4:53](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=293s) [An arrow marked “follow the accessibility prompts” leads from a codebase to a web page, past trees labeled
. The checklist calls for semantic HTML, keyboard support, visible focus, labeled inputs and cues that work without color alone.](https://assets.ai.engineer/sites/aiecode2025/sha256/8c729db5c34febdf29d1e291350a6a4da487ca30904f788ce21c190ca29b6963.webp) A coding agent's prompt
WEB PAGE
start CODEBASE follow the accessibility prompts the build path you made it! a11y checklist • semantic HTML • keyboard works • visible focus • label inputs • no colour-only cues Jemima Abu • The Cost of Accessibility • October 2026 ### The Cost of Inaccessible Code [5:10](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=310s) [The words “The Cost of Inaccessible Code” appear in large black type at the center of a white slide.](https://assets.ai.engineer/sites/aiecode2025/sha256/48468e98f19b12ba5cdfbe152480451fd226207af0f168284fe0e6f3600de683.webp) The Cost of Inaccessible Code ### Human bias becomes AI bias [5:19](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=319s) [A five-step loop shows developers publishing inaccessible code, AI training on public code and learning inaccessible patterns as normal, then developers using AI to generate code. The resulting inaccessible output feeds back into publication.](https://assets.ai.engineer/sites/aiecode2025/sha256/5b2ea9fed38b031a1fb672314a687090f85e5a7e98e1ff7f71ad8cb8978e33ff.webp) The Cost of Inaccessible Code 01 Developers publish inaccessible code 02 AI trains on publicly available code 03 AI learns inaccessible patterns as “normal” 04 Developers use AI to generate code 05 AI produces inaccessible output Human bias becomes AI bias ### Building custom components takes a lot longer than using semantic… [6:20](https://www.youtube.com/watch?v=YV1x6gCdgQA&t=380s) [A person hammers at a workbench displaying code that makes a div act as a button. Beside the bench, a finished wheel labeled