skills.rest
fabioaap
fabioaapCOMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Audit UI components for WCAG conformance and implement accessibility fixes.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#screen-reader#aria#keyboard-navigation
One-click install
npx skills add https://github.com/fabioaap/Prototipacao-Adsmagic --skill web-accessibility-fabioaap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/fabioaap/Prototipacao-Adsmagic/tree/main/references/upstream/adsmagic-aiox-source/.agents/skills/web-accessibility
Command: npx skills add https://github.com/fabioaap/Prototipacao-Adsmagic --skill web-accessibility-fabioaap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams build accessible web interfaces and ensure compliance with WCAG by guiding semantic HTML, ARIA usage, keyboard navigation, and testing.

Core Features & Use Cases

  • Provides guidelines for semantic HTML, ARIA attributes, and focus management
  • Helps perform accessibility audits and fix issues in UI components
  • Supports screen reader compatibility and keyboard-only navigation scenarios

Quick Start

Audit a React component for WCAG conformance and implement the required accessibility fixes.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I audit a React component for WCAG compliance?▼

To audit a React component for WCAG compliance, review its semantic HTML structure, ARIA attributes, and keyboard navigation. This skill guides you through identifying accessibility issues in UI components and implementing the necessary fixes across frameworks like React, Vue, or Svelte.

What is the best way to implement ARIA attributes for screen reader compatibility?▼

The best way to implement ARIA attributes for screen reader compatibility is by combining them with semantic HTML. This skill provides guidelines for correct ARIA usage and focus management to ensure UI components work seamlessly with assistive technologies.

Does this web accessibility guidance work with plain HTML and JavaScript projects?▼

Yes, this web accessibility guidance works with plain HTML and JavaScript projects, as well as React, Vue, and Svelte. It helps implement semantic HTML, keyboard navigation, and focus management without requiring specific framework dependencies.

How do I fix keyboard navigation issues in UI components?▼

Fix keyboard navigation issues in UI components by applying proper focus management and semantic HTML. This skill helps identify and resolve accessibility barriers for keyboard-only users, ensuring logical tab order and operable interfaces.

When should I use semantic HTML instead of ARIA for accessibility?▼

Use semantic HTML instead of ARIA whenever native elements provide the required behavior, as ARIA is intended to fill gaps. This skill guides you through semantic HTML implementation and ARIA usage to meet WCAG guidelines effectively.

Related Skills

Explore More Software Engineering Skills→
peopledearpeopledear
1

Frontend Accessibility

Audit web interfaces for WCAG, ARIA, keyboard navigation, and semantic HTML.

Official
Basic
hiyenwonghiyenwong
2

accessibility-wcag

Audit web interfaces for WCAG 2.2 conformance and provide remediation guidance.

Community
Advanced
v4lheruv4lheru

pact-frontend-patterns

Provide React frontend patterns for scalable, accessible UI components.

Community
Intermediate
leboncoinleboncoin
92

check-accessibility

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

Official
Intermediate