Learn how to build custom Chrome extensions with Claude Code for accessibility. Joe McCormick shares practical AI techniques for screen reader compatibility ...
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:
- Image description generation: Used across multiple extensions and contexts
- Content summarization: Applicable to articles, emails, and web pages
- Accessibility enhancement: Screen reader optimization follows consistent principles
- 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:
- Open chrome://extensions/
- Enable "Developer mode" (top right)
- Click "Load unpacked" and select your extension folder
- Test all functionality with keyboard and screen reader
- Verify Chrome DevTools console for errors
- 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:
- Create a Chrome Web Store developer account ($5 one-time fee)
- Prepare assets: Icon (128x128px), screenshots, description
- Upload your extension and complete metadata
- Chrome reviews your submission for security and policy compliance
- 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