Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

WCAG Audit Patterns · dicklesworthstone | DecimalAI

dicklesworthstone/wcag-audit-patterns

NewSkillScoreMaintained

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

Frontendby dicklesworthstone

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/dicklesworthstone-wcag-audit-patterns/SKILL.md

decimalai skills pull dicklesworthstone-wcag-audit-patterns --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/dicklesworthstone-wcag-audit-patterns/SKILL.md https://app.decimal.ai/s/dicklesworthstone-wcag-audit-patterns/SKILL.md

Raw file: /s/dicklesworthstone-wcag-audit-patterns/SKILL.md ↗ · machine-readable summary at /s/dicklesworthstone-wcag-audit-patterns.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 4h ago

No measurable change+178% tokens0% turns91% of whole cases pass with skill (20/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-14	✗→✓	▲ Improved	165%	0%
case-19	✓→✗	▼ Worse	213%	0%
case-02	✓→✓	＝ Same ✓	171%	0%
case-03	✓→✓	＝ Same ✓	254%	0%
case-04	✓→✓	＝ Same ✓	174%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

dicklesworthstone / pi_agent_rust

tests/ext_conformance/artifacts/agents-wshobson/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md

View on GitHub ↗

License NOASSERTIONImported 8/10/2026Version v1

Skill contents

SKILL.md

WCAG Audit Patterns

Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.

When to Use This Skill

Conducting accessibility audits
Fixing WCAG violations
Implementing accessible components
Preparing for accessibility lawsuits
Meeting ADA/Section 508 requirements
Achieving VPAT compliance

Core Concepts

1. WCAG Conformance Levels

| Level | Description | Required For | | ------- | ---------------------- | ----------------- | | A | Minimum accessibility | Legal baseline | | AA | Standard conformance | Most regulations | | AAA | Enhanced accessibility | Specialized needs |

2. POUR Principles

Perceivable:  Can users perceive the content?
Operable:     Can users operate the interface?
Understandable: Can users understand the content?
Robust:       Does it work with assistive tech?

3. Common Violations by Impact

Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls

Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles

Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy

Audit Checklist

Perceivable (Principle 1)

`markdown
## 1.1 Text Alternatives

### 1.1.1 Non-text Content (Level A)

- [ ] All images have alt text
- [ ] Decorative images have alt=""
- [ ] Complex images have long descriptions
- [ ] Icons with meaning have accessible names
- [ ] CAPTCHAs have alternatives

Check:

<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" /> <img src="decorative-line.png" alt="" />

<img src="chart.png" /> <img src="decorative-line.png" alt="decorative line" />

1.2 Time-based Media

1.2.1 Audio-only and Video-only (Level A)

] Audio has text transcript
] Video has audio description or transcript

1.2.2 Captions (Level A)

] All video has synchronized captions
] Captions are accurate and complete
] Speaker identification included

1.2.3 Audio Description (Level A)

] Video has audio description for visual content

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

] Headings use proper tags (h1-h6)
] Lists use ul/ol/dl
] Tables have headers
] Form inputs have labels
] ARIA landmarks present

Check:

html
<!-- Heading hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2>

<!-- Table headers -->
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
</table>

1.3.2 Meaningful Sequence (Level A)

] Reading order is logical
] CSS positioning doesn't break order
] Focus order matches visual order

1.3.3 Sensory Characteristics (Level A)

] Instructions don't rely on shape/color alone
] "Click the red button" → "Click Submit (red button)"

1.4 Distinguishable

1.4.1 Use of Color (Level A)

] Color is not only means of conveying info
] Links distinguishable without color
] Error states not color-only

1.4.3 Contrast (Minimum) (Level AA)

] Text: 4.5:1 contrast ratio
] Large text (18pt+): 3:1 ratio
] UI components: 3:1 ratio

Tools: WebAIM Contrast Checker, axe DevTools

1.4.4 Resize Text (Level AA)

] Text resizes to 200% without loss
] No horizontal scrolling at 320px
] Content reflows properly

1.4.10 Reflow (Level AA)

] Content reflows at 400% zoom
] No two-dimensional scrolling
] All content accessible at 320px width

1.4.11 Non-text Contrast (Level AA)

] UI components have 3:1 contrast
] Focus indicators visible
] Graphical objects distinguishable

1.4.12 Text Spacing (Level AA)

] No content loss with increased spacing
] Line height 1.5x font size
] Paragraph spacing 2x font size
] Letter spacing 0.12x font size
] Word spacing 0.16x font size

`

### Operable (Principle 2)

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

] All functionality keyboard accessible
] No keyboard traps
] Tab order is logical
] Custom widgets are keyboard operable

