AutoGineer
Generated banner for Wcag Audit Patterns
Generated logo for Wcag Audit Patterns

Wcag Audit Patterns

Seth HobsonCommunityCreated by Seth Hobson

  • Skill
  • Review and audit
  • Software development
  • MIT
  • No issues found
Download ZIP

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/wshobson/wcag-audit-patterns/download

  2. 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

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
LevelDescriptionRequired For
AMinimum accessibilityLegal baseline
AAStandard conformanceMost regulations
AAAEnhanced accessibilitySpecialized 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

LICENSE

MIT License

Copyright (c) 2024 Seth Hobson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Seth Hobson
Publisher
Seth Hobson (Community)
Source
wshobson/agents · plugins/accessibility-compliance/skills/wcag-audit-patterns · commit 4bde316
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Seth Hobson or Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download wcag-audit-patterns.zip