Does it handle focus trapping for modals?

Yes, the skill includes logic and best practices for managing focus order and trapping focus within dialogs to ensure keyboard accessibility.

Can it help with icon-only buttons?

Yes, it specifically identifies buttons without text and adds appropriate aria-labels and aria-hidden attributes to the icons themselves.

Which web frameworks does this skill support?

This skill is compatible with standard HTML5, React (JSX/TSX), and Vue templates, providing framework-specific patterns for each.

How does it assist with WCAG compliance?

It automates the most common requirements of WCAG, including text alternatives, keyboard accessibility, and programmatically determinable roles and states.

Accessibility Annotation Generator

Name: Accessibility Annotation Generator
Author: Dexploarer

byDexploarer

•

Security & Testing

Enhances web applications with ARIA labels, semantic HTML, and keyboard navigation support to ensure WCAG compliance.

The Accessibility Annotation Generator is a specialized tool for developers looking to automate and standardize web accessibility. It identifies missing accessibility features in HTML, JSX, and Vue templates and provides intelligent implementations for ARIA roles, alt text, and semantic landmarks. Beyond simple fixes, the skill guides the implementation of complex patterns such as focus management for modals, live regions for dynamic content, and keyboard-accessible interactive elements, ensuring that digital products are inclusive and meet screen reader requirements.

Key Features

01Implementation of accessible navigation landmarks and semantic structures

02Automated scanning for missing alt text, ARIA labels, and interactive roles

03Comprehensive focus management and keyboard navigation patterns

042 GitHub stars

05ARIA live region configuration for dynamic status and error messaging

06Smart generation of ARIA attributes for buttons, links, and form controls

Use Cases

01Retrofitting legacy UI components to meet WCAG 2.1 accessibility standards

02Building accessible complex widgets like modals, accordions, and dropdown menus

03Ensuring icon-only navigation and buttons are fully perceivable by screen readers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dexploarer/claudius-skills a11y-annotation-generator

For use in Claude.ai and ChatGPT

Download Skill