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

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

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

export default AccessibleButton;