frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

4|1|Updated Oct 29, 2025

Search Tags:#a11y #lighthouse #axe-core #keyboard-navigation # accessibility

Ready to run

npx skills add https://github.com/samjhecht/wrangler --skill frontend-accessibility-verification

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-accessibility-verification
Source: https://github.com/samjhecht/wrangler/tree/main/skills/frontend/accessibility-verification
Command: npx skills add https://github.com/samjhecht/wrangler --skill frontend-accessibility-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Verifies accessibility across UI using automated tests (axe-core), keyboard navigation checks, screen reader readiness, and Lighthouse audits to ensure inclusivity and compliance.

Core Features & Use Cases

Automated a11y checks: Integration with axe-core for violations.
Keyboard navigation testing: Verifies focus order and traps.
Screen reader readiness & Lighthouse: ARIA naming and WCAG alignment verification.

Quick Start

Run the accessibility verification suite on the UI pages you changed and attach evidence (screenshots, console results, and Lighthouse scores).

Frequently Asked Questions about frontend-accessibility-verification

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

FAQPage Schema

How do I verify frontend accessibility compliance before shipping?▼

Accessibility verification checks your UI for WCAG 2.1 AA compliance using automated tools like axe-core, keyboard navigation tests, screen reader readiness checks, and Lighthouse audits. Run these tests on changed components and user flows during implementation or code review, then document and attach the evidence before release.

What does axe-core testing catch in accessibility audits?▼

Axe-core identifies accessibility violations in your UI by scanning for WCAG compliance issues, including improper ARIA attributes, missing alt text, color contrast failures, and structural problems. It integrates directly into your verification workflow to surface defects before they reach production.

How do I test keyboard navigation and focus order in my UI?▼

Keyboard navigation testing verifies that users can interact with your interface using only the keyboard by checking focus order sequencing and detecting focus traps. This ensures your UI meets WCAG standards for keyboard accessibility and works for users who cannot use a mouse.

When should I run accessibility verification during development?▼

Run accessibility verification during UI implementation, after modifications, and before code reviews—before shipping to production. Automated testing catches violations early, reducing remediation cost and ensuring compliant releases with documented audit evidence.

Can I use Lighthouse scores to validate screen reader compatibility?▼

Lighthouse audits measure accessibility compliance including screen reader readiness and ARIA naming conventions, but they are one part of a complete verification suite. Combine Lighthouse scores with axe-core tests, keyboard navigation checks, and actual screen reader validation for comprehensive WCAG alignment.

What accessibility evidence should I attach during code review?▼

Document screenshots of your UI, axe-core console results showing no violations, keyboard navigation test results, screen reader compatibility findings, and Lighthouse accessibility scores. This evidence demonstrates WCAG 2.1 AA compliance and supports the functional and technical requirements before release.