skills.rest
freedom909
freedom909COMMUNITY
Explore all skills by this author →
GitHub

accessibility

Implements and audits WCAG 2.2 Level AA accessibility for Web, iOS, and Android interfaces.

Updated Mar 18, 2026
Search Tags:#accessibility#screen reader#ARIA#WCAG#audit#swiftui#Jetpack Compose
One-click install
npx skills add https://github.com/freedom909/real-estate-saas --skill accessibility-freedom909
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/freedom909/real-estate-saas/tree/main/.trae/skills/accessibility
Command: npx skills add https://github.com/freedom909/real-estate-saas --skill accessibility-freedom909

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Digital interfaces often exclude users who rely on screen readers, keyboard navigation, or switch controls because developers lack concrete guidance on translating WCAG 2.2 standards into platform-specific code. This Skill bridges that gap by mapping accessibility requirements to ARIA attributes, SwiftUI traits, and Compose semantics. ## Core Features & Use Cases - Cross-Platform Semantic Mapping: Provides a direct mapping table between Web (HTML/ARIA), iOS (SwiftUI accessibility traits), and Android (Compose semantics) for labels, hints, roles, and live regions. - WCAG 2.2 Audit Guidance: Walks through the POUR principles with concrete success criteria such as 24x24px target size (SC 2.5.8), focus appearance (SC 2.4.11), and redundant entry prevention (SC 3.3.7). - Anti-Pattern Detection: Identifies common barriers like div-buttons, color-only status indicators, and modals that fail to trap focus. - Use Case: When building a search form in React, use this Skill to generate the correct role="search", screen-reader-only labels, and icon-button aria-label markup, then verify the component against the best practices checklist. ## Quick Start Audit my login form component for WCAG 2.2 compliance and generate the correct ARIA attributes for any accessibility issues found.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a button accessible in HTML and ARIA?▼

Use a native `<button>` element first, which provides built-in keyboard support and role semantics. For icon-only buttons, add an `aria-label` describing the action, and mark decorative SVGs with `aria-hidden="true"` so screen readers skip them.

How to add accessibility labels in SwiftUI and Jetpack Compose?▼

In SwiftUI, use `.accessibilityLabel()` for the primary label and `.accessibilityHint()` for secondary context. In Compose, set `contentDescription` inside `Modifier.semantics`, and use `stateDescription` for toggle states.

What is the minimum touch target size in WCAG 2.2?▼

WCAG 2.2 Success Criterion 2.5.8 requires a minimum target size of 24x24 CSS pixels for web interfaces. Native platforms conventionally use larger targets, such as 44x44 points on iOS, to accommodate touch input.

Does WCAG 2.2 require focus trapping in modals?▼

Yes, modals must contain keyboard focus while open so users cannot accidentally navigate background content. Focus must also be escapable via the Escape key or an explicit close button, per WCAG SC 2.1.2 on keyboard traps.

Why is using color alone to indicate errors an accessibility problem?▼

Color-only indicators fail users with color vision deficiencies and screen reader users who cannot perceive the visual change. WCAG requires text-based error messages with suggestions for correction, as specified in SC 3.3.3.

What text contrast ratio does WCAG 2.2 Level AA require?▼

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components. Content must also reflow without loss of function when zoomed up to 400%.

Related Skills

Explore More Software Engineering Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
lucasloutayflucasloutayf

frontend-ui-engineering

Create production-ready UI components with responsive layouts and accessibility features.

Community
Intermediate
VirtoCommerceVirtoCommerce
2

qa-accessibility

Audits web interfaces for WCAG 2.2 AA compliance using axe-core and Lighthouse checks.

Official
Advanced