Menu
React accessibility conventions — semantic HTML, ARIA, keyboard navigation, and screen reader support
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.
Based on SOC occupation classification
Health check procedures D1–D14 for the Audit agent — structural validation, attention budget, version checks, workspace integrity, and static audit
Configure and manage Model Context Protocol servers for external tool access
Review a UI for accessibility — WCAG 2.1 AA compliance, semantic HTML, ARIA usage, keyboard navigation, focus management, colour contrast, and screen reader compatibility
Design or review a REST or GraphQL API — resource modeling, versioning strategy, error contract, OpenAPI/schema-first workflow, and security baseline
Generate a CHANGELOG.md entry from staged changes, a commit range, or a PR diff — following Keep a Changelog format with conventional commit classification
Set up and audit environment variable management — create .env.example, add startup validation, separate secrets from config, and document every variable
| name | react-accessibility |
| description | React accessibility conventions — semantic HTML, ARIA, keyboard navigation, and screen reader support |
| compatibility | >=1.4 |
Skill metadata: version "1.0"; license MIT; tags [react, accessibility, a11y, aria, wcag]; recommended tools [codebase, editFiles].
Applies to: **/*.tsx, **/*.jsx
button, nav, main, article, header) instead of styled divs.img must have an alt attribute. Use alt="" for decorative images.label element or aria-label.aria-live="polite" for dynamic content updates (loading states, notifications).role="alert" for error messages that require immediate attention.aria-expanded, aria-controls, and aria-haspopup for interactive disclosure widgets.h1–h6) in sequence — do not skip levels.prefers-reduced-motion media query to respect user motion preferences.