skills.rest
tsuji-tomonori
tsuji-tomonoriCOMMUNITY
Explore all skills by this author →
GitHub

a11y-pointer-targets

Implements WCAG 2.2 AA pointer target size and drag-operation accessibility standards.

1|Updated Feb 11, 2026
Search Tags:#accessibility#wcag#user interface#ux#drag-and-drop#pointer-targets
One-click install
npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-pointer-targets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-pointer-targets
Source: https://github.com/tsuji-tomonori/diopside-v3/tree/main/.opencode/skills/a11y-pointer-targets
Command: npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-pointer-targets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that pointer-based user interfaces, especially those involving drag-and-drop or small targets, are usable by everyone, including individuals with motor impairments, by meeting WCAG 2.2 AA standards.

Core Features & Use Cases

  • Target Size Compliance: Ensures clickable/tappable areas meet the minimum 24x24 CSS pixel requirement.
  • Drag-and-Drop Alternatives: Provides non-drag alternatives for essential operations.
  • Misoperation Prevention: Implements safeguards against accidental actions and provides cancellation options.
  • Use Case: Redesigning a mobile app's settings screen with many small icons, ensuring each is easily tappable and that accidental presses of critical functions are prevented.

Quick Start

Apply the a11y-pointer-targets skill to the user profile editing form to ensure all interactive elements meet WCAG 2.2 AA standards.

Frequently Asked Questions about a11y-pointer-targets

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

FAQPage Schema
How do I make small UI elements meet WCAG 2.2 AA target size requirements?▼

To meet WCAG 2.2 AA target size requirements, small UI elements must have a clickable area of at least 24x24 CSS pixels. This ensures interactive elements are accessible and prevents accidental activations in densely packed controls.

How do I provide drag-and-drop alternatives for WCAG 2.57 compliance?▼

Providing drag-and-drop alternatives for WCAG 2.5.7 involves implementing non-drag interaction methods for essential operations. This ensures users with motor impairments can complete actions without complex gestures, meeting accessibility standards.

Does WCAG 2.2 AA require a minimum target size for mobile app icons?▼

Yes, WCAG 2.2 AA requires a minimum target size of 24x24 CSS pixels for mobile app icons. Ensuring compliance prevents misoperation and accidental presses of critical functions on densely packed settings screens.

What is the best way to prevent accidental activations in pointer interactions?▼

Preventing accidental activations in pointer interactions requires implementing safeguards and cancellation options. This approach ensures users can safely interact with small targets and complex drag-and-drop interfaces without triggering unintended actions.

Why do densely packed controls fail accessibility standards for pointer targets?▼

Densely packed controls fail accessibility standards when their pointer targets are smaller than 24x24 CSS pixels. This lack of sufficient target area causes misoperation and makes interfaces unusable for individuals with motor impairments.

Related Skills

Explore More Design & Creative Skills→
kehwarkehwar

input-keyboard-mouse-touch

Handle keyboard, mouse, touch, pointer, drag, drop, and gamepad input in Phaser 4.

Community
Advanced
cbemistercbemister

touch-interactions

Audit and implement touch interactions in mobile UIs across iOS and Android.

Community
Advanced
exceptionlessexceptionless
2.5k

accessibility

Enforce WCAG 2.2 AA compliance for frontend components with semantic HTML and ARIA.

Official
Intermediate
kusutorikusutori

reactor-input

Automate gesture, pointer, drag-and-drop, and focus handling in Reactor frameworks.

Community
Intermediate