Skills
.Work. You
Rest

Accessibility validation (WCAG 2.2 Level AA)

Community

Achieve WCAG AA compliance, effortlessly.

Design & Creative#html#accessibility#a11y#wcag#lighthouse#contrast#semantic html
Authorcynthiateeters
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill systematically validates WCAG 2.2 Level AA compliance before committing any HTML, preventing accessibility issues that required extensive reworks in previous projects. It ensures inclusive content for all users from the start.

Core Features & Use Cases

  • Contrast Validation: Checks all text against background for WCAG AA contrast ratios (4.5:1, 3:1).
  • Semantic HTML & ARIA: Enforces proper use of semantic elements and descriptive ARIA labels for navigation and interactive components.
  • Keyboard Navigation: Guides testing for full keyboard accessibility and visible focus indicators.
  • Use Case: Before deploying any new station page, run this Skill to automatically check all text contrast, image alt tags, and navigation ARIA labels, guaranteeing a 100/100 Lighthouse accessibility score.

Quick Start

Example: Check for images without alt text in DevTools console

Array.from(document.querySelectorAll('img')).filter(img => !img.hasAttribute('alt')).length

Expected output: 0

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Accessibility validation (WCAG 2.2 Level AA)
Download link: https://github.com/cynthiateeters/hap-learning-lab-template/archive/main.zip#accessibility-validation-wcag-2-2-level-aa

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.