How to Build AI-Powered Chrome Extensions for Accessibility: A Complete Developer Guide

Key Takeaways

• Build production-ready Chrome extensions in under 25 minutes using Claude Code and AI-assisted development workflows
• Create accessible tools that mainstream products overlook by developing personal software tailored to specific user needs
• Leverage multimodal AI to solve accessibility challenges for visually impaired users and improve daily productivity
• Use Claude Skills to extract common development patterns and accelerate repetitive coding tasks significantly
• Master keyboard-first design principles to reduce cognitive friction and enhance accessibility through thoughtful UX patterns
• Transform accessibility from a compliance checkbox into personal empowerment through AI-enabled custom solutions

The Rise of AI-Powered Personal Software Development

The software development landscape has fundamentally shifted. What once required weeks of learning and hours of coding now takes minutes with AI assistance. Joe McCormick's approach reveals a critical insight: personal software is becoming increasingly viable with AI help. This democratization of development means that individuals facing accessibility barriers no longer need to wait for Fortune 500 companies to solve their problems.

The traditional development workflow—requirements gathering, architecture design, implementation, testing—can now be compressed dramatically. Claude Code represents a breakthrough in this compression, allowing developers to describe what they want and receive functional code in real-time. For users with disabilities, this means the ability to create tools perfectly calibrated to their specific needs, workflows, and preferences.

McCormick's journey exemplifies this shift. After losing his vision, he could have abandoned his engineering aspirations. Instead, he leveraged emerging AI tools to continue building, proving that technology barriers are increasingly surmountable. His ability to create multiple Chrome extensions demonstrates that personal software development isn't a niche skill—it's becoming mainstream.

This approach transforms the accessibility narrative from "how can we get companies to help us?" to "how can we help ourselves?" It's empowering, practical, and increasingly feasible for developers at all experience levels.

---

Building Chrome Extensions with Claude Code: A Practical Workflow

Creating a functional Chrome extension traditionally required understanding manifest files, API documentation, content scripts, and background pages. Today, Claude Code simplifies this dramatically by handling boilerplate code, managing file structures, and offering real-time suggestions.

Step 1: Define Your Accessibility Problem

The first step isn't coding—it's problem identification. McCormick's extensions emerged from real workflow challenges:

• Slack image descriptions: When images are posted without alt text, visually impaired users lose crucial context. His extension automatically generates descriptions using Claude's vision capabilities.
• AI-powered spell checking: Beyond basic grammar, this extension understands context and intent, catching errors that traditional tools miss.
• Link summarization: Instead of visiting each link, users get instant summaries, reducing cognitive load and time investment.

Each extension addressed a genuine friction point in his daily work. This problem-driven approach ensures your tools solve real issues rather than adding complexity.

Step 2: Scaffold with Claude Code

Claude Code excels at generating boilerplate. Describe your extension's purpose, and it produces:

• manifest.json: The configuration file defining permissions, icons, and scripts
• popup.html/css: The user interface displayed when clicking your extension icon
• content.js: Scripts injected into web pages for real-time functionality
• background.js: Persistent scripts handling API calls and state management

Instead of memorizing Chrome extension APIs, you conversationally guide Claude through your requirements. Need permissions for Slack? Describe it. Want to call an API? Specify the endpoint. Claude handles the technical translation.

Step 3: Integrate AI APIs

Most useful accessibility tools leverage AI. Claude Code makes API integration straightforward:

• Vision capabilities for image analysis and description generation
• Text processing for context-aware spell checking and content analysis
• Summarization for quickly digesting long content

The extension becomes a bridge between the user interface and powerful AI models, delivering AI capabilities exactly where users need them.

Step 4: Implement Keyboard-First Navigation

This is where accessibility becomes core rather than peripheral. McCormick emphasizes keyboard shortcuts as a fundamental feature, not an afterthought:

• Reduce mouse dependency: For users with motor control difficulties or vision loss, keyboard navigation is essential.
• Create custom shortcuts: Define hotkeys triggering extension functions without context switching.
• Enable rapid workflows: Keyboard-first design dramatically improves speed for all users, not just those with disabilities.

Example: Instead of right-clicking a Slack image and hunting for an extension option, a keyboard shortcut generates descriptions instantly. This isn't just accessible—it's faster and more efficient for everyone.

Step 5: Test with Accessibility Tools

Before deployment, verify your extension works with screen readers and keyboard navigation:

