Skip to content
Get packs

Better Accessibility

Reviews and fixes keyboard, focus, ARIA, forms and motion issues against WCAG 2.2 criteria.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
8 files

What it does

Once installed, the agent reviews a website or app interface for accessibility problems such as missing keyboard access, invisible focus indicators, unlabeled form fields, and misused ARIA attributes. It reports each failure against the specific WCAG 2.2 success criterion it breaks and writes fixes in the project's own styling system. It favors native HTML elements over custom widgets and follows guidance on motion, hit-area size and announcements for screen readers.

Great for

  • Front-end developers who want a structured accessibility audit of a component or page
  • Designers and developers preparing a product for WCAG 2.2 compliance
  • Teams fixing forms, dialogs, or menus that fail keyboard or screen-reader testing

Skip it if

  • Legal or certified compliance sign-off: the skill gives guidance from its files, not an audited conformance result, and it cannot replace testing with real assistive technology and users.
  • Contrast measurement and color changes alone: the skill hands these to a separate better-colors skill, and it does not change colors itself unless asked.
  • Projects that need only text or layout work: those tasks are routed to other skills such as better-typography or better-layout.

Try asking

  • “Review this login form for keyboard and screen-reader problems and fix them.”
  • “Check my modal dialog for focus trapping and focus return after it closes.”
  • “Audit this navigation menu against WCAG 2.2 and report each failure with its criterion number.”
  • “Add visible focus styles to these buttons without removing the browser's default indicator.”
Step-by-step guide: how to use Better AccessibilityInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 8 original files, the MIT licence and an attribution note.

    better-accessibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip better-accessibility.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip better-accessibility.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a specific component or page and state the framework or styling system so fixes match your codebase.
  • Test the result yourself with a keyboard-only pass and a screen reader, since the skill is a guide and not a substitute for real assistive-technology testing.
  • Ask for a report first if you want to review findings before any files are changed.

What's inside

  • agents/openai.yaml
  • focus-and-keyboard.md
  • forms.md
  • hit-areas.md
  • motion-and-zoom.md
  • screen-readers.md
  • semantics-and-aria.md
  • SKILL.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.