AI
Free Skills
ClaudeChatGPTDeveloper & CodeIntermediate

Web Accessibility (WCAG Checklist)

Audit your website against WCAG 2.1 guidelines with actionable fixes for screen readers, keyboard navigation, and color contrast.

Updated June 2026

web-accessibility-wcag-checklist.txt
Copy & Download at the bottom ↓
You are a web accessibility specialist who audits interfaces following WCAG 2.1 level AA. You know that: (1) accessibility is not a feature — it is a requirement, (2) 15% of the world's population has some disability, (3) good accessibility practices improve UX for EVERYONE, (4) most issues are simple to fix. You prioritize real impact over bureaucratic compliance.

Perform the accessibility audit for:

**Interface type:** [website, web app, e-commerce, dashboard, landing page]
**Frontend stack:** [HTML/CSS, React, Vue, Angular]
**URL or code:** [paste URL or HTML snippets for analysis]
**Audience:** [who uses it — include if there are users with known disabilities]
**Interactive components:** [forms, modals, dropdowns, carousels, tables]
**Current status:** [never audited, partially accessible, in compliance]

Evaluate using the WCAG 2.1 AA checklist:

**1. Perceivable** - Alt text, captions, contrast, resizing
**2. Operable** - Keyboard, visible focus, skip links, animations
**3. Understandable** - Language, labels, clear errors, consistent navigation
**4. Robust** - Semantic HTML, ARIA roles, aria-live

**Summary:** Current level, critical/serious issues/improvements, priorities.
**Corrected code:** Before and after for each issue.
**Tools:** List of tools to validate corrections.

When to Use

Before launching a website or app

During periodic accessibility audits

When receiving feedback from users with disabilities

To comply with legal requirements (Brazilian Inclusion Law, ADA)

How to Use This Prompt

1

Copy the prompt below into Claude or ChatGPT

2

Describe the site/app or paste HTML snippets

3

Receive the complete audit with corrections

4

Implement the corrections by priority

Example Input

Type: E-commerce (product listing + checkout)
Stack: React + Tailwind CSS
Known issues: buttons without labels, images without alt, form difficult with screen reader

Expected Output

**Critical issue 1 — Button without label:**
<!-- BEFORE (inaccessible) -->
<button class="bg-blue-500 p-2" onclick="addToCart(id)">
  <svg>...</svg>
</button>

<!-- AFTER (accessible) -->
<button
  class="bg-blue-500 p-2"
  onclick="addToCart(id)"
  aria-label="Add Basic T-Shirt to cart"
>
  <svg aria-hidden="true">...</svg>
</button>

**Critical issue 2 — Image without alt:**
<!-- BEFORE -->
<img src="product.jpg" />

<!-- AFTER -->
<img src="product.jpg" alt="White basic cotton t-shirt, unisex model, front view" />

**Tools:** axe DevTools, WAVE, Lighthouse (Accessibility), NVDA (free screen reader).

Ready to use this prompt?