skills.rest
JimmyTranDev
JimmyTranDevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-accessibility

Implement WCAG accessibility patterns for web, iOS, and Android UIs.

1|Updated Sep 12, 2025
Search Tags:#accessibility#a11y#frontend#wcag#react-native#aria#keyboard-navigation
One-click install
npx skills add https://github.com/JimmyTranDev/dotfiles --skill ui-accessibility-jimmytrandev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-accessibility
Source: https://github.com/JimmyTranDev/dotfiles/tree/main/src/opencode/skills/ui-accessibility
Command: npx skills add https://github.com/JimmyTranDev/dotfiles --skill ui-accessibility-jimmytrandev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web and mobile interfaces frequently fail accessibility standards, excluding users with disabilities and limiting reach. This Skill provides a comprehensive accessibility checklist and implementation patterns to ensure WCAG compliance, semantic HTML, ARIA usage, and React Native accessibility props, along with keyboard navigation and focus management considerations.

Core Features & Use Cases

  • WCAG-compliant patterns for semantic HTML, ARIA, and keyboard navigation across web platforms.
  • React Native accessibility props guidance for iOS (VoiceOver) and Android (TalkBack), plus focus management and testing readiness.
  • Clear guidance for validating accessibility with automated tests and manual checks in real-world projects.

Quick Start

Follow this quick-start to apply accessibility patterns to a web and mobile project.

Frequently Asked Questions about ui-accessibility

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

FAQPage Schema
How do I make my web UI meet WCAG standards for keyboard navigation and screen readers?▼

To make your web UI meet WCAG standards, apply semantic HTML, correct ARIA usage, and robust focus management to ensure interfaces are keyboard-operable and screen-reader friendly.

How do I implement VoiceOver and TalkBack accessibility in React Native?▼

Implement VoiceOver and TalkBack accessibility in React Native by applying native accessibility props to manage focus, labels, and roles across iOS and Android platforms.

What is the best way to test ARIA roles and color contrast for frontend accessibility?▼

The best way to test ARIA roles and color contrast is by combining automated accessibility tests with manual checks to validate motion preferences and screen-reader interactions in real-world projects.

Does this accessibility checklist cover both web HTML semantics and mobile screen-reader patterns?▼

Yes, this accessibility checklist covers web HTML semantics and ARIA alongside mobile screen-reader patterns, including React Native focus management and VoiceOver and TalkBack testing workflows.

Why does my keyboard navigation fail to meet WCAG focus management requirements?▼

Keyboard navigation fails WCAG focus management requirements when HTML lacks proper semantics or ARIA roles, preventing screen readers from tracking focus state transitions across interactive elements.

Can I use this to document accessibility patterns for both iOS and Android platforms?▼

Yes, you can use this to generate comprehensive accessibility documentation covering semantic HTML, ARIA usage, focus management, and motion preferences across web, iOS, and Android platforms.

Related Skills

Explore More Software Engineering Skills→
ConradmakerConradmaker

fe-a11y

Guide semantic HTML, ARIA roles, labels, and keyboard navigation for React UI components.

Community
Advanced
zenobi-uszenobi-us
68

accessibility-tester

Audit digital interfaces for WCAG 2.1 compliance and accessibility gaps.

Official
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
nimadorostkarnimadorostkar
25

accessibility

Audit web interfaces for WCAG 2.2 AA conformance.

Community
Advanced