Web Accessibility (a11y)
@addyosmaniAddy Osmani's WCAG 2.2 accessibility skill: audit workflow, code patterns, testing checklist and issues ranked by impact.
Instruction-only skill; it suggests running Lighthouse or axe via npm but bundles no scripts and needs no credentials.
Install Web Accessibility (a11y) in Google Antigravity
Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide
Install the "Web Accessibility (a11y)" skill for Google Antigravity. Follow the steps at https://www.antigravityskills.org/install/web-accessibility.md (source: https://github.com/addyosmani/web-quality-skills/tree/main/skills/accessibility). Before running anything, show me what you will download and whether it includes scripts, and wait for my OK. Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.
The agent reads the install file, shows you what it will download and waits for your OK.
Option 2: install it yourself
- 1. Clone the source repository
git clone --depth 1 https://github.com/addyosmani/web-quality-skills /tmp/web-quality-skills
Download the repository that contains the skill to a temporary folder.
- 2. Copy the skill into your workspace
mkdir -p .agents/skills && cp -r /tmp/web-quality-skills/skills/accessibility .agents/skills/
Run this from your project root. Antigravity reads workspace skills from <project>/.agents/skills/<folder>/, so you should end up with .agents/skills/accessibility/SKILL.md.
- 3. Or install it globally
mkdir -p ~/.gemini/config/skills && cp -r /tmp/web-quality-skills/skills/accessibility ~/.gemini/config/skills/
Use this instead of the workspace copy to have the skill in every project (Antigravity docs: ~/.gemini/config/skills/). For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
- 4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. accessibility is listed.
The web-quality-skills README does not mention Antigravity (it documents the skills CLI, Claude Code, Codex, Gemini CLI and claude.ai). No API keys. Live audits need Node.js (npx lighthouse) or axe, or Chrome DevTools MCP; without them the agent can still apply the guidance by reading your code. Keep the references/ folder next to SKILL.md.
Using Claude Code, Cursor or Codex? See other assistants below.
What is Web Accessibility (a11y)?
How to use Web Accessibility (a11y)?
Key features of Web Accessibility (a11y)
- ✓We counted at afa8da9: the folder has 3 files (SKILL.md 464 lines and 14,358 bytes, references/WCAG.md 191 lines, references/A11Y-PATTERNS.md 233 lines; 29,473 bytes in total) and no scripts.
- ✓We counted: 6 criteria marked "new in 2.2" (2.4.11 focus not obscured, 2.5.7 dragging, 2.5.8 target size, 3.2.6 consistent help, 3.3.7 redundant entry, 3.3.8 accessible authentication) and 19 code blocks in SKILL.md.
- ✓We counted: the only commands are npx lighthouse ... --only-categories=accessibility and a global npm install of @axe-core/cli; everything else is guidance. The workflow prefers Chrome DevTools MCP (lighthouse_audit, take_snapshot) when it is available and falls back to those CLIs.
- ✓SKILL.md says: automated tools detect only a subset of barriers and a score of 100 is not WCAG conformance; it ends with fixes sorted into Critical, Serious and Moderate and a manual testing checklist.
- ✓We counted: the same repo has 6 skills (accessibility, performance, core-web-vitals, seo, best-practices, web-quality-audit); this one is the only accessibility-specific skill in it.
- ✓README says: install via npx skills add, a Claude Code plugin, a Codex marketplace, a Gemini CLI extension or claude.ai; Antigravity is not mentioned (we searched the repo).
When to use Web Accessibility (a11y)
- 1Audit a landing page before launch and fix failing items
- 2Add accessible names, focus styles and skip links
- 3Check forms for labels, errors and accessible authentication
Installation & Setup Guide
Agent Rules / Prompt SetupFollow these steps (taken from the project's own docs) to configure Web Accessibility (a11y) in your development environment.
npx skills add addyosmani/web-quality-skills
Documented in the repo README; installs all web-quality skills including accessibility.
/plugin marketplace add addyosmani/web-quality-skills
Then /plugin install web-quality-skills@addy-web-quality-skills, per the README.
The README names Cursor only as a tool supported by the add-skill CLI; no Cursor-specific steps are documented.
Usage Example & Verification
1) README example: "Review accessibility and suggest improvements" -> The skill activates from the request; the agent follows the evidence-led workflow (audit, locate the failing nodes, fix, re-audit). 2) Our example: "Run an a11y audit on this page and fix the critical issues." -> With a runnable page the agent runs Lighthouse (or axe), edits the failing elements, then repeats the audit and a keyboard pass. 3) Our example: "Check this signup form for WCAG 2.2 accessible authentication and redundant entry." -> Uses the 3.3.8 and 3.3.7 sections: allow paste in password fields, offer passkey or email-link sign-in, and do not make users re-enter data already given (the SKILL.md examples).
Security Review
Static reviewInstruction-only skill; it suggests running Lighthouse or axe via npm but bundles no scripts and needs no credentials.
Full review: scope, findings, risks
At commit afa8da9 skills/accessibility/ contains SKILL.md, references/WCAG.md and references/A11Y-PATTERNS.md; none are executable. SKILL.md suggests npx lighthouse https://example.com --only-categories=accessibility and npm install @axe-core/cli -g followed by axe <url>, which download npm packages and fetch the audited page. When Chrome DevTools MCP is available it suggests the lighthouse_audit and take_snapshot tools. Other URLs are documentation links (W3C, Deque, WebAIM, NV Access, TPGi). No environment variables or API keys are used. This is a static review; we did not run the commands.
Operational Notes & Known Limitations
Known Limitations
- •Live audits need Node.js (npx lighthouse) or axe installed.
- •SKILL.md itself says automated tools catch only a subset of barriers and a score of 100 is not WCAG conformance.
- •Screen reader and high-contrast checks are manual steps for a human.
- •Web only (HTML/ARIA); not a native mobile guide.
Frequently Asked Questions
Is the Accessibility skill safe?
In our static review of commit afa8da9 it is three Markdown files with no scripts or API keys. It suggests running npx lighthouse and npm install @axe-core/cli -g, which download npm packages and load the page being audited.
How do I install Accessibility in Antigravity?
The web-quality-skills README does not mention Antigravity. Copy skills/accessibility into .agents/skills/ (or ~/.gemini/config/skills/), keep the references/ folder, then ask "What skills do you have?" (CLI: /skills).
Which WCAG version does it follow?
WCAG 2.2, organised by Perceivable, Operable, Understandable and Robust, including the six criteria new in 2.2.
Does a perfect Lighthouse score mean my site is accessible?
No. The SKILL.md says a score of 100 is not WCAG conformance and automated tools find only a subset of barriers.
Supported Platforms
Keep exploring this topic
Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.
Related Skills
Web Design Guidelines
@vercel-labs
Vercel's review skill: fetches Vercel's Web Interface Guidelines at run time, checks the files you name and lists violations as file:line findings.
Impeccable
@pbakaus
Paul Bakaus's Impeccable design skill: one /impeccable skill with 24 design commands, live browser iteration and a 59-rule detector for AI-generated frontend patterns.
UI/UX Pro Max
@nextlevelbuilder
Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.
Popular Skills
View All →Agent Manager
@sickn33
Manage multiple local CLI agents via tmux sessions.
Systematic Debugging
@sickn33
Debug systematically, not randomly. Find and fix bugs methodically.
Browser Automation (Playwright)
@sickn33
Expert browser automation for cleaning scraping and reliable testing.