# Accessibility Auditor

> Audit HTML/JSX code against WCAG 2.1 guidelines and provide accessible ARIA code fixes.

- Skill: `rmazrim/accessibility-auditor` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rmazrim/accessibility-auditor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rmazrim/accessibility-auditor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: RMAzrim (https://skillmd.com/u/rmazrim)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/rmazrim/accessibility-auditor

---


# Accessibility Auditor

## Prerequisites & Dependencies
- Node.js 18+ (for running CLI tools) or a modern browser with DevTools
- Mandatory packages: `npm i axe-core @axe-core/react` or `npm i pa11y`
- Required environment variables: `NODE_ENV=development` (optional, for CI integration)

## Execution Steps
1. Install accessibility dependencies: `npm i axe-core @axe-core/react`
2. Create a test component that renders your UI with meaningful ARIA labels and semantic HTML
3. Run automated accessibility testing: `npx axe-cli ./src/index.js` or integrate with Jest via `jest-axe`
4. Review the report and apply suggested ARIA fixes (e.g., missing `aria-label`, `role=` attributes, color contrast ratios)
5. Manually keyboard-test your component (Tab navigation, Escape handling, focus management)
6. Verify fixes against WCAG 2.1 AA criteria: perceivable, operable, understandable, robust

```javascript
// Example: Accessible button with ARIA labels and keyboard handling
import React from 'react';

const AccessibleButton = ({ onClick, label }) => (
  <button
    onClick={onClick}
    aria-label={label}
    className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
  >
    {label}
  </button>
);

export default AccessibleButton;
```