a11y

Audit rendered UI with axe-core and validate keyboard navigation and focus visibility.

3|Updated May 16, 2026
One-click install
npx skills add https://github.com/dawitlabs/ui-skills --skill a11y-dawitlabs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: a11y
Source: https://github.com/dawitlabs/ui-skills/tree/main/skills/a11y
Command: npx skills add https://github.com/dawitlabs/ui-skills --skill a11y-dawitlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, axe-core, fs, module.

What problem does it solve?

The a11y Skill identifies accessibility failures that make parts of your UI unusable for keyboard users and assistive technology, then guides you to fix them in a prioritized, verifiable way.

Core Features & Use Cases

  • Programmatic WCAG scanning with axe-core: scans each page for WCAG 2.x and best-practice violations and outputs a structured JSON report plus a full-page screenshot.
  • Keyboard navigation and focus verification: checks tab order, presence of a skip link, focus visibility, accessible names, and tap target sizing (with a dedicated keyboard traversal plus screenshot).
  • Screen-by-screen prioritized repair loop: groups findings by impact (critical to minor), recommends fix ordering (semantic structure, names/labels, ARIA correctness, focus, motion, and tap targets), and re-scans after changes to confirm improvements.

Quick Start

Run an accessibility scan for your app’s home page by visiting http://localhost:3000 with your dev server running and using the provided a11y scan command to generate the axe JSON report and screenshot.

Frequently Asked Questions about a11y

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

FAQPage Schema
How do I fix WCAG 2.1 AA accessibility violations in my web app?

Fix WCAG 2.1 AA accessibility violations by auditing rendered UI screens with axe-core, validating keyboard navigation and focus visibility, then applying prioritized semantic and ARIA repairs from critical to minor impact.

Can I automate keyboard navigation and focus visibility testing for single-page apps?

Automate keyboard navigation and focus visibility testing by running dedicated keyboard traversal checks that verify tab order, skip links, accessible names, and tap target sizing across desktop and mobile viewports.

Does axe-core work with Playwright to generate accessibility reports?

Axe-core works with Playwright to programmatically scan pages for WCAG violations, producing structured JSON violation reports and full-page screenshots for both desktop and mobile viewports.

What is the best way to prioritize accessibility fixes screen by screen?

Prioritize accessibility fixes screen by screen by grouping axe-core findings by impact level, recommending a fix ordering from semantic structure to ARIA correctness, focus, motion, and tap targets.

How do I verify accessible names and labels for ARIA and semantic structures?

Verify accessible names and labels for ARIA and semantic structures by running an automated audit that checks rendered UI against WCAG 2.x best practices and validates correct naming conventions.

Why does my accessibility scan not catch keyboard focus issues on mobile viewports?

Accessibility scans may miss keyboard focus issues if dedicated keyboard traversal checks are not run across mobile viewports, which specifically evaluate focus visibility, skip links, and tap target sizing.