Check:

javascript
// Custom button must be keyboard accessible
<div role="button" tabindex="0"
     onkeydown="if(event.key === 'Enter' || event.key === ' ') activate()">

2.1.2 No Keyboard Trap (Level A)

] Focus can move away from all components
] Modal dialogs trap focus correctly
] Focus returns after modal closes

2.2 Enough Time

2.2.1 Timing Adjustable (Level A)

] Session timeouts can be extended
] User warned before timeout
] Option to disable auto-refresh

2.2.2 Pause, Stop, Hide (Level A)

] Moving content can be paused
] Auto-updating content can be paused
] Animations respect prefers-reduced-motion

css
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

2.3 Seizures and Physical Reactions

2.3.1 Three Flashes (Level A)

] No content flashes more than 3 times/second
] Flashing area is small (<25% viewport)

2.4 Navigable

2.4.1 Bypass Blocks (Level A)

] Skip to main content link present
] Landmark regions defined
] Proper heading structure

html
<a href="#main" class="skip-link">Skip to main content</a>
<main id="main">...</main>

2.4.2 Page Titled (Level A)

] Unique, descriptive page titles
] Title reflects page content

2.4.3 Focus Order (Level A)

] Focus order matches visual order
] tabindex used correctly

2.4.4 Link Purpose (In Context) (Level A)

] Links make sense out of context
] No "click here" or "read more" alone

html
<!-- Bad -->
<a href="report.pdf">Click here</a>

<!-- Good -->
<a href="report.pdf">Download Q4 Sales Report (PDF)</a>

2.4.6 Headings and Labels (Level AA)

] Headings describe content
] Labels describe purpose

2.4.7 Focus Visible (Level AA)

] Focus indicator visible on all elements
] Custom focus styles meet contrast

css
:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

2.4.11 Focus Not Obscured (Level AA) - WCAG 2.2

] Focused element not fully hidden
] Sticky headers don't obscure focus

`

### Understandable (Principle 3)

3.1 Readable

3.1.1 Language of Page (Level A)

] HTML lang attribute set
] Language correct for content

html
<html lang="en">

3.1.2 Language of Parts (Level AA)

] Language changes marked

html
<p>The French word <span lang="fr">bonjour</span> means hello.</p>

3.2 Predictable

3.2.1 On Focus (Level A)

] No context change on focus alone
] No unexpected popups on focus

3.2.2 On Input (Level A)

] No automatic form submission
] User warned before context change

3.2.3 Consistent Navigation (Level AA)

] Navigation consistent across pages
] Repeated components same order

3.2.4 Consistent Identification (Level AA)

] Same functionality = same label
] Icons used consistently

3.3 Input Assistance

3.3.1 Error Identification (Level A)

] Errors clearly identified
] Error message describes problem
] Error linked to field

html
<input aria-describedby="email-error" aria-invalid="true" />
<span id="email-error" role="alert">Please enter valid email</span>

3.3.2 Labels or Instructions (Level A)

] All inputs have visible labels
] Required fields indicated
] Format hints provided

3.3.3 Error Suggestion (Level AA)

] Errors include correction suggestion
] Suggestions are specific

3.3.4 Error Prevention (Level AA)

] Legal/financial forms reversible
] Data checked before submission
] User can review before submit

`

### Robust (Principle 4)

4.1 Compatible

4.1.1 Parsing (Level A) - Obsolete in WCAG 2.2

] Valid HTML (good practice)
] No duplicate IDs
] Complete start/end tags

4.1.2 Name, Role, Value (Level A)

] Custom widgets have accessible names
] ARIA roles correct
] State changes announced

html
<!-- Accessible custom checkbox -->
<div role="checkbox"
     aria-checked="false"
     tabindex="0"
     aria-labelledby="label">
</div>
<span id="label">Accept terms</span>

4.1.3 Status Messages (Level AA)

] Status updates announced
] Live regions used correctly

html
<div role="status" aria-live="polite">3 items added to cart</div>

<div role="alert" aria-live="assertive">Error: Form submission failed</div>

