skills.rest
mvellandi
mvellandiCOMMUNITY
Explore all skills by this author →
Website𝕏@TriforceKid7GitHub

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
One-click install
npx skills add https://github.com/mvellandi/winky --skill a11y-debugging-mvellandi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
pynbj1001pynbj1001
2

Smart Browser

Extract JavaScript-rendered web page agendas and session data to Markdown and JSON.

Community
Intermediate
8GG-Git8GG-Git

accessibility-review

Audit designs and code for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
racciolyraccioly

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.

Community
Advanced
tom-xstom-xs

a11y-playwright-testing

Automate accessibility testing with Playwright and axe-core for WCAG 2.1 AA compliance.

Community
Advanced