skills.rest
veerababumanyam
veerababumanyamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Updated Dec 17, 2025
Search Tags:#accessibility#a11y#screen reader#semantic HTML#keyboard navigation#ARIA#WCAG
One-click install
npx skills add https://github.com/veerababumanyam/RawDrive102 --skill accessibility-veerababumanyam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/veerababumanyam/RawDrive102/tree/main/.claude/skills/accessibility
Command: npx skills add https://github.com/veerababumanyam/RawDrive102 --skill accessibility-veerababumanyam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility is often overlooked in UI development, leading to usability gaps for keyboard-only users and assistive technology. This Skill provides guidelines to ensure components meet WCAG 2.1 AA standards.

Core Features & Use Cases

  • Keyboard-friendly: Ensure focus order, visible focus indicators, and keyboard operability.
  • ARIA and Semantics: Use appropriate ARIA roles and semantic HTML to convey purpose to assistive tech.
  • Contrast and Labels: Enforce color contrast and descriptive labels for controls.
  • Use Case: When building a new dashboard, apply these guidelines to ensure all controls are accessible to screen readers and keyboard users.

Quick Start

Access UI components in the project and verify keyboard navigation, focus indicators, and ARIA labeling; run a screen reader compatibility review.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make UI components accessible for keyboard navigation and screen readers?▼

To make UI components accessible, ensure keyboard operability with visible focus indicators, logical focus order, and use semantic HTML with appropriate ARIA roles for screen reader compatibility.

What WCAG 2.1 AA guidelines do I need to check for front-end accessibility?▼

WCAG 2.1 AA guidelines require enforcing color contrast ratios, descriptive labels for controls, keyboard operability, and proper semantic HTML structure to pass front-end code reviews and design validation.

How do I add ARIA attributes and semantic HTML to improve screen reader compatibility?▼

Add ARIA attributes and semantic HTML by replacing generic tags with meaningful elements and applying roles to convey component purpose to assistive tech, ensuring UI controls are properly labeled.

Can I use this approach to validate color contrast and labels for existing dashboards?▼

Yes, you can validate existing dashboards by reviewing color contrast ratios against standards and verifying that all interactive controls have descriptive labels for assistive technology.

Does semantic HTML alone satisfy keyboard navigation and focus indicator requirements?▼

Semantic HTML provides foundational structure but does not fully satisfy keyboard navigation requirements; you must explicitly enforce visible focus indicators and logical focus order for operability.

Why does my keyboard focus order break when adding ARIA roles to UI components?▼

Keyboard focus order breaks when ARIA roles alter the semantic structure without adjusting DOM order; ensure DOM sequence matches the visual layout and focus indicators remain visible.

Related Skills

Explore More Software Engineering Skills→
somachaksomachak

building-accessible-ui

Audit React/TypeScript UI components for accessibility, semantics, and keyboard navigation.

Community
Advanced
luissimon96luissimon96

graph-accessibility

Audit UI components against WCAG 2.2 AA accessibility standards.

Community
Advanced
tubone24tubone24

UIレビュー

Review React component code for quality, accessibility, and dark mode compliance.

Community
Intermediate
WanxiaJaneYangWanxiaJaneYang

accessibility-basic-check

Audit UI elements for color contrast, keyboard navigation, and form labeling.

Community
Basic