skills.rest
malinovskiy-makar
malinovskiy-makarCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

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

Updated Jun 13, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#audit#wcag#swiftui#aria
One-click install
npx skills add https://github.com/malinovskiy-makar/qls --skill accessibility-malinovskiy-makar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/malinovskiy-makar/qls/tree/main/.claude/skills/accessibility
Command: npx skills add https://github.com/malinovskiy-makar/qls --skill accessibility-malinovskiy-makar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building inclusive digital products requires translating WCAG 2.2 success criteria into concrete platform-specific code, and teams often miss keyboard navigation, contrast, focus management, or screen-reader support during implementation and review. ## Core Features & Use Cases - Cross-Platform Semantic Mapping: Maps accessibility features across Web (ARIA/HTML), iOS (SwiftUI traits and labels), and Android (Compose semantics and contentDescription). - WCAG 2.2 Auditing: Reviews code against success criteria including Target Size (24x24px), Focus Appearance, contrast ratios, and Redundant Entry. - Anti-Pattern Detection: Identifies div-buttons, color-only status indicators, uncontained modal focus, and redundant alt text. - Use Case: When building a new checkout form, use this Skill to generate proper labels, error suggestions, focus indicators, and live-region announcements that pass WCAG 2.2 Level AA. ## Quick Start Audit my login form component for WCAG 2.2 Level AA compliance and fix any keyboard, contrast, or screen-reader issues.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make a web component WCAG 2.2 compliant?▼

Start with semantic HTML elements, ensure 4.5:1 text contrast, provide 24x24px minimum target sizes, and add visible focus indicators. Verify all interactions work via keyboard and use correct Name, Role, Value patterns for assistive technologies.

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

In SwiftUI, use .accessibilityLabel() and .accessibilityHint() modifiers with .accessibilityAddTraits(.isButton) for roles. In Compose, use Modifier.semantics with contentDescription, stateDescription, and role properties.

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

WCAG 2.2 Success Criterion 2.5.8 requires a minimum 24x24 CSS pixel target size for web pointer inputs. Native platforms conventionally use larger targets, such as 44x44 points on iOS.

Why is my modal not accessible to keyboard users?▼

Modals fail accessibility when they don't trap focus, letting keyboard users tab into background content. Focus must be contained while open, escapable via the Escape key or close button, and returned to the trigger element on close.

When should I use ARIA roles instead of native HTML elements?▼

Prefer native semantic elements like button, nav, and form because they provide built-in keyboard support and roles. Only add ARIA roles to custom components when no native equivalent exists, since incorrect ARIA creates more barriers than none.

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
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
dodygdodyg

lighthouse-scanner

Detect and interpret Lighthouse CI accessibility results to identify regressions.

Community
Advanced