←Back/Personal/Claude Code
IntermediatePersonal

Create a Fast, Accessible AI Spell Checker for Any Website

Build a one shortcut spell checker for any browser text field. It corrects typos without rewriting your words, replaces the selected text in place, and announces progress and completion to screen reader users.

Create a Fast, Accessible AI Spell Checker for Any Website

Source episode · 08:40

How I AI: Building Custom AI Accessibility Tools for Slack with Joe McCormick & Claude Code

with Claire Vo

Joe types a message in Slack, presses Ctrl Shift S, and hears processing and completion announcements before the corrected text is returned to the same field.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A local Manifest V3 Chrome extension
  • A model API
  • A keyboard shortcut such as Ctrl Shift S
  • Web pages with editable text fields

What you’ll make

A fast browser spell checker that fixes typos in the active field while preserving the writer's words, meaning, and tone.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Define the Keyboard Shortcut

Register Ctrl Shift S, or another unused command, in the extension manifest. Send the command to the active tab and provide a clear error announcement when the current page or field cannot be edited.

Step02

Capture Text from Input Field

Capture the value and selection from the focused input, textarea, or contenteditable element. Store the element and cursor position so the result can return to the same place without forcing the user to navigate again.

Step03

Send Text to AI with a Specific Prompt

Send only the active text and a narrow correction instruction to the model. Require plain text output and forbid rephrasing, word substitutions, tone changes, or added content.

Example prompt
Fix spelling and obvious typographical errors in the text below. Do not rewrite, rephrase, substitute words, change the meaning or tone, or add content. Return only the corrected text. If there are no typos, return the original text unchanged.

[active field text]
Step04

Replace the Original Text

Replace the original value in the same field, preserve the cursor or selection when practical, and dispatch the input and change events needed by the page. Keep focus in the editor so the message is ready to send.

Step05

Add Accessibility Feedback

Add an ARIA live region that announces when checking starts, when it finishes, when no changes were needed, and when an error occurs. Joe heard processing spell check followed by spell check complete without leaving the field.

A simple auditory confirmation like 'spell check complete' makes the tool much more usable for those with visual impairments.

What good looks like

  • The shortcut captures text from the focused editable field.
  • Only spelling and obvious typographical errors change.
  • The corrected text returns to the same field without moving focus.
  • A screen reader announces processing, completion, and errors.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The model rewrites the message
Use a restrictive instruction, set a low temperature, and compare the original and corrected token sequences. Reject changes that alter more than spelling, punctuation tied to a typo, or capitalization.
The extension cannot read or replace the active field
Support input, textarea, and contenteditable elements separately. Preserve selection and dispatch the input events the host page expects after replacement.
The correction happens without audible feedback
Create a persistent ARIA live region and announce processing, spell check complete, no changes, and errors with short messages.

Keep building

Related workflows

Create an Automated Workout Tracker with a Simple Claude Voice Note
beginnerPersonalClaude

Create an Automated Workout Tracker with a Simple Claude Voice Note

Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.

Open
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
advancedOperationsClaude

How to Rebuild Your Gmail Inbox Inside Claude to Manage Email

Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.

Open
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
intermediateSalesClaude

Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'

Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready