skills.rest
phananhtuan09
phananhtuan09COMMUNITY
Explore all skills by this author →
GitHub

ux-accessibility

Identify accessibility gaps in UI components and validate keyboard navigability, semantic HTML, and WCAG contrast.

1|Updated Oct 30, 2025
Search Tags:#accessibility#a11y#usability#wcag#aria#keyboard-navigation#focus-management
One-click install
npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill ux-accessibility-phananhtuan09
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-accessibility
Source: https://github.com/phananhtuan09/ai-agent-workflow/tree/main/.opencode/skill/ux-accessibility
Command: npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill ux-accessibility-phananhtuan09

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI components are accessible by default, reducing barriers for users with disabilities and boosting WCAG compliance.

Core Features & Use Cases

  • Keyboard-navigable interfaces with proper focus management and visible focus indicators
  • Semantic HTML and ARIA attributes for screen reader compatibility
  • Color contrast validation and accessible labeling for forms and controls
  • Focus trapping for modals and logical route changes for assistive technologies
  • Use Case: apply these guidelines when building new components to deliver inclusive experiences

Quick Start

Run an accessibility review on a component to ensure keyboard focus order and ARIA labeling.

Frequently Asked Questions about ux-accessibility

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

FAQPage Schema
How do I make my UI components keyboard navigable and screen reader compatible?▼

To make UI components keyboard navigable, implement semantic HTML, proper focus management, visible focus indicators, and ARIA attributes for screen reader compatibility.

What's the best way to handle focus management in modals for WCAG compliance?▼

For WCAG compliance in modals, apply focus trapping to ensure keyboard navigation stays within the modal, and manage focus logically during route changes for assistive technologies.

How do I validate color contrast for accessible forms and controls?▼

Validate color contrast by running accessibility checks on UI components to ensure they meet WCAG-compliant contrast ratios, and provide accessible labeling for forms and controls.

When do I need to add ARIA attributes to interactive elements?▼

Add ARIA attributes to interactive elements when semantic HTML alone does not convey the proper role, state, or properties to screen readers, ensuring usability and inclusivity.

Does this accessibility review cover both new component design and development phases?▼

Yes, this accessibility review applies across forms, modals, buttons, and interactive elements during both design and development to identify accessibility gaps and improve usability.

Related Skills

Explore More Design & Creative Skills→
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
Software-Design-ClubSoftware-Design-Club
1

Frontend Accessibility

Guide developers to implement accessible UI components with ARIA and keyboard navigation.

Official
Basic
zinohomezinohome
1

accessibility-auditor

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

Community
Advanced