Module 6 · Check it
The eight-lane audit
Your site runs. Now you stop being its author and become the person on the other side: someone on a phone at night, someone using a screen reader, someone who reads slowly because they are exhausted. This lesson is eight checks on the running site, one prompt, a fix loop, and a short list of things only you can test. When you finish, the site is ready for the compliance lesson.
Why the audit is its own job
You have looked at this site for days. You know what every button is meant to do, so you no longer see whether it does it. It is the same reason proofreading your own notes is harder than proofreading a colleague’s. The fix is to change who is reading.
The Build Kit has no audit skill, on purpose: the audit is a checklist, and it lives in Stage 5 of your kit’s CLAUDE.md. The prompt below hands your site to Claude as an outside reader with that checklist. Claude opens the preview and clicks through the pages rather than only reading the code, reports what it finds in plain sentences, and tells you which findings are your decision.
The eight lanes
1 · Phones and screens
Every page works at phone, tablet and laptop widths. Nothing scrolls sideways. Buttons are big enough to tap. The sticky bar never covers the crisis block.
2 · Accessibility
Contrast, headings, alt text, form labels and a working keyboard path. The four checks below do most of the work.
3 · Reading level
The Flesch-Kincaid grade of every page, and every sentence over 25 words. Aim for grade 6 to 8.
4 · Search basics
Each page has its own title and description, a sitemap file exists, and the structured-data block carries no review or rating markup.
5 · Speed
Images sized sensibly, only the fonts you use, and nothing jumping around while the page loads.
6 · Links and content
No broken links, no leftover [brackets], every link says where it goes, and your name, license line and phone are the same everywhere.
7 · The next step
One primary action in the same words on every page, the line under the button, the openings line with its date, and a tap-to-call number.
8 · Contact form and scripts
The form asks only the logistics fields from Module 5, and the site loads no analytics, advertising pixel, session recording or chat widget.
Paste this into Claude Code
Audit my whole site — all eight lanes
Let's do Stage 5 — the audit part only. Work through all eight lanes in CLAUDE.md on the running site: open the preview and click through the pages, don't only read the code. 1. PHONES AND SCREENS — check at about 375px, 768px and 1440px wide. Tell me specifically whether the sticky bar ever covers the crisis block, the form's button or the end of a page. 2. ACCESSIBILITY — WCAG 2.2 level AA: contrast, headings in order, alt text, a real label on every field, the keyboard path with a visible focus ring, page language, nothing that moves or plays by itself. Never suggest an overlay widget. 3. READING LEVEL — the Flesch-Kincaid grade of each page's main text, and every sentence over 25 words. 4. SEARCH BASICS — titles, descriptions, sitemap.xml, robots.txt, and the structured data with no review, rating or FAQ markup. 5. SPEED — image sizes and formats, font weights, layout shift. 6. LINKS AND CONTENT — broken links, "click here" links, leftover [brackets], and whether my name, license line, phone and states match on every page. 7. THE NEXT STEP — check every page against site-map.md. 8. CONTACT FORM AND SCRIPTS — compare the form to the field list in the frontend-design skill, then list every third-party script, pixel, tag and iframe on every page. Report what you found in short plain sentences before changing anything. Say which findings you verified in the preview and which you inferred from the code. Then fix what you can, save a snapshot, and give me a numbered list of anything that needs my decision. Stop before the compliance check; I'll run that in the next lesson.
What to check: read the report before you agree to any fix. Check two things in particular: that lane 8 lists zero analytics, advertising or chat scripts, and that lane 1 names the crisis block explicitly. If the report does not mention either, ask Claude to check them again by name.
Four accessibility checks that do most of the work
Your site will be read by people with low vision, people who use a keyboard instead of a mouse, and people whose concentration is thin that day. The practitioners who write about accessible design for therapy practices make the point that an unusable site costs the most for exactly the person who was already unsure about reaching out. These four checks catch the failures that show up most often.
Contrast: pale gray text is the most common failure
Body text needs a contrast ratio of at least 4.5:1 against its background. Large text, buttons, form borders and icons need at least 3:1. Soft gray text “looks calmer” and fails. Sage green (#9CAF88) on white is 2.36:1, which is fine for a decorative shape and fails for words. Text laid over a photo has no single ratio at all, because the photo changes under it, so put that text on a solid panel.
| Text color | Contrast on white | Body text? |
|---|---|---|
#333333 | 12.63:1 | Passes |
#555555 | 7.46:1 | Passes |
#666666 | 5.74:1 | Passes |
#767676 | 4.54:1 | Passes, barely. The lightest gray that does. |
#999999 | 2.85:1 | Fails |
Headings: the page’s table of contents
Screen-reader users move around a long page by jumping from heading to heading. In WebAIM’s Screen Reader User Survey #10 (1,539 responses), 71.6% said that is how they find information on a long page. So use real headings in order, one main heading per page, and make the headings read as a sensible list on their own. Text that is merely big and bold is not a heading.
Alt text: the headshot rule surprises people
Alt text is the short description a screen reader speaks in place of an image. If your photo sits right beside your printed name, the correct alt text is empty (alt=""), because the name is already on the page and repeating it adds noise. A photo with no name beside it needs a real description. Decorative shapes get empty alt text.
The keyboard path
Put the mouse down. Press Tab from the top of the page. You should be able to reach and use every link, button and form field, in a sensible order, and always see where you are. If a sticky bar hides the thing you just tabbed to, that is a finding.
- WAVE (wave.webaim.org): paste your address and it marks problems on the page.
- Lighthouse, built into Chrome: right-click the page, choose Inspect, open the Lighthouse tab, run the accessibility report.
- The keyboard test above. It takes two minutes and catches what scanners miss.
A perfect automated score does not mean a person can use the page. Tools cannot tell whether your alt text is accurate or whether your headings make sense. When the checklist and the score disagree, the checklist wins.
You will be offered one: a single line of code that adds a floating accessibility button. It cannot fix the page underneath it. A missing heading, an unlabeled form field or a keyboard trap stays exactly as broken. Fixing contrast, headings, labels and the keyboard path on a six-page site is an afternoon, and it actually helps.
Reading level, without the folklore
Paste each page’s main text into a readability tool, or use the prompt below. Aim for a Flesch-Kincaid grade of 6 to 8, and treat anything above 10 as a rewrite. Flesch-Kincaid is the measure used in the published studies of mental-health web content, so it is the one to name. You may have heard a claim about the reading level of “the average American”; the federal literacy surveys do not report grade levels, so leave that claim out of your thinking. What they do report is worth knowing: in the PIAAC survey, the share of US adults at Level 1 or below in literacy rose from 19% to 28% between 2017 and 2023.
Check the reading level of every page
Read every page of my site without changing anything. For each page, give me the Flesch-Kincaid grade of the main text, and list every sentence over 25 words with the page it is on. Then suggest a shorter version of the three hardest sentences on each page, keeping my meaning and my first-person voice.
What to check: check that the suggested rewrites still sound like you and still describe rather than promise. You were trained to write in long, careful clinical sentences, and here they work against you. Accept the shorter version only where it says the same thing.
Calm by default
Some of your visitors are neurodivergent, and sensory needs run in both directions. The dependable approach is to keep the page low-intensity and leave the visitor in control.
- Nothing plays, slides or animates by itself: no autoplay video, no carousel.
- Any motion switches off when the visitor’s device asks for reduced motion.
- The menu is in the same place, in the same order, with the same words on every page.
- No countdowns, no “spots left”, no pop-ups.
- The site never blocks zooming or overrides the visitor’s font size.
The two lanes only you can finish
Claude can read your code and click through the preview. It cannot hold your phone or read your inbox. Lanes 7 and 8 end with you.
The next step — check with your own eyes
- Open
site-map.mdbeside the running site. The primary button uses the same words on every page. - The line under the button and the openings line are there, and the openings line carries a date you can defend today.
- Blur your eyes at the homepage. The primary button is still the first thing you find.
- Your phone number is a tap-to-call link and visible without scrolling.
Contact form — check with your own phone
- Open the preview on your phone at phone width. Scroll to the bottom of three pages: the crisis block is never hidden behind the sticky bar.
- Submit the local form once more with made-up details only, never anything about a real person.
- Confirm the thank-you page appears and the notification arrives. The live test on the real address happens in Module 8.
- Read the form’s fields out loud. If any of them asks why someone wants therapy, it goes.
The fix loop
- Run the audit prompt and read the report before you approve anything.
- Let Claude fix the clear defects: contrast, alt text, labels, broken links, leftover brackets, missing titles.
- Work through its “needs your decision” list one item at a time, in plain English.
- Do your two hand checks on your own phone.
- Run the audit prompt once more. A clean second pass is what done looks like.
- Ask Claude to save a snapshot before you move on.
- Lane 1: every page works at phone width, and a phone screenshot of the bottom of your homepage shows the crisis block in full.
- Lane 2: contrast, headings, alt text, labels and the keyboard path all pass.
- Lane 3: every page’s main text is grade 10 or below, and you have shortened the longest sentences.
- Lane 4: every page has its own title and description, and there is no review or rating markup.
- Lane 5: images and fonts are sensible, and nothing jumps as the page loads.
- Lane 6: no broken links, no brackets, and your details match everywhere.
- Lane 7: one primary action, same words, every page.
- Lane 8: logistics-only form, and zero analytics, pixel, session-recording or chat scripts.
The accent color fails contrast. Ask Claude for the nearest darker shade of the same color that reaches 4.5:1 on your background, and use the light shade only for decoration.
Lighthouse says 100, but the keyboard test fails. Believe the keyboard test. Tell Claude exactly where focus disappeared or got stuck, and ask it to fix the markup.
A fix rewrote the crisis block or the form’s helper text. Those words are fixed. Ask Claude to restore them exactly as the kit’s copywriting skill writes them.
- Eight lanes, one prompt, run on the working site, not just the code. The checklist lives in your kit’s
CLAUDE.md. - Contrast of 4.5:1 for body text and 3:1 for large text and controls. Pale gray and sage green are the usual failures.
- Real headings, honest alt text (empty beside your printed name), and a keyboard path you have tried yourself.
- Reading level 6 to 8; above 10 is a rewrite.
- No overlay widget, no autoplay, and the sticky bar never covers the crisis block.
Watch this step
Three views of the same audit: a practical beginner's walkthrough, why a perfect automated score still misses real people, and the web standards body's own short introduction. It’s from an independent creator — credited below, so go give them a follow.
Is your website accessible? (Beginners Guide)
100 Lighthouse Score ≠ Accessible | Can Real Users Navigate Your Website?
Introduction to Web Accessibility and W3C Standards
More learning resources
Still want another angle? These are hand-picked and vetted to line up with this lesson — from creators and sites worth your time.