Accessibility Audit — Fix WCAG Issues
Audit HTML/JSX for WCAG 2.1 AA accessibility violations and get specific fixes.
The Prompt
Perform an accessibility audit of the following HTML/JSX component. Check for WCAG 2.1 AA compliance: 1. Missing alt text on images 2. Poor color contrast (flag if contrast ratio likely < 4.5:1) 3. Missing form labels 4. Keyboard navigation issues (missing tabIndex, focus traps) 5. Missing ARIA roles or labels 6. Interactive elements that aren't keyboard accessible 7. Missing skip navigation links 8. Improper heading hierarchy For each issue: location, WCAG criterion violated, severity, and the corrected code. Component: ```jsx [PASTE YOUR HTML/JSX] ```
Example Output
Found 6 violations: 3 images missing alt text, form submit button with only an icon and no aria-label, a modal without focus trap (focus escapes to background on Tab), and a custom dropdown implemented as divs without role='listbox' making it inaccessible to screen readers.
FAQ
Which AI model is best for Accessibility Audit — Fix WCAG Issues?
Claude Sonnet 4 — thorough and precise about WCAG guidelines with clear remediation.
How do I use the Accessibility Audit — Fix WCAG Issues prompt?
Copy the prompt, replace the [BRACKETED] placeholders with your specific information, and paste into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.). Found 6 violations: 3 images missing alt text, form submit button with only an icon and no aria-label, a modal without focus trap (focus escapes to background on Tab), and a custom dropdown implemented as divs without role='listbox' making it inaccessible to screen readers.
Model Recommendation
Claude Sonnet 4 — thorough and precise about WCAG guidelines with clear remediation.