Wcag Audit Patterns

From the author

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.

— the description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured framework for auditing web content against WCAG 2.2 guidelines. It covers the core POUR principles (Perceivable, Operable, Understandable, Robust) and offers actionable checklists for common accessibility violations. The resource emphasizes a balanced approach, combining automated testing with manual verification to ensure compliance with legal and accessibility standards.

What it does

Defines WCAG 2.2 conformance levels and core accessibility principles.
Categorizes common accessibility violations by impact level.
Provides detailed checklists for Perceivable and Operable criteria.
Offers code-based patterns for accessible HTML and CSS implementations.
Outlines best practices for integrating accessibility into the development lifecycle.
Supplies remediation strategies for common web accessibility issues.

When to use it

Performing a formal accessibility audit on a website.
Remediating existing WCAG violations.
Developing accessible components from the design phase.
Preparing for VPAT compliance or legal accessibility requirements.
Ensuring keyboard accessibility and proper semantic HTML structure.

Advantages

Promotes a proactive approach to accessibility by starting early in the design phase.
Balances automated testing with necessary manual verification.
Provides clear, actionable code examples for common accessibility patterns.
Helps meet legal and regulatory standards like ADA and Section 508.
Encourages the use of native semantic HTML over excessive ARIA usage.

Usage examples

“How do I ensure my custom button component is accessible?”: The skill provides a pattern using role='button' and tabindex='0', along with keyboard event handling to ensure the component is operable via keyboard.
“What are the requirements for image accessibility under WCAG?”: The skill outlines requirements for alt text, including how to handle decorative images with empty alt attributes and providing long descriptions for complex images.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/wshobson/wcag-audit-patterns/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip wcag-audit-patterns.zip -d .agents/skills

Documentation by Seth Hobson

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

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

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

Files

ATTRIBUTION.mdAdded by AutoGineer1005 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md2.5 KiB
references/details.md9.7 KiB

SKILL.md