• NVDA (Windows) and ** JAWS**: Popular screen reader software for testing
• Chrome DevTools: Built-in accessibility audit tools
• Keyboard-only testing: Navigate using only the Tab key and Enter
• Manual user testing: If possible, test with users who actually depend on accessibility features

This step separates good extensions from great ones. An extension might function perfectly for sighted mouse users but break entirely under screen reader navigation.

---

Creating Accessible Extensions: Technical Techniques for Screen Readers

Building an accessible extension requires more than luck. It demands intentional design choices and technical implementation of accessibility standards.

Use Semantic HTML

Screen readers interpret HTML semantically. Generic <div> elements with click handlers confuse screen readers. Instead, use proper semantic elements:

<!-- ❌ Inaccessible -->
<div onclick="runExtension()">Process Image</div>

<!-- ✅ Accessible -->
<button onclick="runExtension()">Process Image</button>

Buttons are announced as interactive, inputs are identified as form controls, and landmarks (<nav>, <main>, <aside>) help users navigate content structure.

Implement ARIA Attributes

ARIA (Accessible Rich Internet Applications) provides screen readers with additional context when semantic HTML isn't sufficient:

• aria-label: Descriptive text for icon-only buttons
• aria-describedby: Links elements to detailed descriptions
• aria-live: Announces dynamic content updates
• role: Specifies semantic meaning for custom elements

Example for a loading state:

<div aria-live="polite" aria-busy="true">
  Processing your image description...
</div>

Screen reader users are informed of the status change without refreshing the page.

Ensure Color Contrast

Visual accessibility isn't just for screen readers. Users with low vision or color blindness need sufficient contrast:

• WCAG AA standard: 4.5:1 contrast ratio for normal text
• WCAG AAA standard: 7:1 for maximum accessibility
• Test tools: Use WebAIM Contrast Checker or browser DevTools

Never rely solely on color to communicate information. Always include icons, text, or other visual indicators.

Manage Focus Indicators

Keyboard users need clear focus indicators showing which element is currently interactive:

button:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

Never remove the default focus outline without providing a clear replacement. Invisible focus indicators break keyboard navigation completely.

Handle Keyboard Navigation

Ensure every interactive element is reachable via keyboard:

• Tab order: Use logical tab order matching visual layout
• Escape key: Close menus and dialogs
• Arrow keys: Navigate lists and menus
• Enter/Space: Activate buttons

Test by navigating your extension using only the Tab key. Every function should be accessible without a mouse.

---

Leveraging Claude Skills to Accelerate Development

Claude Skills represent a paradigm shift in development efficiency. Rather than rebuilding common patterns repeatedly, you encapsulate them as reusable AI workflows.

What Are Claude Skills?

Claude Skills are essentially documented patterns that Claude Code learns and applies consistently. When you create the first accessibility-focused Chrome extension, you're establishing a pattern. The second, third, and subsequent extensions can leverage this pattern, dramatically reducing development time.

Extracting Common Patterns

McCormick's development approach demonstrates how to identify and abstract patterns:

1. Image description generation: Used across multiple extensions and contexts
2. Content summarization: Applicable to articles, emails, and web pages
3. Accessibility enhancement: Screen reader optimization follows consistent principles
4. API integration: Claude API calls follow predictable patterns

Rather than coding each pattern from scratch, you create a skill documenting: "When user wants image descriptions, call Claude vision API with X parameters, format output as Y, display in Z location."

Applying Skills to New Extensions

Once documented, Claude Skills accelerate development exponentially:

• Link summarizer: 5 minutes instead of 25 (uses summarization and content retrieval skills)
• Document reader: 8 minutes instead of 30 (uses text extraction and accessibility skills)
• Email accessibility enhancer: 7 minutes instead of 20 (uses multiple existing skills)

The more extensions you build, the richer your skill library becomes, and the faster new development proceeds.

Building Your Skill Library

Start with your first extension taking the full 25 minutes. Document every decision and pattern. Your second extension, reusing those patterns, completes in 15 minutes. By your fifth extension, you're building in 5-10 minutes because the heavy lifting is automated through well-documented skills.

This isn't just about speed—it's about consistency. Skills ensure every extension follows the same accessibility standards, debugging patterns, and user experience principles.

---

Real-World Extensions: From Concept to Deployment

McCormick demonstrated three practical extensions that solve genuine problems. Understanding their development provides a blueprint for your own projects.

Extension 1: Slack Image Description Generator

Problem: Slack users who are visually impaired receive images without context, breaking communication flow.

Solution: A Chrome extension that detects images in Slack messages and generates AI-powered descriptions automatically.

Technical Approach:

• Content script monitors Slack DOM for image elements
• Right-click menu triggers description generation
• Claude vision API analyzes the image
• Description is formatted and inserted as a reply or comment

Accessibility Benefits:

• Keyboard shortcut eliminates mouse dependency
• Screen reader announces descriptions immediately
• No context switching required

Development Time: 25 minutes with Claude Code

Key Insight: The most valuable extensions solve problems affecting your daily workflow. This extension emerged from McCormick's actual need, not hypothetical scenarios.

Extension 2: Context-Aware Spell Checker

Problem: Traditional spell checkers flag technical terms and contextually appropriate unconventional language.

Solution: An AI-powered extension understanding domain-specific terminology and writing context.

Technical Approach:

• Content script captures text input events
• Submits text to Claude for grammar and clarity analysis
• Returns suggestions without false positives
• Users accept or dismiss suggestions via keyboard

Accessibility Benefits:

• Runs in background without visual popups
• Keyboard commands for accepting suggestions
• Screen reader announces corrections conversationally

Development Time: 20 minutes (leveraging image description skill patterns)

Key Insight: Generic tools often create friction for specialized users. Domain-aware accessibility is more powerful than generic compliance.

Extension 3: Link Summarization Tool

Problem: Following link chains wastes time for users navigating accessibility challenges.

Solution: Hover (or keyboard activate) over links to see AI-generated summaries without navigation.

Technical Approach:

• Content script detects link interactions
• Fetches linked content in background
• Claude summarizes content rapidly
• Summary appears in tooltip or sidebar

Accessibility Benefits:

• Reduces cognitive load significantly
• Eliminates unnecessary context switching
• Keyboard accessible throughout

Development Time: 15 minutes (reusing summarization and content retrieval skills)

Key Insight: Efficiency improvements benefit all users, but particularly help those expending extra cognitive energy navigating accessibility barriers.

---

From Keyboard Shortcuts to Cognitive Efficiency: Designing for Real Users

McCormick emphasizes an often-overlooked principle: accessibility improvements reduce friction for everyone. Keyboard shortcuts aren't just accessible—they're faster. Link summaries aren't just helpful for vision loss—they improve productivity universally.

This philosophy guides extension design beyond mere compliance:

Keyboard Shortcuts as First-Class Features

Rather than afterthoughts, keyboard shortcuts should be primary interaction methods:

• Discoverable: Document shortcuts prominently in extension documentation
• Remappable: Allow users to customize shortcuts for their workflow
• Consistent: Follow conventions where possible (Ctrl+Shift+D for describe, etc.)
• Mnemonic: Choose shortcuts related to their function

Reducing Cognitive Load Through Design

Accessibility isn't just removing barriers—it's actively reducing friction:

• One-step operations: Minimize steps between problem and solution
• Intelligent defaults: Make common choices automatic
• Predictable behavior: Users should anticipate what happens next
• Clear feedback: Confirm every action occurred

McCormick's extension demos emphasized this principle repeatedly. The spell checker doesn't require opening a dialog—suggestions appear contextually. Image descriptions don't require navigation—they're available instantly via keyboard. This isn't just accessible; it's good design.

Testing with Real Users

The final step moves beyond technical metrics. Find users with disabilities and observe them using your extension:

• Do they discover features intuitively?
• Where does confusion arise?
• What workflows does the extension enable or block?
• How does it integrate with their existing tools and techniques?

This user-centered approach often reveals that "accessible" changes feel awkward to actual users, while seemingly trivial design tweaks create surprisingly large impact.

---

The AI Development Advantage: Getting Fluent with AI Tools

McCormick's success with rapid extension development stems from fluency with AI tools, not advanced programming skills. This distinction matters profoundly.

From Tool Exploration to Tool Mastery

Most developers treat AI tools transactionally: prompt, receive code, implement. McCormick approaches them conversationally:

• Iterative refinement: Request a feature, discover limitations, guide improvements
• Collaborative exploration: Propose approaches, evaluate trade-offs, select optimal solutions
• Knowledge transfer: Ask why decisions were made, understand reasoning, apply lessons elsewhere

This conversational approach transforms AI from a code-generation service into a thinking partner.

Effective Prompting for Accessibility

Generic prompts produce generic results. Effective prompting for accessibility requires specificity:

❌ Vague: "Build a Chrome extension"

✅ Specific: "Build a Chrome extension that generates image descriptions for Slack messages using Claude's vision API, with keyboard navigation support, ARIA labels for all interactive elements, and screen reader compatibility."

