All skills / Developers

Accessibility Quick Audit

Give it a page's HTML or components. Get accessibility issues ranked by impact, with the WCAG criterion, the code and a fix. Free, MIT-licensed.

Free, MIT licence, hosted on GitHub. Install the whole free set with npx skills add proskillpacks/skills, or copy this skill's folder.

What you give it

A URL, pasted HTML or component files.

What you get

It checks text alternatives, form labels, link and button names, headings and landmarks, keyboard and focus, ARIA, contrast where the colours are visible, media and zoom.

Before and after

Taken from the skill's README.

Before: A generic "add alt text and check contrast" checklist that does not point at your code.

After (skill output, from a real test run): Test run on the W3C's public inaccessible demo page. Opening line, unedited: "Found 12 high-impact, 9 medium and 5 low issues in the markup I read." Issue 1: onFocus="blur();" on 20+ links, first at line 248, which removes keyboard focus, with the fix. It also noticed the page was the W3C demo and not a small organisation's site, said so, and audited what was there.

What it does

Give it a URL, pasted HTML or component files. It checks text alternatives, form labels, link and button names, headings and landmarks, keyboard and focus, ARIA, contrast where the colours are visible, media and zoom. You get issues ranked by impact with the WCAG criterion, the quoted code, who it affects and a fix, plus what needs a human check. It never says a page is accessible.

How it was tested

1 real-data run on a public demo page built with known accessibility faults (Claude Sonnet). Issues traced to quoted lines.

Tested on a real example before release. The example is shown in the Before and after section above.

How we test, what we do not do, and which assistants we ran it on.

Limits

  • It reads markup. It does not run a browser, so content added by JavaScript and real focus order are not checked.
  • It is not a legal accessibility audit or a conformance statement.
  • Alt text quality, reading order and caption accuracy need a human. It lists them with a one-line test for each.
  • It computes contrast only where colour values are visible in the code.

Works with

Works in ChatGPT or any chatbot: you paste in your details and it writes the result. The chargeback kit also has Word letters you can fill in by hand, with no AI. Reading a URL needs a web fetch tool, otherwise paste the HTML.

For people who use AI assistants

  1. Run npx skills add proskillpacks/skills in your project and pick this skill. Or copy the accessibility-quick-audit folder from GitHub (https://github.com/proskillpacks/skills/tree/main/skills/developers/accessibility-quick-audit).
  2. Put the accessibility-quick-audit folder where your assistant looks for skills. The generic path is .agents/skills/ (or npx skills add from a folder). Tool-specific paths:
    • Claude Code: ~/.claude/skills/ (or .claude/skills/ inside one project)
    • OpenAI Codex, Gemini CLI, Cursor and others: .agents/skills/ or the skills folder their docs name
    • claude.ai: zip the skill folder yourself, then Customize, Skills, the plus button, Create skill, Upload a skill (code execution must be on in Settings, Capabilities)
    • ChatGPT or any chatbot: open the skill's prompt.md, paste it into the chat, then paste your own text or link
    • Steps for each tool, with links to its official docs: how to install Agent Skills
  3. Ask for the job in plain words, for example: "Audit this page for accessibility, WCAG 2.2 AA: [URL or pasted HTML]". The skill loads by itself.

Get it

MIT licence. Use it, change it, share it.

Related

Report a problem with this skill (GitHub, or write to kaiventura.founder@gmail.com).