skills.rest
xiaoniuge36
xiaoniuge36COMMUNITY
Explore all skills by this author →
GitHub

accessibility

Implement ARIA attributes and keyboard navigation for WCAG compliance.

6|2|Updated Dec 19, 2025
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#wcag#aria
One-click install
npx skills add https://github.com/xiaoniuge36/codegen-engine-mcp --skill accessibility-xiaoniuge36
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/xiaoniuge36/codegen-engine-mcp/tree/main/.cursor/skills/accessibility
Command: npx skills add https://github.com/xiaoniuge36/codegen-engine-mcp --skill accessibility-xiaoniuge36

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of making digital content accessible to people with disabilities, ensuring compliance with standards and improving user experience for everyone.

Core Features & Use Cases

  • ARIA Implementation: Adds semantic ARIA attributes to improve screen reader compatibility.
  • Keyboard Navigation: Ensures all interactive elements are navigable and operable via keyboard.
  • Visual Aids: Provides guidance on color contrast and focus indicators.
  • Use Case: When developing a new component, use this Skill to ensure it meets WCAG AA standards by adding appropriate ARIA roles and attributes, and verifying keyboard operability.

Quick Start

Use the accessibility skill to add ARIA attributes to the provided button component.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I add ARIA attributes to a web component for screen reader compatibility?▼

To add ARIA attributes for screen reader compatibility, apply semantic ARIA roles and properties to your HTML elements. This ensures assistive technologies correctly interpret and announce interactive components to users with disabilities.

What is the best way to ensure keyboard navigation works for all interactive elements?▼

Ensuring keyboard navigation requires making all interactive elements operable via keyboard inputs. This involves managing focus indicators and logical tab order so users can navigate without a mouse.

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

To meet WCAG AA standards, implement web accessibility principles by adding appropriate ARIA roles, verifying keyboard operability, and ensuring proper color contrast. This creates an inclusive digital experience.

Do I need semantic HTML to fix common web accessibility issues?▼

Semantic HTML is needed to fix common web accessibility issues because it provides inherent meaning and structure. Using native elements ensures screen readers and keyboard navigation function correctly without extra ARIA overrides.

Why does my screen reader skip interactive elements during keyboard navigation?▼

A screen reader skips interactive elements during keyboard navigation when missing semantic HTML or ARIA attributes prevent proper focus management. Adding appropriate roles and ensuring logical tab order resolves this operability issue.

Related Skills

Explore More Design & Creative Skills→
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
vladolaruvladolaru
6

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate