building-interaction-accessibility

What problem does it solve?

This Skill addresses the critical need to make web interactions accessible to all users, regardless of their abilities or assistive technologies. It tackles issues like poor keyboard navigation, invisible focus states, and lack of support for users with motion sensitivities.

Core Features & Use Cases

• Keyboard Navigation: Ensures all interactive elements can be accessed and operated using a keyboard.
• Focus Management: Implements clear and visible focus indicators (:focus-visible) to guide keyboard users.
• Reduced Motion Support: Integrates prefers-reduced-motion to disable or minimize non-essential animations for sensitive users.
• ARIA Implementation: Provides guidance on using ARIA attributes for enhanced screen reader compatibility and semantic understanding of interactive components.
• Use Case: When building a custom dropdown menu, this Skill ensures it can be fully operated with the Tab and Arrow keys, has a visible focus outline when tabbed to, and respects the user's prefers-reduced-motion setting.

Quick Start

Use the building-interaction-accessibility skill to implement keyboard navigation and visible focus styles for all interactive elements on the page.