SkillAudit web accessibility and address barriers in navigation, forms and content using WCAG 2.2 guidance.
Accessibility is an agent skill for developers reviewing or improving a website’s accessibility. Ask for an accessibility review, and the agent can select it when your request matches. It brings together WCAG 2.2 guidance, practical code patterns and automated and manual checks to help identify barriers and guide fixes.
When a rendered page and browser tools are available, it guides the agent toward findings tied to specific elements and components. Chrome DevTools MCP is optional; alternatives include Lighthouse CLI, axe and manual browser checks. Automated checks cover only some barriers, and a perfect accessibility score does not establish WCAG conformance.
When you need to decide which accessibility issues to address before release, use the skill to review a runnable page with automated findings and manual checks. It helps connect failures to the relevant components and distinguish issues needing immediate attention from less urgent fixes.
When users cannot reach controls, lose track of focus or get stuck in a dialog, use its keyboard and focus guidance to improve the interaction. Native controls, skip links and dialog patterns provide concrete ways to make navigation easier to follow and complete.
When a page looks clear but its structure or controls are unclear when read aloud, review headings, landmarks, language, image alternatives and accessible names. The skill also covers roles, states and live announcements so users can understand custom controls and changing content.
When labels, validation errors or login requirements make a flow difficult to complete, use the skill’s form and authentication guidance to identify changes. It covers associated labels, announced errors, avoiding repeated data entry, and allowing assistance such as password paste or autofill.
When text, controls or errors become hard to perceive, review contrast, color-only cues, zoom and high-contrast behavior. Check text-size thresholds against the W3C contrast criteria: the skill’s contrast table labels large-text sizes in pixels where W3C specifies points.
When small targets or drag-only interactions make a feature difficult to operate, use the target-size guidance and alternative-control patterns. A sortable list, for example, can offer move buttons alongside dragging so users have another way to reorder items.
When information is available only through sound or moving images, use the media guidance to identify where captions, descriptions or transcripts are needed. Its examples help you add alternatives that let users access the content through another format.
When a session expires before users can finish or interface animation causes difficulty, review timeout controls and reduced-motion behavior. The skill includes patterns for offering more time and adapting animation to the user’s motion preference.
When shared navigation or help moves between pages, use the consistency guidance to review its placement and identification. This helps users find the same functions without relearning each page.
Accessibility is also included in the Web Quality Skills Plugin.
Install the full PluginThese routes install the accessibility skill from its repository using Skills CLI, which requires Node.js 22.20.0 or later. The installer collects usage telemetry and may send the public repository and skill names for security-audit requests. To disable both, set DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 in your environment before running it; see the Skills CLI telemetry details.
Run this in a terminal from the project where you want the skill.
npx skills add addyosmani/web-quality-skills --skill accessibilityIf the installer asks for a target agent, select Claude Code. Choose Project for this project or Global for use across projects, then review the installation summary and confirm. If offered a symlink or copy choice, choose your preferred method. The optional find-skills offer installs a separate skill.
Claude Code picks up changes in existing skill directories automatically. If installation created a top-level skills directory during an open session, run the following in Claude Code.
/reload-skillsRun the following in Claude Code and check that accessibility appears in the available skills.
/skillsOnce available, Claude can select the skill for a matching request, or you can invoke it with /accessibility. See Claude Code skill loading and invocation.
Run this in a terminal from the project where you want the skill.
npx skills add addyosmani/web-quality-skills --skill accessibilityIf the installer asks for a target agent, select Cursor. Choose Project for this project or Global for use across projects, then review the installation summary and confirm. If offered a symlink or copy choice, choose your preferred method. The optional find-skills offer installs a separate skill.
Restart Cursor so it discovers the installed skill. In Agent chat, type / and search for accessibility to check that it is available.
Cursor can select the skill when relevant, or you can attach it to a message from that list. See Cursor skill discovery and invocation.
Run this in a terminal from the project where you want the skill.
npx skills add addyosmani/web-quality-skills --skill accessibilityIf the installer asks for a target agent, select Codex. Choose Project for this project or Global for use across projects, then review the installation summary and confirm. If offered a symlink or copy choice, choose your preferred method. The optional find-skills offer installs a separate skill.
Check for accessibility in the skills list: in Codex CLI or the IDE extension, open the skill selector by typing $; in the desktop app, open Skills in the sidebar. Codex detects skill changes automatically; restart it if the skill does not appear.
Codex can choose the skill for a matching task. To select it yourself, use $accessibility in the CLI or IDE extension, or the skill selector opened with @ in ChatGPT. See Codex skill discovery and invocation.
Run this in a terminal from the project where you want the skill.
npx skills add addyosmani/web-quality-skills --skill accessibilityIf the installer asks for a target agent, select OpenCode. Choose Project for this project or Global for use across projects, then review the installation summary and confirm. If offered a symlink or copy choice, choose your preferred method. The optional find-skills offer installs a separate skill.
Run the following in your terminal and check that accessibility is listed among the installed skills.
npx skills listOpenCode makes permitted skills available to the model, which can load accessibility when relevant. Its documentation does not provide a separate skill-availability check inside OpenCode; the installer’s list confirms installation.