WCAG 2.2 AA Accessibility & Inclusive Design Compliance Audit
Audit digital interfaces for WCAG 2.2 AA compliance, color contrast, keyboard focus, and screen reader UX.
Compatibility & Specs
Compatible AI Models
ClaudeChatGPTGemini
Last UpdatedOct 3, 2026
Customizable Variables4 parameters
Main Prompt Template
212 words • 1553 characters
You are an IAAP-Certified Web Accessibility Specialist (CPACC/WAS) and Inclusive Design Consultant. I need you to perform a thorough WCAG 2.2 Level AA accessibility audit on an interface component or user flow.
Component Type & User Interaction:
[component_description]
HTML Markup / React Component Code:
[code_markup]
Color Palette & Contrast Measurements:
[color_tokens]
Keyboard & Touch Interactions Supported:
[interaction_patterns]
Deliver the WCAG 2.2 AA Accessibility Audit Report:
1. Contrast & Visual Accessibility (Success Criterion 1.4.3, 1.4.11):
- Calculate text contrast ratios against background. Check 4.5:1 for normal text and 3:1 for large text / UI boundaries.
- Ensure color is not the sole conveyor of information (e.g., error states, status indicators).
2. Keyboard Operability & Focus Order (Success Criterion 2.1.1, 2.4.7, 2.4.11, 2.4.13):
- Verify focus indicator visibility (Focus Appearance criterion in WCAG 2.2).
- Check for focus traps and logical tab order (`tabIndex`).
3. Screen Reader & ARIA Semantics (Success Criterion 4.1.2, 1.3.1):
- Audit `aria-label`, `aria-expanded`, `aria-haspopup`, and live regions (`aria-live`).
- Identify where native HTML semantic elements (`<button>`, `<dialog>`) should replace `<div>` with click listeners.
4. Touch Targets & Pointer Gestures (Success Criterion 2.5.8 - Target Size Minimum):
- Check minimum target size of 24x24 CSS pixels with sufficient perimeter spacing.
5. Production-Grade Remediation: Provide the fully accessible, tested code snippet.
Tip:Variables marked in purple brackets can be tailored below.
Customize Prompt
Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.
Parameters (4)* Indicates required field
[component_description]
What the component does and how users engage with it
[code_markup]
The markup or React JSX to audit
[color_tokens]
Foreground text hex, background hex, border colors
[interaction_patterns]
How users currently interact using keyboard or touch
4 parameters active
Live Customized OutputLive Preview
271 wordsYou are an IAAP-Certified Web Accessibility Specialist (CPACC/WAS) and Inclusive Design Consultant. I need you to perform a thorough WCAG 2.2 Level AA accessibility audit on an interface component or user flow.
Component Type & User Interaction:
A collapsible accordion FAQ component that toggles answers when headers are clicked.
HTML Markup / React Component Code:
<div className="accordion-item">
<div className="accordion-header" onClick={() => setIsOpen(!isOpen)}>
<span className="text-gray-400">{title}</span>
<i className={isOpen ? "icon-chevron-up" : "icon-chevron-down"} />
</div>
{isOpen && <div className="accordion-content text-gray-500">{content}</div>}
</div>
Color Palette & Contrast Measurements:
Header text: #9CA3AF on white #FFFFFF background. Content text: #6B7280 on white background.
Keyboard & Touch Interactions Supported:
Users click with mouse or tap screen. It is not currently focusable via Tab key.
Deliver the WCAG 2.2 AA Accessibility Audit Report:
1. Contrast & Visual Accessibility (Success Criterion 1.4.3, 1.4.11):
- Calculate text contrast ratios against background. Check 4.5:1 for normal text and 3:1 for large text / UI boundaries.
- Ensure color is not the sole conveyor of information (e.g., error states, status indicators).
2. Keyboard Operability & Focus Order (Success Criterion 2.1.1, 2.4.7, 2.4.11, 2.4.13):
- Verify focus indicator visibility (Focus Appearance criterion in WCAG 2.2).
- Check for focus traps and logical tab order (`tabIndex`).
3. Screen Reader & ARIA Semantics (Success Criterion 4.1.2, 1.3.1):
- Audit `aria-label`, `aria-expanded`, `aria-haspopup`, and live regions (`aria-live`).
- Identify where native HTML semantic elements (`<button>`, `<dialog>`) should replace `<div>` with click listeners.
4. Touch Targets & Pointer Gestures (Success Criterion 2.5.8 - Target Size Minimum):
- Check minimum target size of 24x24 CSS pixels with sufficient perimeter spacing.
5. Production-Grade Remediation: Provide the fully accessible, tested code snippet.
How to Use This Prompt
Follow this 3-step workflow to extract high-signal responses from any compatible AI model.
01
1. Tailor the Parameters
Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.
02
2. Send to AI Model
Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.
03
3. Review and Iterate
Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.
Prompt Variables & Parameters
Reference breakdown of every dynamic variable embedded in this prompt template.
| Placeholder | Parameter Name | Type | Status | Description & Guidance |
|---|---|---|---|---|
| [component_description] | Component & User Interaction | text | Required | What the component does and how users engage with itDefault: A collapsible accordion FAQ component that toggles answers when headers are clicked. |
| [code_markup] | Current HTML / React Code | textarea | Required | The markup or React JSX to auditDefault: <div className="accordion-item"> <div className="accordion-header" onClick={() => setIsOpen(!isOpen)}> <span className="text-gray-400">{title}</span> <i className={isOpen ? "icon-chevron-up" : "icon-chevron-down"} /> </div> {isOpen && <div className="accordion-content text-gray-500">{content}</div>} </div> |
| [color_tokens] | Color Palette & Text Colors | text | Required | Foreground text hex, background hex, border colorsDefault: Header text: #9CA3AF on white #FFFFFF background. Content text: #6B7280 on white background. |
| [interaction_patterns] | Keyboard & Touch Patterns | text | Required | How users currently interact using keyboard or touchDefault: Users click with mouse or tap screen. It is not currently focusable via Tab key. |
Example Execution & Benchmark Output
Sample input arguments and the verified AI response demonstrating expected quality and formatting.
Sample VariablesInputs
[component_description]
A collapsible accordion FAQ component that toggles answers when headers are clicked.
[code_markup]
<div className="accordion-item">
<div className="accordion-header" onClick={() => setIsOpen(!isOpen)}>
<span className="text-gray-400">{title}</span>
<i className={isOpen ? "icon-chevron-up" : "icon-chevron-down"} />
</div>
{isOpen && <div className="accordion-content text-gray-500">{content}</div>}
</div>
[color_tokens]
Header text: #9CA3AF on white #FFFFFF background. Content text: #6B7280 on white background.
[interaction_patterns]
Users click with mouse or tap screen. It is not currently focusable via Tab key.
Expected AI ResponseVerified Result
### WCAG 2.2 AA Accessibility Audit: Collapsible Accordion
#### 1. Critical Violations Identified
* **Fails WCAG 2.1.1 (Keyboard Navigation - Level A):** The header uses `<div onClick>` with no `tabIndex="0"` or keyboard event listeners (`Enter` / `Space`). Keyboard-only and assistive device users cannot trigger the accordion.
* **Fails WCAG 4.1.2 (Name, Role, Value - Level A):** Screen readers announce a generic non-interactive text block. It lacks `role="button"`, `aria-expanded="true|false"`, and `aria-controls`.
* **Fails WCAG 1.4.3 (Contrast Minimum - Level AA):** `#9CA3AF` on `#FFFFFF` yields a contrast ratio of only **2.85:1**, severely below the mandatory **4.5:1** threshold for normal text.
#### 2. Accessible Semantic Replacement
```tsx
import { useId, useState } from "react";
import { ChevronDown } from "lucide-react";
interface AccordionProps {
title: string;
content: string;
}
export function AccessibleAccordion({ title, content }: AccordionProps) {
const [isOpen, setIsOpen] = useState(false);
const contentId = useId();
const buttonId = useId();
return (
<div className="border-b border-border py-2">
<h3>
<button
id={buttonId}
type="button"
aria-expanded={isOpen}
aria-controls={contentId}
onClick={() => setIsOpen((prev) => !prev)}
className="flex w-full items-center justify-between py-3 text-left font-medium text-foreground hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
>
<span>{title}</span>
<ChevronDown
className={`h-4 w-4 shrink-0 transition-transform duration-200 text-foreground ${
isOpen ? "rotate-180" : ""
}`}
aria-hidden="true"
/>
</button>
</h3>
<div
id={contentId}
role="region"
aria-labelledby={buttonId}
hidden={!isOpen}
className="pb-4 text-sm text-muted-foreground leading-relaxed"
>
{content}
</div>
</div>
);
}
```
Best Use Cases
Scenarios and roles where this prompt produces maximum leverage.
Frontend teams preparing websites for corporate accessibility compliance audits
UI designers ensuring high-contrast palettes meet legal standards
QA engineers testing keyboard traps and ARIA states before production launch
Tips for Best Results
Techniques to elevate response fidelity
- •Provide rich background context rather than one-sentence inputs to receive deep, non-generic responses.
- •Engage in multi-turn conversation: use the initial output as a baseline, then ask the AI to sharpen specific sections.
- •Prompt the model to highlight any hidden assumptions or missing trade-offs in its recommendations.
Common Mistakes to Avoid
Frequent failure modes and anti-patterns
- •Giving minimal context and expecting nuanced, expert-level strategic output.
- •Not validating factual references, citations, or statistical claims with verified primary sources.
- •Skipping the customization step and pasting raw bracketed template variables into the AI chat.
Part of Curated Collections
This prompt is sequenced as part of these goal-oriented workflows
Related AI Prompts
Complementary workflows in Design & UI/UX
Design & UI/UXintermediate
UI Design Visual Hierarchy, Contrast & Spatial Rhythm Critique
Conduct an objective, rigorous visual critique of a digital interface layout, typography, and density.
claudechatgptgemini
#design#ui-critique#visual-hierarchy
Design & UI/UXadvanced
Design System Semantic Token Architecture & Component Matrix
Architect scalable design tokens (color, spacing, typography) and component variant matrices.
claudechatgptgemini
#design#design-systems#tokens
Reactadvanced
React Component Composition & Compound Component Architecture Review
Refactor bloated prop-drilling components into clean, composable compound components with flexible layouts.
claudechatgptgemini
#react#compound-components#component-architecture