skills.rest
daniellelooo
danielleloooCOMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Implement WCAG 2.1 accessibility standards for web interfaces.

Updated Mar 10, 2026
Search Tags:#accessibility#a11y#ARIA#WCAG#screen-reader#keyboard-navigation
One-click install
npx skills add https://github.com/daniellelooo/velour --skill web-accessibility-daniellelooo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/daniellelooo/velour/tree/main/.agents/skills/web-accessibility
Command: npx skills add https://github.com/daniellelooo/velour --skill web-accessibility-daniellelooo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your web interfaces are usable by everyone, regardless of ability, by adhering to accessibility standards like WCAG.

Core Features & Use Cases

  • Accessible UI Development: Guides the creation of components that are navigable via keyboard, understandable by screen readers, and visually clear.
  • Accessibility Audits: Helps identify and fix issues like poor color contrast, missing ARIA attributes, or improper semantic HTML.
  • Use Case: When developing a new modal dialog, use this Skill to ensure it traps focus correctly, is announced by screen readers, and can be closed with the Escape key.

Quick Start

Implement a React modal component that adheres to WCAG 2.1 AA standards, ensuring keyboard navigation and screen reader compatibility.

Frequently Asked Questions about web-accessibility

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

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

To make a React modal accessible, ensure it traps focus correctly, is announced by screen readers using proper ARIA attributes, and can be closed with the Escape key. This approach meets WCAG 2.1 AA standards for keyboard navigation and screen reader compatibility.

What WCAG 2.1 guidelines do I need to follow for web accessibility?▼

WCAG 2.1 guidelines for web accessibility require proper semantic HTML, appropriate ARIA attributes, full keyboard navigation, and sufficient color contrast. Adhering to these standards ensures your user interfaces are understandable by screen readers and usable by everyone.

Can I use this approach to audit web components for missing ARIA attributes?▼

Yes, you can audit web components for missing ARIA attributes, poor color contrast, and improper semantic HTML. This process identifies accessibility issues and guides the fixes needed to ensure your interfaces meet disability standards for digital content.

Does this web accessibility implementation work with Vue and Svelte frameworks?▼

Yes, this web accessibility implementation works with Vue and Svelte frameworks. It handles ARIA attributes, keyboard navigation, screen reader compatibility, and semantic HTML across various frameworks to ensure WCAG 2.1 compliance.

What is the best way to ensure keyboard navigation works across interactive UI elements?▼

The best way to ensure keyboard navigation works is by using proper semantic HTML and ARIA attributes. This guarantees that interactive UI elements are navigable via keyboard and understandable by screen readers, fulfilling WCAG 2.1 accessibility standards.

Related Skills

Explore More Software Engineering Skills→
JEO-tech-aiJEO-tech-ai
8

web-accessibility

Apply WCAG 2.1 guidelines to identify and fix accessibility gaps in web UIs.

Community
Advanced
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic
TamtitamTamtitam

aria-accessibility-fixer

Review and correct ARIA attributes in frontend HTML for WCAG compliance.

Community
Intermediate