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 not associated with their inputs via aria-describedby:

// Before — Claude flags this
<div onClick={handleClick} style={{ color: '#aaa' }}>Submit</div>

// After — Claude's fix
<button
  onClick={handleClick}
  type="button"
  aria-label="Submit form"
  className="text-gray-700" // sufficient contrast ratio
>
  Submit
</button>

For a targeted fix rather than a full audit, paste a single component:

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

Then ask Claude to add automated a11y regression tests alongside the fixes:

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

For larger apps, ask for a prioritised audit ranked by WCAG conformance level (A, AA, AAA) so you know what to tackle first.

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