skills.rest
fgarofalo56
fgarofalo56COMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-wcag

Ensure web applications meet WCAG 2.1 AA standards with semantic HTML and ARIA.

6|2|Updated Jan 22, 2026
Search Tags:#inclusive design#accessibility#a11y#web development#keyboard navigation#wcag#aria
One-click install
npx skills add https://github.com/fgarofalo56/Suppercharge_Microsoft_Fabric --skill accessibility-wcag-fgarofalo56
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/fgarofalo56/Suppercharge_Microsoft_Fabric/tree/main/.github/skills/accessibility-wcag
Command: npx skills add https://github.com/fgarofalo56/Suppercharge_Microsoft_Fabric --skill accessibility-wcag-fgarofalo56

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers build web applications that are usable by everyone, regardless of ability, by adhering to Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.

Core Features & Use Cases

  • Semantic HTML Guidance: Promotes the correct use of HTML elements for better accessibility.
  • ARIA Pattern Examples: Provides practical examples for live regions, accessible forms, buttons, and modals.
  • Keyboard Navigation: Details essential keyboard interactions for various UI components.
  • Screen Reader Optimization: Offers utilities for visually hidden content that is accessible to screen readers.
  • Testing Checklist: Includes automated and manual testing steps to ensure compliance.
  • Use Case: A developer can use this Skill to ensure their new e-commerce checkout form is fully accessible to users with visual impairments or motor disabilities.

Quick Start

Review the provided WCAG 2.1 AA requirements and testing checklist to ensure your web application meets accessibility standards.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I make my web application meet WCAG 2.1 AA standards?▼

WCAG 2.1 AA compliance requires semantic HTML, appropriate ARIA attributes, and functional keyboard navigation. You should also verify color contrast ratios, accessible form patterns, and focus management to optimize for screen readers.

What is the best way to implement accessible modals and keyboard navigation?▼

Implementing accessible modals requires proper ARIA patterns and strict focus management. You must trap keyboard navigation within the modal and return focus to the triggering element upon close to ensure screen reader optimization.

How do I use ARIA attributes for accessible forms and live regions?▼

ARIA attributes improve accessible forms by labeling inputs and announcing dynamic content changes via live regions. This ensures visually hidden content remains accessible to screen readers while maintaining WCAG 2.1 AA compliance.

Can I use this approach for a11y audits and regulatory compliance checks?▼

Yes, this approach supports a11y audits and regulatory compliance checks. It provides a testing checklist covering automated and manual steps to verify semantic HTML, color contrast ratios, and keyboard interactions against Web Content Accessibility Guidelines.

Related Skills

Explore More Software Engineering Skills→
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

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

Community
Advanced