skills.rest
davidarce
davidarceCOMMUNITY
Explore all skills by this author →
𝕏@_davidarceGitHub

web-accessibility-advisor

Identify and fix web accessibility gaps for WCAG 2.1 AA compliance.

1|Updated Mar 25, 2026
Search Tags:#accessibility#frontend#wcag#keyboard#semantic-html#screen-reader#aria
One-click install
npx skills add https://github.com/davidarce/devrune-starter-catalog --skill web-accessibility-advisor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility-advisor
Source: https://github.com/davidarce/devrune-starter-catalog/tree/main/skills/web-accessibility-advisor
Command: npx skills add https://github.com/davidarce/devrune-starter-catalog --skill web-accessibility-advisor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Web accessibility review and guidance for frontend interfaces to meet WCAG 2.1 AA, ARIA best practices, and screen reader compatibility.

Core Features & Use Cases

  • Semantic HTML-first guidance: prefer native HTML for accessibility, since built-in semantics, keyboard handling, and screen reader support are provided by native elements.
  • ARIA guidance: use ARIA only when necessary; "No ARIA is better than bad ARIA" to avoid assisting with inaccessible patterns.
  • On-demand references: consult the materials in the references directory for WCAG criteria, ARIA patterns, keyboard navigation, and accessible components.
  • Advisor Mode support: integrates with the SDD orchestrator to adapt outputs when a GUIDANCE CONTEXT block is present and a plan excerpt is provided.

Quick Start

Review a web page for WCAG 2.1 AA compliance and generate actionable accessibility improvements.

Frequently Asked Questions about web-accessibility-advisor

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

FAQPage Schema
How do I fix web accessibility gaps to meet WCAG 2.1 AA compliance?▼

Use semantic HTML first to provide built-in semantics and keyboard handling. Apply ARIA only when native elements cannot convey the necessary semantics, ensuring you avoid creating inaccessible patterns that confuse screen readers.

How do I make custom frontend widgets keyboard accessible?▼

Make custom widgets keyboard accessible by implementing logical tab order, focus management, and correct ARIA roles. The Skill checks keyboard navigation compatibility against WCAG criteria 2.1.1 and 2.4.7 to provide remediation steps.

When should I use ARIA roles on web pages?▼

Use ARIA roles only when semantic HTML elements cannot provide the required semantics. Following the principle that no ARIA is better than bad ARIA, avoid using ARIA to fix inaccessible patterns that native HTML elements already handle.

Does this web accessibility advisor work with existing frontend components?▼

Yes, it works with existing frontend components and patterns. It identifies accessibility gaps in your current interfaces and generates actionable improvements to achieve WCAG 2.1 AA compliance across pages and widgets.

What WCAG criteria are checked for screen reader compatibility?▼

It checks screen reader compatibility and other requirements against WCAG criteria 1.1.1, 1.3.1, 1.4.3, 2.1.1, 2.4.3, 2.4.7, and 4.1.2, providing guidance and remediation steps to satisfy these specific compliance benchmarks.

Related Skills

Explore More Software Engineering Skills→
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate