Frontend development skills
Accessibility Skills-md for Claude, Codex & AI Agents
Free SKILL.md files that teach Claude, Cursor and other AI agents to audit and fix accessibility failures that code can measure: colour pairs below WCAG 2.2 ratios, focus that disappears or lands behind a sticky header, and ARIA that hides or mislabels controls. Each skill runs a read-only checker first and changes code only in batches you approve.
4 skills published so far in a set planned as 12: colour contrast, keyboard focus, ARIA names and roles, and ARIA live announcements.
Start with Colour Contrast if Lighthouse or axe reports low contrast or a brand palette must pass AA. Start with Keyboard Focus if a menu cannot be reached with Tab, the focus ring has gone, or focus lands behind a sticky header.
Colour Contrast
Fix text, border and focus-ring contrast under WCAG 2.2 with a checker, a browser probe and measured fixes.
Keyboard Focus
Fix tab order, focus rings and focus hidden under sticky content with a static checker and a real Tab-key walk.
ARIA Names and Roles
Fix unnamed buttons, aria-label on divs and invalid roles with a checker and the names the browser computed.
ARIA Live Announcements
Fix silent toasts, conditional live regions and hidden status messages with a checker and a click-through probe.
No skill matches that search. Clear it or choose All.
What is in this set
The set covers accessibility problems that an agent can measure in code: text and interface colours that fall under WCAG 2.2 contrast ratios, focus that is lost, hidden or covered, and ARIA that gives controls the wrong name or hides them from assistive technology. Each skill ships a read-only checker and a verification step, and each says what automation cannot see, so a clean report is never presented as a conformance claim.
The WebAIM Million 2026 report (home pages of the top 1,000,000 sites, testing February 2026) found detectable WCAG 2 failures on 95.9% of pages. Pages with ARIA averaged 59.1 errors against 42 for pages without. That is a correlation and not proof of cause, which is why the planned ARIA skill will treat native HTML as the first fix.
How to use these skills
Open a skill page, copy the file or download the .md and its checker script, and add the folder to your skills directory in Claude, Cursor or another agent. Then ask the agent to use the skill on a stylesheet or a page you own.
Frequently asked questions
Who are the accessibility skills for?
They are for frontend developers, theme builders and designers who hand colours to developers, and for anyone who reviews code written by an AI tool. Each skill reads your CSS or markup with a checker, measures in a browser where needed and edits in small batches you approve.
Do these skills change my code without asking?
No. Each skill reports first and edits only after you approve a batch, on a branch under version control. It never pushes, merges or deploys. Browser probes run only on pages you own and print selectors and numbers, never page text.
Does a clean report mean my site meets WCAG?
No. A clean run means the pairs and elements the skill checked pass. It is not a conformance claim and not legal advice. Automated checks miss gradients, images and screen reader behaviour, so a human accessibility review is needed before any conformance statement.
Which accessibility skill should I install first?
Install Colour Contrast first if Lighthouse or axe flags low contrast, because it fixes the most common failure. WebAIM found low contrast text on 83.9% of home pages in 2026. Add Keyboard Focus when focus is lost or hidden. An ARIA names and roles skill is planned for controls that are announced wrongly.