`

## Automated Testing

// axe-core integration const axe = require('axe-core');

async function runAccessibilityAudit(page) { await page.addScriptTag({ path: require.resolve('axe-core') });

const results = await page.evaluate(async () => { return await axe.run(document, { runOnly: { type: 'tag', values: 'wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'] } }); });

return { violations: results.violations, passes: results.passes, incomplete: results.incomplete }; }

// Playwright test example test('should have no accessibility violations', async ({ page }) => { await page.goto('/'); const results = await runAccessibilityAudit(page);

expect(results.violations).toHaveLength(0); });

CLI tools

npx @axe-core/cli https://example.com npx pa11y https://example.com lighthouse https://example.com --only-categories=accessibility


## Remediation Patterns

### Fix: Missing Form Labels

<input type="email" placeholder="Email" />

<label for="email">Email address</label> <input id="email" type="email" />

<input type="email" aria-label="Email address" />

<span id="email-label">Email</span> <input type="email" aria-labelledby="email-label" />


### Fix: Insufficient Color Contrast

/ Before: 2.5:1 contrast / .text { color: #767676; }

/ After: 4.5:1 contrast / .text { color: #595959; }

/ Or add background / .text { color: #767676; background: #000; }


### Fix: Keyboard Navigation

// Make custom element keyboard accessible class AccessibleDropdown extends HTMLElement { connectedCallback() { this.setAttribute("tabindex", "0"); this.setAttribute("role", "combobox"); this.setAttribute("aria-expanded", "false");

this.addEventListener("keydown", (e) => { switch (e.key) { case "Enter": case " ": this.toggle(); e.preventDefault(); break; case "Escape": this.close(); break; case "ArrowDown": this.focusNext(); e.preventDefault(); break; case "ArrowUp": this.focusPrevious(); e.preventDefault(); break; } }); } }


## Best Practices

### Do's

- **Start early** - Accessibility from design phase
- **Test with real users** - Disabled users provide best feedback
- **Automate what you can** - 30-50% issues detectable
- **Use semantic HTML** - Reduces ARIA needs
- **Document patterns** - Build accessible component library

### Don'ts

- **Don't rely only on automated testing** - Manual testing required
- **Don't use ARIA as first solution** - Native HTML first
- **Don't hide focus outlines** - Keyboard users need them
- **Don't disable zoom** - Users need to resize
- **Don't use color alone** - Multiple indicators needed

## Resources

- [WCAG 2.2 Guidelines](https://www.w3.org/TR/WCAG22/)
- [WebAIM](https://webaim.org/)
- [A11y Project Checklist](https://www.a11yproject.com/checklist/)
- [axe DevTools](https://www.deque.com/axe/)

Want to see if dicklesworthstone/wcag-audit-patterns would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/29/2026, 11:03 UTC · 22 cases

Lift

91% vs 91%

Agent turns

1.0 vs 1.0

Tokens

+178%

6,024.91 vs 2,168.82

fail → pass · 1pass → pass · 19fail → fail · 1pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-19 We are building a CSS Flexbox layout for our navigation bar. Should we use justify-content: space-between or justify-content: flex-start with auto margins to push the profile icon to the right side of the screen?	pass→fail	10,136	14,273	+41%	1	1	0%	1,909	5,970	+213%	0	0	—
case-01 Our frontend team wants to integrate automated accessibility checks directly into our end-to-end testing pipeline. Could you write a Playwright test script using axe-core that scans a given target webpage and verifies that no compliance violations exist?	fail→fail	11,320	26,257	+132%	1	1	0%	2,384	6,344	+166%	0	0	—
case-02 We have an inline PNG sales chart image on our landing page. A developer suggested setting alt="chart image" or leaving alt empty because it is visual. How should we write the HTML for this data chart image to pass WCAG 1.1.1 Level A?	pass→pass	13,150	12,803	-3%	1	1	0%	2,065	5,595	+171%	0	0	—
case-03 We have decorative background divider lines and accent images in our HTML layout. A developer wants to add alt="decorative line" to make sure screen readers acknowledge them. What is the correct WCAG 1.1.1 HTML pattern for these images?	pass→pass	9,052	10,195	+13%	1	1	0%	1,534	5,431	+254%	0	0	—
case-04 We created a custom interactive element using a div tag for a submission button with an onClick listener. Should we also add onKeyPress or handle keyboard events, and what ARIA roles or attributes are required to pass WCAG 2.1.1?	pass→pass	13,176	10,898	-17%	1	1	0%	2,051	5,616	+174%	0	0	—
case-05 Our design system uses body text with hex color #767676 on a white #FFFFFF background, giving a contrast ratio around 2.5:1. Designers want to keep this muted color for aesthetic reasons. What contrast ratio or color adjustments must we make to achieve WCAG 1.4.3 Level AA conformance for body text?	pass→pass	12,982	22,790	+76%	1	1	0%	2,717	8,247	+204%	0	0	—
case-06 When responsive testing at 400% zoom, our navigation layout forces users to scroll horizontally to read paragraphs. Designers suggested disabling user scaling via meta viewport tags to prevent layout breaking. What is the required WCAG 1.4.10 Reflow implementation?	pass→pass	13,842	13,444	-3%	1	1	0%	2,545	6,060	+138%	0	0	—
case-07 Our web application removes default browser focus rings using CSS outline: none across all interactive elements to make the UI look cleaner. How should focus indicators be styled to meet WCAG 2.4.7 Level AA compliance?	pass→pass	14,431	16,216	+12%	1	1	0%	2,587	6,419	+148%	0	0	—
case-08 Screen reader users currently have to tab through 40 navigation menu links on every page before reaching the main article. How should we implement a skip link at the top of the page to satisfy WCAG 2.4.1 Level A?	pass→pass	13,796	12,079	-12%	1	1	0%	2,306	6,038	+162%	0	0	—
case-09 Our blog listing page features multiple articles, each ending with a 'Click here' or 'Read more' link pointing to the article URL. Is this acceptable under WCAG 2.4.4, and if not, how should the link text be formatted?	pass→pass	12,776	15,995	+25%	1	1	0%	2,306	6,028	+161%	0	0	—
case-10 Our single-page React app generates clean HTML without any attributes on the root html tag. Is this compliant with WCAG 3.1.1, or what attribute is mandatory on the root element?	pass→pass	11,482	8,633	-25%	1	1	0%	2,027	5,030	+148%	0	0	—
case-11 We have an English article that quotes a French phrase ('c'est la vie'). What HTML markup should be used around the French phrase to satisfy WCAG 3.1.2 Level AA?	pass→pass	8,535	6,540	-23%	1	1	0%	1,346	4,644	+245%	0	0	—
case-12 When a user enters an invalid email in our checkout form, a generic red border appears around the input field. How should form validation errors be associated with inputs to comply with WCAG 3.3.1 Level A?	pass→pass	11,761	12,288	+4%	1	1	0%	2,148	5,822	+171%	0	0	—
case-13 We are building a custom checkbox component using div elements instead of native input elements. What ARIA roles, states, and keyboard accessibility attributes must be applied to comply with WCAG 4.1.2?	pass→pass	16,088	13,372	-17%	1	1	0%	2,538	5,961	+135%	0	0	—
case-14 When an item is added to the shopping cart, a dynamic status toast appears on screen without shifting browser focus. How should this status message be announced to screen readers under WCAG 4.1.3 Level AA?	fail→pass	12,134	14,684	+21%	1	1	0%	2,132	5,656	+165%	0	0	—
case-15 Our website features auto-playing CSS background animations and smooth scrolling transitions across elements. Users with vestibular motion disorders are struggling. How should CSS media queries be written to respect user preferences under WCAG 2.2.2?	pass→pass	17,379	18,477	+6%	1	1	0%	2,679	6,746	+152%	0	0	—
case-16 In our product page layout, developers used h3 tags for the main product title because the CSS font size matched the design comps, followed by h1 for sub-sections. How should headings be structured under WCAG 1.3.1?	pass→pass	12,714	11,250	-12%	1	1	0%	1,813	5,401	+198%	0	0	—
case-17 We render a financial comparison table using raw tr and td elements without column header tags or scopes. How should tabular data be marked up for accessibility under WCAG 1.3.1?	pass→pass	14,245	13,167	-8%	1	1	0%	2,618	6,066	+132%	0	0	—
case-18 In our data table, active user accounts are displayed in green text and inactive user accounts are displayed in red text, with no other text or icon indicators. Does this meet WCAG 1.4.1 Level A?	pass→pass	8,581	9,537	+11%	1	1	0%	1,239	4,899	+295%	0	0	—
case-20 Our team is optimizing Google Core Web Vitals for our e-commerce site. How do we reduce Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) on our homepage?	pass→pass	20,478	26,063	+27%	1	1	0%	3,021	7,682	+154%	0	0	—
case-21 We need to comply with GDPR regulations regarding user tracking cookies. What legal requirements must our cookie banner consent mechanism meet under EU data privacy law?	pass→pass	13,692	25,320	+85%	1	1	0%	2,471	7,210	+192%	0	0	—
case-22 Our web app allows users to perform non-reversible financial wire transfers. What input assistance pattern does WCAG 3.3.4 Level AA require before the final transaction is executed?	pass→pass	9,509	12,252	+29%	1	1	0%	1,278	5,683	+345%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 90.9%
Pass rate with the skill: 90.9%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/29/2026, 11:03 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-14

Prompt

When an item is added to the shopping cart, a dynamic status toast appears on screen without shifting browser focus. How should this status message be announced to screen readers under WCAG 4.1.3 Level AA?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+178% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested today

Other measured skills in the registry, with their headline benchmark lift.