skills.rest
eygraber
eygraberCOMMUNITY
Explore all skills by this author →
GitHub

ui-accessibility

Enforce descriptive semantics and accessible touch targets in Jetpack Compose UI components.

1|Updated Feb 5, 2026
Search Tags:#ui#accessibility#compose#semantics#touch-targets#screen-readers#content-descriptions
One-click install
npx skills add https://github.com/eygraber/jellyfin-kmp --skill ui-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-accessibility
Source: https://github.com/eygraber/jellyfin-kmp/tree/main/.claude/skills/ui-accessibility
Command: npx skills add https://github.com/eygraber/jellyfin-kmp --skill ui-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensure UI components meet accessibility standards by providing clear content descriptions, proper semantic targets, and screen-reader friendly semantics across Compose-based interfaces.

Core Features & Use Cases

  • Content descriptions for icons and meaningful elements to support screen readers.
  • Proper touch target sizing and semantics merging to create accessible, navigable layouts.
  • Use Case: As a developer, you implement accessible patterns in Compose for buttons, icons, and labeled controls to improve inclusivity.

Quick Start

Review the sample patterns and apply contentDescription to icons and buttons in your Compose UI.

Frequently Asked Questions about ui-accessibility

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

FAQPage Schema
How do I add content descriptions for icons in Jetpack Compose?▼

To add content descriptions for icons in Jetpack Compose, you apply descriptive semantics to your UI components. This ensures screen readers can properly announce interactive elements and icons for visually impaired users.

What is semantics merging in Compose and when do I need it?▼

Semantics merging in Compose combines multiple semantic properties from child elements into a single parent node. You need it to create accessible, navigable layouts that screen readers interpret as one unified interactive component.

How do I enforce accessible touch targets in Android Compose UI?▼

You enforce accessible touch targets in Android Compose UI by applying specific semantic patterns and sizing rules. This ensures interactive elements like buttons and icons meet standard accessibility sizing requirements for all users.

Does this approach support screen-reader compatibility for dialogs and headings?▼

Yes, this approach supports screen-reader compatibility for dialogs and headings by applying heading semantics and state descriptions. It ensures Compose-based screens, dialogs, and interactive elements are fully accessible.

What's the best way to apply state descriptions for labeled controls in Compose?▼

The best way to apply state descriptions for labeled controls in Compose is to enforce descriptive semantics on interactive elements. This satisfies screen-reader requirements by clearly communicating the current state of buttons and toggles.

Related Skills

Explore More Design & Creative Skills→
krutikJainkrutikJain
14

android-compose-foundations

Create Android UI layouts and themes using Jetpack Compose components.

Community
Intermediate
siddhantparadoxsiddhantparadox

android-accessibility

Audit Android Jetpack Compose UI components for WCAG AA accessibility compliance.

Community
Intermediate
pdovhomiljapdovhomilja

Frontend Accessibility

Apply semantic HTML, ARIA, keyboard navigation, and color contrast to frontend interfaces.

Community
Basic
thinhtt264thinhtt264

android-accessibility

Audit Jetpack Compose UI for Android accessibility issues via prompt-driven checklists.

Community
Basic