a11y-debugging

Diagnose accessibility issues in web pages using Lighthouse audits and code snippets.

Updated Feb 8, 2023

Search Tags:#debugging #accessibility #a11y #color-contrast #aria #focus-management #chromedevtools

Ready to run

npx skills add https://github.com/mvellandi/winky --skill a11y-debugging-mvellandi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: a11y-debugging
Source: https://github.com/mvellandi/winky/tree/main/.agents/skills/a11y-debugging
Command: npx skills add https://github.com/mvellandi/winky --skill a11y-debugging-mvellandi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Identifying and remedying accessibility issues that hinder inclusive UX, including semantic HTML problems, ARIA misconfigurations, focus management gaps, and color-contrast concerns.

Core Features & Use Cases

Automated accessibility audits and manual checks to verify semantic structure, ARIA labeling, and keyboard navigation.
In-page references and code snippets to guide remediation and ensure consistency with web.dev guidelines.
Reproducible workflows for testing across browsers and platforms, including snapshot and report generation.

Quick Start

Run an accessibility audit on the current page to generate a snapshot and review issues.

Frequently Asked Questions about a11y-debugging

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

FAQPage Schema

How do I run an accessibility audit to check ARIA labels and semantic HTML?▼

Run an accessibility audit to validate semantic HTML and ARIA labeling by generating a snapshot of the current web page, which identifies structural issues to guide remediation.

What is the best way to test keyboard focus management during web development?▼

Testing keyboard focus management involves applying manual checks and Lighthouse-based audits to your web pages, ensuring keyboard navigation functions correctly and identifying focus gaps for remediation.

How do I check color-contrast compliance for inclusive web design?▼

Check color-contrast compliance by applying Lighthouse-based audits to the web page during development, which flags contrast concerns and provides in-page references to meet web.dev guidelines.

Can I generate reproducible accessibility reports for cross-browser QA testing?▼

Yes, you can generate reproducible accessibility reports for cross-browser QA testing by creating snapshots and reports during your workflow, ensuring consistent accessibility assessments across platforms.

Why does my accessibility audit show ARIA misconfigurations on my web page?▼

Accessibility audits show ARIA misconfigurations when semantic HTML and ARIA attributes are incorrectly applied, and the audit provides in-page code snippets to guide remediation and ensure consistency.