sxsphinxstack

Skills / Accessibility pass

Accessibility pass

Audit a live site for accessibility and fix what turns up. Covers contrast, alt text, keyboard navigation, and form labels, tested with real tools. Use when they ask "is my site accessible", before they share a site widely, or after any skill that shipped pages.

Use this skill. Nothing to install.

Open in ChatGPT Open in Claude prefilled and ready; just hit send
for Gemini, Copilot, or Cursor: paste it, then say "use the accessibility pass skill"

Don't have an agent?  ·  Raw file: skills/accessibility-pass.md

Watch the first two minutes

This is how a session goes, including the test that surprises everyone. Click through it.

(pastes the skill) is my site accessible? someone asked and I honestly have no idea
Let's find out instead of guessing. Two tools plus two human tests. Start with the tools: run Lighthouse's accessibility audit in Chrome DevTools on every page and save the score as your "before".
it says 71. is that bad
It's a to-do list, and yours is short: low-contrast text in the footer, six images without alt text, and a search box without a label. All small fixes. The skill is finding them systematically rather than assuming the site is fine.
it looks completely fine to me though
To its author, on a good screen, with a mouse. Here is the first human test: unplug the mouse and Tab through the page. If you can't tell where you are, someone styled away the focus outline. Machines don't catch how that feels.
ok that was genuinely unusable. what do we fix first
Focus outline back first, since you just felt it. Then contrast: we nudge the flagged text in the WebAIM checker until it passes 4.5 to 1, and you pick the shade. Then alt text, written by you, because you know why each image is there. Decorative ones get alt="" so screen readers skip them.

Scripted example of a real session.

Looks fine on your screen?

That is the trap this skill exists for. A site gets built on one good monitor by one person with a mouse, and then real visitors read it on a dim phone in daylight, tab through it from a keyboard, or hear it through a screen reader. Most of what breaks for them is machine-checkable and cheap to fix, which is why the pass starts with free tools and ends with two tests no tool can run: your own eyes at arm's length, and your own hands without a mouse.

What you end up with

A before and after you can show, and a short list of habits that make the next site ship clean. A typical pass:

Example
Lighthouse · accessibility

before  71        after  98      1

fixed on the way:
contrast   footer text nudged to
           4.7:1, shade they chose  2
alt text   6 images described,
           2 marked decorative
focus      outline restored,
           styled to fit the site   3
labels     search box labeled
headings   one h1, h2s in order
           (shared with seo-basics)

keyboard   full Tab run-through,
           focus visible throughout
  1. 95 or better, on every page. That is the skill's bar, with both screenshots saved. The remaining points usually live in judgment calls the tools can't score, which is what the human tests are for.
  2. Fixes keep the design. Contrast almost always passes by darkening the text a step, with the author picking the new shade. Nothing about the pass makes a site look "accessible"; it makes it readable.
  3. Focus was never optional. If Tab makes the highlight vanish, someone wrote outline: none. Restoring or restyling it is a one-line fix that makes the whole page usable without a mouse.

Questions people actually ask

Does a small personal site really need this?

Yes, for a plain reason: the people it helps are already in your small audience, reading on bright screens and imperfect eyes and sometimes no mouse. And the pass pays you back, since the habits it builds mean your next site ships clean without one.

Do the tools cost anything?

No. Lighthouse ships inside Chrome DevTools, the axe DevTools browser extension has a free version that covers this pass, and the WebAIM contrast checker is a free web page. The two human tests cost a mouse unplugged and a walk into daylight.

Will the fixes ruin my design?

Almost never. The most common fix is darkening a text color one step, chosen by you. Alt text is invisible, labels can be styled, and a focus outline can be designed to match the site instead of the browser default.

What counts as done?

Lighthouse accessibility at 95 or better on every page with before and after saved, a full keyboard run-through with visible focus, and every image either deliberately described or deliberately skipped with an empty alt.

What is a screen reader, actually?

Software that reads the page aloud or renders it as braille, used by blind and low-vision visitors. It navigates by your headings, announces your alt text, and names inputs by their labels, which is why those three fixes carry most of this pass.

Where to go from here

Pass done? These share tools and habits with it:

Make it fast, same report Headings do double duty Forms with labels from day one
Curious? Read the full skill — the exact instructions your agent gets 
---
name: accessibility-pass
category: web
description: Audit a live site for accessibility and fix what turns up. Covers contrast, alt text, keyboard navigation, and form labels, tested with real tools. Use when they ask "is my site accessible", before they share a site widely, or after any skill that shipped pages.
---

# accessibility-pass

Check someone's live site against how people actually use
the web: on bright screens, without a mouse, with screen readers,
with imperfect vision. Most fixes are small; the skill is finding
them systematically instead of assuming the site is fine because it
looks fine to its author.

## Run the tools

1. Run a Lighthouse accessibility audit (Chrome DevTools, same panel as
   make-it-fast) on every page. It catches the machine-checkable
   layer: contrast failures, missing alt, missing labels, missing
   `lang`. Save the score as the "before".
2. axe DevTools, the free browser extension, on the worst page —
   it explains each finding better and catches things Lighthouse
   skips. One page is enough to learn the failure patterns.
3. The tools stop at what machines can check, so add two human
   tests: put the phone at arm's length in daylight and try to read
   it, and do the keyboard test below.

## Fix what turned up

Work through findings with them making the calls; each fix is a
one-line explanation.

- Contrast: every flagged text/background pair gets checked in the
  WebAIM contrast checker and nudged until it passes 4.5:1 (3:1 for
  large text). They pick the new shade — darkening the text usually
  keeps the design intact.
- Alt text: every meaningful image gets a description of what it
  shows, written by them, since they know why the image is there.
  Purely decorative images get `alt=""` so screen readers skip them.
- Keyboard: unplug the mouse. Tab through the whole page — every
  link and button reachable, in an order that makes sense, with a
  visible focus outline. If focus vanishes, someone styled
  `outline: none`; restore it or style a better one.
- Labels and structure: every input has a `<label>` (forms-that-work
  does this from the start), the page has one h1 and ordered
  headings (shared work with seo-basics), links say where they go —
  "see the project" beats "click here".

Automated tools cannot prove that a site is accessible. Treat their
findings as a repeatable first pass and record what was checked manually.

## Done

- Before/after reports saved, with every critical or serious automated
  finding resolved or documented with a reason
- Full keyboard run-through works with visible focus throughout
- Labels, heading order, image alternatives, and contrast checked manually
- They can name the two or three things they will now do by default
  in everything they build next

That last point is the real product: the next site they build with
build-website should not need this pass.