The difference between 30 minutes and 5 minutes often comes down to prompt clarity. Detailed requirements prevent false starts and useless iterations.

Learning from AI Suggestions

When Claude Code suggests approaches, evaluate them critically:

• Is this the simplest solution?
• Does it follow accessibility best practices?
• Will it work with screen readers?
• Can I maintain this code?
• Are there edge cases it misses?

This critical engagement deepens your understanding while improving code quality.

Building Debugging Fluency

AI tools help significantly with debugging:

• Describe the bug: "The extension works in Chrome but not Edge. Focus management gets stuck on certain elements."
• Request diagnosis: "Examine this focus management code and identify cross-browser issues."
• Iterate on fixes: "That won't work for our use case because... What if we instead...?"

Experienced developers often solve problems faster by thinking through them with AI than by searching Stack Overflow or documentation.

---

Deploying Your Extension: From Local Testing to Chrome Web Store

Once your extension is functional and accessible, deployment is straightforward.

Local Testing in Developer Mode

Before publishing, test thoroughly:

1. Open chrome://extensions/
2. Enable "Developer mode" (top right)
3. Click "Load unpacked" and select your extension folder
4. Test all functionality with keyboard and screen reader
5. Verify Chrome DevTools console for errors
6. Test in target applications (Slack, Gmail, etc.)

This local testing phase catches 90% of issues before they reach users.

Publishing to Chrome Web Store

Once tested:

1. Create a Chrome Web Store developer account ($5 one-time fee)
2. Prepare assets: Icon (128x128px), screenshots, description
3. Upload your extension and complete metadata
4. Chrome reviews your submission for security and policy compliance
5. Publication typically takes 1-2 hours

Ongoing Maintenance

Published extensions require ongoing attention:

• Monitor reviews and user feedback
• Fix bugs reported by users
• Implement feature requests addressing real needs
• Update for Chrome API changes as needed
• Maintain accessibility as you iterate

McCormick's extensions continue evolving based on real usage, demonstrating that the best tools emerge from continuous user feedback rather than perfect initial design.

---

Why Now Is the Perfect Time for Personal Accessibility Software

Several converging trends make 2024-2025 the ideal time for personal software development:

AI Capabilities Have Matured

Claude Code, GPT-4 Vision, Gemini, and competing systems now handle complex tasks reliably. Vision capabilities can describe images accurately. Text models understand context deeply. The AI reliability threshold for production use has been crossed.

Development Barriers Have Collapsed

Developers with no Chrome extension experience can build functional extensions in 25 minutes. This democratization means people facing accessibility barriers can build solutions themselves rather than waiting for vendors.

Real-Time Feedback Accelerates Learning

Interactive development with AI tools compresses the learning curve dramatically. You learn by doing, with immediate feedback and correction, rather than reading documentation.

Accessibility Gaps Are Obvious

Mainstream products continue overlooking genuine accessibility needs. Rather than waiting, personal software lets individuals solve their own problems while potentially inspiring commercial solutions.

Community Resources Are Abundant

Online communities, documentation, and examples make building extensions approachable. When you get stuck, solutions are searchable and implementable.

---

Overcoming Common Challenges in AI-Powered Development

While Claude Code dramatically simplifies extension development, several challenges still emerge:

Managing AI Hallucinations

AI tools occasionally suggest non-existent APIs or incorrect syntax. Verification remains essential:

• Check API documentation before implementing AI suggestions
• Test edge cases that AI might miss
• Question unrealistic promises ("This will handle all possible inputs perfectly")
• Maintain skepticism while remaining open to suggestions

McCormick's demos showed him questioning Claude's suggestions, testing alternatives, and choosing optimal approaches—not blindly implementing AI recommendations.

Maintaining Code Quality

Speed shouldn't sacrifice quality. Keep code maintainable:

• Document why decisions were made, not just what code does
• Refactor when patterns repeat (this is where Skills emerge)
• Test comprehensively before deployment
• Plan for maintenance from the start

Ensuring Accessibility Throughout

Accessibility requires ongoing attention:

• Don't assume your extension is accessible because it works for you
• Test regularly with screen readers and keyboard navigation
• Ask users for feedback rather than guessing
• Document accessibility features for users who need them

Scaling Beyond Personal Use

Your extension might solve your specific problem but fail for others:

• Internationalization: Does it work in languages beyond English?
• Platform variations: Does it work across Chrome versions and operating systems?
• Use case variations: Does it handle edge cases you don't encounter personally?
• User preferences: Can users customize behavior?

