Audit Your UI Components for Accessibility Issues with Claude

Accessibility problems are invisible until someone files a bug or a compliance report lands — ask Claude to audit your components before that happens.

claude "Read every component in src/components/ and audit them for WCAG 2.1 AA accessibility issues. Check for missing aria labels, incorrect roles, keyboard navigation gaps, insufficient colour contrast ratios, and missing focus indicators. Group findings by severity."

Claude catches the issues that automated tools like axe-core miss — not just missing alt attributes, but semantic problems like buttons implemented as divs, modals that don't trap focus, and form errors that aren't associated with their inputs via aria-describedby.

For a targeted fix rather than an audit, paste the component directly:

claude "Here is my Modal component. Fix every accessibility issue you find — focus trapping, aria-modal, labelling, and keyboard dismissal. Show me the diff."

You can also ask Claude to add automated a11y tests using jest-axe alongside any fixes:

// Claude will add tests like this
it('has no accessibility violations', async () => {
  const { container } = render(<Modal isOpen title="Confirm" />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

An accessibility audit with Claude takes minutes — the alternative is a compliance remediation sprint.