Run any Skill in Manus with one click

accessibility-audit

Stars7

Forks3

UpdatedJanuary 26, 2026 at 02:16

Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

cskiro

cskiro/claudex

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

5 files

SKILL.md

readonly

name	accessibility-audit
description	Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.
author	Connor
triggers	["accessibility audit","WCAG compliance","a11y review","screen reader","keyboard navigation","color contrast"]

Accessibility Audit Skill

Comprehensive WCAG 2.2 Level AA accessibility auditing for React/TypeScript applications with MUI framework awareness.

Quick Reference

Severity	Impact	Examples
Critical	Blocks access completely	Keyboard traps, missing alt on actions, no focus visible
High	Significantly degrades UX	Poor contrast on CTAs, no skip navigation, small touch targets
Medium	Minor usability impact	Missing autocomplete, unclear link text
Low	Best practice enhancement	Could add tooltips, more descriptive titles

Key Principle

Severity = Impact x Likelihood, NOT WCAG conformance level. A Level A failure can be LOW severity; a Level AA failure can be CRITICAL.

Required Tooling

# Install required tools
npm install --save-dev eslint-plugin-jsx-a11y jest-axe @axe-core/playwright

# Configure ESLint
# Add to .eslintrc: extends: ['plugin:jsx-a11y/recommended']

Workflow

Phase	Description
1. Setup	Install tooling, create output directories
2. Static Analysis	ESLint jsx-a11y scan
3. Runtime Analysis	jest-axe and Playwright
4. Manual Validation	Keyboard, screen reader, contrast
5. Report Generation	JSON + Markdown outputs

Phase 1: Setup

See workflow/setup.md for installation and configuration.

Phase 4: Manual Validation

See workflow/manual-validation.md for keyboard and screen reader testing.

Reference

Severity Rubric - Impact x Likelihood calculation
MUI Framework Awareness - Built-in accessibility features

Common False Positives to Avoid

Component	Built-in Behavior	Don't Flag
MUI `<SvgIcon>`	Auto `aria-hidden="true"`	Icons without titleAccess
MUI `<Alert>`	Default `role="alert"`	Missing role attribute
MUI `<Button>`	36.5px min height	Target size < 44px
MUI `<TextField>`	Auto label association	Missing label
MUI `<Autocomplete>`	Manages ARIA attrs	Missing aria-expanded

Quick Audit Command

Run accessibility audit on [component/page] following WCAG 2.2 AA standards

Related Skills

codebase-auditor - General code quality analysis
bulletproof-react-auditor - React architecture review

More from this repository

same repository

ascii-diagram-creator

cskiro/claudex

Use PROACTIVELY when user asks for ASCII diagrams, text diagrams, or visual representations of systems, workflows, or relationships. Triggers on "ascii diagram", "text diagram", "visualize", "show how X connects/synergizes", "diagram the flow/phases", or "illustrate relationships". Generates terminal-compatible diagrams using box-drawing characters. Supports architecture, before/after, phased migration, data flow, and relationship/synergy diagrams. Not for image generation or graphical output.

2026-01-267

benchmark-report-creator

cskiro/claudex

Use PROACTIVELY when creating research reports, experiment writeups, technical whitepapers, or empirical study documentation. Orchestrates the complete benchmark report pipeline with structure, diagrams, hi-res PNG capture, and PDF export. Provides working scripts, CSS templates, and complete command sequences for publication-quality AI/ML benchmark reports. Not for slides, blog posts, or simple README files.

2026-01-267

bulletproof-react-auditor

cskiro/claudex

Use PROACTIVELY when users ask about React project structure, Bulletproof React patterns, or need architecture guidance. Covers structure setup, codebase auditing, anti-pattern detection, and feature-based migration planning. Triggers on "bulletproof react", "React structure help", "organize React app", or "audit my architecture".

2026-01-267

cc-insights

cskiro/claudex

Use PROACTIVELY when searching past Claude Code conversations, analyzing development patterns, or generating activity reports. Automatically processes conversation history from the project, enables RAG-powered semantic search, and generates insight reports with pattern detection. Provides optional dashboard for visualization. Not for real-time analysis or cross-project searches.

2026-01-267

claude-md-auditor

cskiro/claudex

Use PROACTIVELY when reviewing CLAUDE.md configurations, onboarding new projects, or before committing memory file changes. Validates against official Anthropic documentation, community best practices, and LLM context optimization research. Detects security violations, anti-patterns, and compliance issues. Not for runtime behavior testing or imported file validation.

2026-01-267

codebase-auditor

cskiro/claudex

Use PROACTIVELY when auditing code quality, running security scans, assessing technical debt, reviewing code for production readiness, setting up CI quality gates, or tracking DORA metrics. Analyzes codebases against OWASP Top 10, SOLID principles, Testing Trophy, and 2024-25 SDLC standards. Supports incremental audits for large codebases. Not for runtime profiling or real-time monitoring.

2026-01-267

name	accessibility-audit
description	Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.
author	Connor
triggers	["accessibility audit","WCAG compliance","a11y review","screen reader","keyboard navigation","color contrast"]

Accessibility Audit Skill

Comprehensive WCAG 2.2 Level AA accessibility auditing for React/TypeScript applications with MUI framework awareness.

Quick Reference

Severity	Impact	Examples
Critical	Blocks access completely	Keyboard traps, missing alt on actions, no focus visible
High	Significantly degrades UX	Poor contrast on CTAs, no skip navigation, small touch targets
Medium	Minor usability impact	Missing autocomplete, unclear link text
Low	Best practice enhancement	Could add tooltips, more descriptive titles

Key Principle

Severity = Impact x Likelihood, NOT WCAG conformance level. A Level A failure can be LOW severity; a Level AA failure can be CRITICAL.

Required Tooling

# Install required tools
npm install --save-dev eslint-plugin-jsx-a11y jest-axe @axe-core/playwright

# Configure ESLint
# Add to .eslintrc: extends: ['plugin:jsx-a11y/recommended']

Workflow

Phase	Description
1. Setup	Install tooling, create output directories
2. Static Analysis	ESLint jsx-a11y scan
3. Runtime Analysis	jest-axe and Playwright
4. Manual Validation	Keyboard, screen reader, contrast
5. Report Generation	JSON + Markdown outputs

Phase 1: Setup

See workflow/setup.md for installation and configuration.

Phase 4: Manual Validation

See workflow/manual-validation.md for keyboard and screen reader testing.

Reference

Severity Rubric - Impact x Likelihood calculation
MUI Framework Awareness - Built-in accessibility features

Common False Positives to Avoid

Component	Built-in Behavior	Don't Flag
MUI `<SvgIcon>`	Auto `aria-hidden="true"`	Icons without titleAccess
MUI `<Alert>`	Default `role="alert"`	Missing role attribute
MUI `<Button>`	36.5px min height	Target size < 44px
MUI `<TextField>`	Auto label association	Missing label
MUI `<Autocomplete>`	Manages ARIA attrs	Missing aria-expanded

Quick Audit Command

Run accessibility audit on [component/page] following WCAG 2.2 AA standards

Related Skills

codebase-auditor - General code quality analysis
bulletproof-react-auditor - React architecture review