These scaling challenges often distinguish hobby projects from production tools.

---

The Broader Implications: Accessibility as Personal Empowerment

McCormick's approach to accessibility represents a fundamental shift in perspective. Rather than viewing accessibility as a compliance burden imposed on companies, he demonstrates accessibility as personal empowerment.

From Waiting to Building

Historically, individuals with disabilities waited for vendors to implement features. Now, they can build tools addressing their exact needs. This shift from passive consumer to active creator transforms the entire accessibility narrative.

Inspiration Over Handout

McCormick's extensions aren't pity projects—they're smart engineering solving real problems. The Slack image description generator likely benefits sighted users in dark environments or people processing images quickly. The link summarizer improves everyone's productivity. This is inspiration, not charity.

Opening Doors for Others

By sharing his approach publicly, McCormick enables others facing accessibility barriers to build their own solutions. He's not just solving his problems; he's demonstrating that others can solve theirs.

Business Implications

Companies should take notice: If individuals are building better accessibility solutions for themselves than commercial vendors provide, market opportunities exist. Better yet, listening to how people with disabilities innovate reveals what mainstream products should be.

---

Getting Started: Your First Extension Project

Ready to build? Here's how to begin:

Week 1: Identify Your Problem

Don't start coding. Start observing:

• What tasks cause friction in your workflow?
• Where do existing tools fail you?
• What would save the most time?
• What could improve your accessibility the most?

Pick one specific problem. Something small. "I want image descriptions in Slack" is perfect. "I want to improve accessibility everywhere" is too broad.

Week 2: Sketch Your Solution

Before coding, plan:

• What triggers the extension? (Right-click menu, keyboard shortcut, automatic detection)
• What does it output? (Text suggestion, visual indicator, automatic action)
• Who benefits? (Just you, or broader audiences)
• What API or data does it need?

Write this down. Share it with others. Refine based on feedback.

Week 3: Build with Claude Code

Open Claude Code. Describe your extension, including:

• The problem it solves
• The user workflow
• The expected output
• Any specific requirements (keyboard accessible, screen reader compatible)

Iterate based on Claude's suggestions and your testing. Most simple extensions will be functional within 25 minutes.

Week 4: Test and Refine

Load your extension in developer mode. Use it in real workflows. Find bugs. Ask Claude to fix them. Refine based on how it actually feels in daily use.

Week 5: Deploy and Iterate

Once functional, deploy to Chrome Web Store (optional) or keep it private. Either way, use it. Collect feedback from yourself. Implement improvements.

Congratulations—you're now building personal software.

---

Tools and Resources for Extension Development

You'll need:

• Claude Code: https://claude.ai/code (primary development tool)
• VS Code: https://code.visualstudio.com/ (optional, for offline development)
• Chrome DevTools: Built into Chrome (debugging and accessibility testing)
• Chrome Extension Documentation: https://developer.chrome.com/docs/extensions/
• ARIA Standards: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• Screen Reader (Free): NVDA for Windows, VoiceOver for Mac
• Contrast Checker: WebAIM Contrast Checker for color accessibility

For AI development:

• Claude: https://claude.ai/
• ChatGPT: https://chat.openai.com/
• Gemini: https://gemini.google.com/

For accessibility testing:

• Windows Subsystem for Linux: https://learn.microsoft.com/en-us/windows/wsl/
• Screen Reader Basics: https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers

Additional learning:

• Claude Skills Explained: https://www.lennysnewsletter.com/p/claude-skills-explained

---

Conclusion: The Future of Accessibility Is Personal

Joe McCormick's journey from vision loss to building AI-powered accessibility tools demonstrates something profound: the best accessibility solutions often come from people experiencing the accessibility barriers themselves. When we democratize development through AI tools, we unlock innovation from communities traditionally sidelined in software development.

The future isn't waiting for corporations to implement perfect accessibility features. It's individuals building exactly what they need, learning from each other, and discovering that solutions created for specific accessibility needs often benefit everyone. Chrome extensions built in 25 minutes by someone with a disability might outshine features teams spent months designing.

Start with your problem. Build your solution. Share what you learn. That's how personal software becomes the future of accessibility.

Ready to build? Open Claude Code and describe the accessibility problem you face. In 25 minutes, you might solve something that's bothered you for years.

---

Original source: How this visually impaired engineer uses Claude Code to make his life more accessible | Joe McCormick

powered by osmu.app