Perform an accessibility audit on this [HTML/REACT/VUE] component and fix all issues:
[PASTE CODE HERE]
Check against WCAG 2.1 AA standards:
1. **Semantic HTML**: Are elements used correctly? (buttons vs divs, headings hierarchy, landmarks)
2. **Keyboard Navigation**: Can everything be accessed without a mouse?
3. **Screen Reader**: Are ARIA labels, roles, and live regions correct?
4. **Focus Management**: Is focus visible, logical, and trapped in modals?
5. **Color Contrast**: Do all text/background combinations meet 4.5:1 ratio?
6. **Images**: Do all images have meaningful alt text?
7. **Forms**: Are labels associated, errors announced, required fields indicated?
8. **Motion**: Is there a way to reduce/stop animations?
For each issue:
- What's wrong
- Which WCAG criterion it violates
- The exact code fix
- How to test it (screen reader and keyboard)
Perform an accessibility audit on this [HTML/REACT/VUE] component and fix all issues:
[PASTE CODE HERE]
Check against WCAG 2.1 AA standards:
1. **Semantic HTML**: Are elements used correctly? (buttons vs divs, headings hierarchy, landmarks)
2. **Keyboard Navigation**: Can everything be accessed without a mouse?
3. **Screen Reader**: Are ARIA labels, roles, and live regions correct?
4. **Focus Management**: Is focus visible, logical, and trapped in modals?
5. **Color Contrast**: Do all text/background combinations meet 4.5:1 ratio?
6. **Images**: Do all images have meaningful alt text?
7. **Forms**: Are labels associated, errors announced, required fields indicated?
8. **Motion**: Is there a way to reduce/stop animations?
For each issue:
- What's wrong
- Which WCAG criterion it violates
- The exact code fix
- How to test it (screen reader and keyboard)
How to use this prompt
Copy the prompt above and paste it into ChatGPT, Claude, Gemini, or any AI assistant. Replace the bracketed placeholders with your specific details.
Leave a Review
Tried this prompt? Let us know how it worked — your reviews help other users find the best prompts.