Accessibility Audit Checklist
Create a comprehensive accessibility audit checklist for websites or applications.
Use Case
Conducting accessibility audits to ensure inclusive design.
Prompt
Create a comprehensive accessibility audit checklist for [website/application].
Include:
1. WCAG Compliance
- Level A requirements
- Level AA requirements
- Level AAA considerations
2. Keyboard Navigation
- Tab order
- Focus indicators
- Keyboard shortcuts
- Skip links
3. Screen Reader Compatibility
- ARIA labels
- Semantic HTML
- Alt text for images
- Form labels
4. Visual Accessibility
- Color contrast ratios
- Text sizing
- Visual indicators (not just color)
- Animation/motion preferences
5. Content Accessibility
- Heading structure
- Link text clarity
- Form error messages
- Language attributes
6. Interactive Elements
- Button accessibility
- Form accessibility
- Modal/dialog accessibility
- Custom component accessibility
7. Testing Checklist
- Screen reader testing
- Keyboard-only testing
- Color contrast testing
- Browser testing
Format as an actionable checklist with specific items to verify.How to use
- 1Replace [website/application] with your specific site or app (e.g., "our e-commerce checkout flow" or "our React dashboard app")
- 2Add context before the prompt: "Tech stack: [React/Vue/etc]. Current WCAG level: [A/AA/AAA or unknown]. Focus areas: [forms/navigation/keyboard/etc]."
- 3If you have screenshots: Upload screenshots of your UI to AI tools with vision. Say "Create an accessibility audit for these screens"
- 4If you have code: Paste your component code. Say "Create an accessibility audit checklist for this component"
- 5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude (preferably with image analysis if using screenshots)
- 6Review the checklist section by section. Ask follow-ups: "Focus on keyboard navigation" or "Prioritize Level AA issues" or "Check color contrast specifically"
- 7Use the checklist to systematically audit your site: Test each item manually or with automated tools (axe DevTools, Lighthouse, WAVE)
- 8Export the checklist to a tracking tool (Jira, Linear, Notion) and mark items as you fix them
Pro Tips
- • Include screenshot analysis: Upload screenshots of your UI for visual accessibility checks (color contrast, focus indicators)
- • For code-first audits: Paste your component code and ask AI to identify missing ARIA labels, semantic HTML, and keyboard navigation
- • Combine with automated tools: Use AI checklist + automated tools (axe, Lighthouse) for comprehensive audits
- • Test as you go: After AI identifies issues, test them manually with keyboard navigation and screen readers (NVDA, VoiceOver)
- • Prioritize by impact: Ask "Rank issues by user impact" to focus on the most critical accessibility barriers first
Tags
Related Prompts
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
Color Palette & Typography System Builder
Production-oriented foundations: primitive scales, semantic tokens, contrast tables, dark mode mapping, modular type scale, and token naming for tools like Style Dictionary.
Visual Hierarchy Audit
Structured critique of an existing screen from a detailed description: attention flow, hierarchy scores, P1/P2 issues, contrast flags, spacing, prioritized fixes, before/after for the top fix.
Accessibility Audit Report
Document accessibility findings with severity ratings, WCAG mappings, and remediation guidance.