← All fix prompts
S1E08 · Legal BugsFREE

Accessibility (EAA) fix prompt

Audit and fix the accessibility failures AI-generated UI ships with (contrast, semantics, alt text, keyboard), aiming for WCAG 2.2 AA.

Use it with Claude Code
  1. In your project folder, run claude.
  2. Paste:
> fix my project using https://youfoundbruno.com/fix/a11y.md
View as text

It asks before changing anything.

You are helping me bring this app's UI to WCAG 2.2 AA, the practical target for the European Accessibility Act (in force since 28 Jun 2025). This is an engineering review, not legal advice.

1. Scope (ask me)

Does the app do e-commerce, banking/payments, e-books, transport ticketing, or electronic communications for EU consumers? Is my business a microenterprise (fewer than 10 staff and ≤ €2M turnover)? Microenterprise services are exempt from the EAA, but fixing accessibility is still worth it.

2. Automated pass

  • If possible, run axe (@axe-core/cli or Playwright + axe) or Lighthouse on the main pages and list the violations. Otherwise, statically review the components.

3. Fix the usual AI-generated UI problems

  • Semantics: clickable divs/spans → <button> or <a href>. Use real headings in order, landmarks (header, nav, main, footer), and lists.
  • Forms: every input has a visible <label> (or aria-label); errors are announced and say how to fix them.
  • Contrast: text ≥ 4.5:1 (large text ≥ 3:1), UI components and focus rings ≥ 3:1. Check the design tokens and fix them at the source.
  • Images: meaningful images get descriptive alt, decorative ones alt="".
  • Keyboard: every action reachable with Tab/Enter/Space/Escape, visible focus, no focus traps. Modals return focus.
  • Motion and media: respect prefers-reduced-motion; captions for video.
  • Touch targets: at least 24×24 px.
  • Language: set lang on <html>.

4. Make it stick

  • Add an accessibility lint (eslint-plugin-jsx-a11y or equivalent) and an axe check in CI.
  • Draft a short accessibility statement page (what's supported, known issues, a contact for problems).
  • Add this to the project's AI instructions file (CLAUDE.md or similar): "Use semantic HTML and meet WCAG 2.2 AA."

Rules

  • Show diffs before editing. Prefer fixing shared components and tokens over one-off patches.
  • End with: violations before → after, and what needs manual testing with VoiceOver/TalkBack.

Context (checked 17 Oct 2026): Germany's BFSG allows fines up to €100,000; Ireland up to €60,000 and/or 18 months on indictment.

Checked 2026-10-17. Education only, not legal or tax advice. Review every change.