skills.rest
trystan2k
trystan2kCOMMUNITY
Explore all skills by this author →
𝕏@trystan2kGitHub

web-accessibility

Implement WCAG 2.1 accessibility in React, Vue, Svelte, and vanilla JavaScript interfaces.

1|Updated Feb 19, 2025
Search Tags:#accessibility#a11y#ARIA#WCAG#semantic-html#screen-reader#keyboard-navigation
One-click install
npx skills add https://github.com/trystan2k/favoritable-old --skill web-accessibility-trystan2k
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/trystan2k/favoritable-old/tree/main/.agents/skills/web-accessibility
Command: npx skills add https://github.com/trystan2k/favoritable-old --skill web-accessibility-trystan2k

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of building web interfaces that exclude users with disabilities, fail to meet legal accessibility compliance requirements, and provide poor experiences for people using assistive technologies like screen readers.

Core Features & Use Cases

  • WCAG 2.1 Compliance: Implements standards for Level A, AA, and AAA accessibility compliance.
  • Accessible Component Development: Guides creation of buttons, forms, modals, dropdowns, and navigation with proper ARIA attributes, keyboard navigation, and semantic HTML.
  • Accessibility Testing: Supports automated testing with axe-core and Lighthouse, plus manual screen reader and keyboard-only testing.
  • Use Case: When building a React modal, this Skill ensures focus trapping, ESC key closure, and proper screen reader announcements for modal title and content.

Quick Start

Use the web-accessibility skill to audit and fix accessibility issues in your existing React form component to meet WCAG 2.1 AA standards, including adding proper labels, ARIA attributes, and keyboard navigation support.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I make my React modal accessible for screen readers and keyboard navigation?▼

To make a React modal accessible, implement focus trapping, bind ESC key closure, and add ARIA attributes for screen reader announcements. This ensures full keyboard navigation and WCAG 2.1 compliance for modal components.

What WCAG 2.1 compliance levels does this accessibility guidance support?▼

WCAG 2.1 compliance is supported across Level A, AA, and AAA accessibility tiers. This covers semantic HTML structure, sufficient color contrast ratios, and proper ARIA attribute usage for all UI components.

How do I audit my web UI for WCAG compliance using axe-core and Lighthouse?▼

You can audit web UI accessibility by running automated tests with axe-core and Lighthouse. This detects non-compliant elements, missing ARIA attributes, and insufficient color contrast ratios to satisfy WCAG requirements.

Does this web accessibility skill work with Vue and Svelte or just React?▼

This web accessibility skill works across React, Vue, Svelte, and vanilla JavaScript frameworks. It guides accessible component development for buttons, forms, modals, and dropdowns with proper ARIA and semantic HTML.

What is the best way to fix non-accessible form components for keyboard-only users?▼

The best way to fix non-accessible forms is adding proper labels, ARIA attributes, and full keyboard navigation support. This ensures keyboard-only users can interact with all form elements and meet WCAG 2.1 AA standards.

Why do my dropdown components fail WCAG compliance and exclude assistive technology users?▼

Dropdown components fail WCAG compliance when missing semantic HTML structure, proper ARIA attributes, and keyboard navigation support. This excludes assistive technology users who rely on screen readers and keyboard-only interactions.

Related Skills

Explore More Software Engineering Skills→
MonosenMonosen

tailwind-css-patterns

Apply Tailwind CSS utility patterns to React, Vue, Svelte, or vanilla JavaScript components.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
NextSpark-jsNextSpark-js

accessibility

Implement WCAG 2.1 Level AA compliance in Next.js applications.

Official
Advanced