skills.rest
cynthiateeters
cynthiateetersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Accessibility validation (WCAG 2.2 Level AA)

Validates WCAG 22 Level AA accessibility compliance of HTML including contrast, ARIA, keyboard navigation, and image alt text before commits.

Updated Oct 25, 2025
Search Tags:#html#accessibility#a11y#wcag#lighthouse#contrast#semantic html
One-click install
npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill accessibility-validation-wcag-2-2-level-aa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Accessibility validation (WCAG 2.2 Level AA)
Source: https://github.com/cynthiateeters/hap-learning-lab-template/tree/main/.claude/skills/accessibility-check
Command: npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill accessibility-validation-wcag-2-2-level-aa

SYSTEM DOCUMENTATION & REQUIREMENTS

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

Frequently Asked Questions about Accessibility validation (WCAG 2.2 Level AA)

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate WCAG 2.2 Level AA compliance for HTML before deployment?▼

WCAG 2.2 Level AA validation checks text contrast ratios (4.5:1 for body text, 3:1 for large text), semantic HTML structure, ARIA labels, keyboard navigation, and image alt text. Run this automated validation before committing to catch accessibility issues early and avoid rework, ensuring compliance across all HTML pages.

What specific accessibility checks does this cover?▼

This validates text contrast against WCAG AA ratios, enforces semantic HTML elements (header, nav, main, article, section, footer), checks ARIA labeling on landmarks and controls, tests keyboard focus and skip-link functionality, ensures color independence, and verifies image alt text with proper loading attributes.

Can I use this to achieve a 100/100 Lighthouse accessibility score?▼

Yes. By systematically validating contrast, semantic HTML, ARIA labels, keyboard navigation, and image alt tags before deployment, this Skill eliminates the most common Lighthouse accessibility failures, helping you reach a perfect accessibility audit score.

How does keyboard navigation validation work?▼

Keyboard navigation validation guides testing for full keyboard accessibility by checking focus indicators are visible and skip-links are functional. This ensures all interactive elements and page sections are accessible without a mouse.

Do I need to manually test contrast, or is it automated?▼

Contrast validation is automated—it checks all text against backgrounds for WCAG AA compliance ratios. Manual testing is still recommended for edge cases, but this automates the primary validation against predefined CSS variables.

What happens if my HTML doesn't use semantic elements?▼

This Skill enforces proper semantic HTML structure (header, nav, main, article, section, footer). If your markup uses generic divs instead, validation will flag non-semantic elements so you can restructure before commit.

Related Skills

Explore More Design & Creative Skills→
bamboounderwearbamboounderwear

ui-design

Align typography, spacing, color variables, and responsive layout rules in Astro/Tailwind frontend changes.

Community
Intermediate
WesleySmitsWesleySmits
6

auditing-accessibility-wcag

Detects WCAG 2.1 accessibility violations in UI components and pages.

Community
Intermediate
JansenAnalyticsJansenAnalytics
5

a11y-audit

Audit web content for WCAG accessibility issues and generate remediation reports.

Community
Intermediate
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced