GPT-4Accessibility
WCAG Accessibility Audit Prompt
Why this prompt matters
15% of users have some form of disability. WCAG citations make it easy to prioritize fixes and justify the work to stakeholders.
What we use it for
Accessibility
Prompt
Audit this HTML/component for WCAG 2.1 AA accessibility issues. Check: 1) Semantic HTML usage, 2) Keyboard navigation, 3) Screen reader compatibility, 4) Color contrast ratios, 5) Focus management, 6) ARIA attributes. For each issue, cite the specific WCAG criterion and provide the corrected code.
Result
## Accessibility Audit
### Issue 1: Missing form labels (WCAG 1.3.1)
```html
Email address
```
### Issue 2: Insufficient color contrast (WCAG 1.4.3)
Gray text (#999) on white background has a contrast ratio of 2.85:1. Minimum required: 4.5:1.
**Fix**: Use #595959 (contrast ratio: 7.07:1)
### Issue 3: Missing skip navigation (WCAG 2.4.1)
Add a skip link as the first focusable element.
15% of users have some form of disability. WCAG citations make it easy to prioritize fixes and justify the work to stakeholders.
This prompt demonstrates a structured approach to accessibility, producing consistent, high-quality results that can be iterated upon.