skills.rest
Arnutt-N
Arnutt-NCOMMUNITY
Explore all skills by this author →
GitHub

accessibility-helper

Provide WCAG-compliant accessibility utilities, components, and hooks for HR-IMS frontends.

Updated Jan 8, 2026
Search Tags:#accessibility#a11y#wcag#keyboard#screen-reader#aria#focus-management
One-click install
npx skills add https://github.com/Arnutt-N/hr-ims --skill accessibility-helper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-helper
Source: https://github.com/Arnutt-N/hr-ims/tree/main/.claude/skills/accessibility-helper
Command: npx skills add https://github.com/Arnutt-N/hr-ims --skill accessibility-helper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Accessibility Helper provides a11y utilities and WCAG-compliance tooling to help HR-IMS developers build inclusive interfaces with screen reader support, proper focus management, and ARIA support.

Core Features & Use Cases

  • WCAG 2.1 AA compliance utilities, including color-contrast checks, focus management, and accessible component patterns (modals, menus, skip links)
  • Screen reader support, announcements via live regions, and keyboard-navigation helpers to improve usability for keyboard users
  • Reusable hooks and components for reduced motion, high contrast preferences, focus traps, and accessible patterns across the UI
  • Tools and guidance to audit accessibility and generate reports for teams

Quick Start

Integrate these utilities into your HR-IMS frontend to improve WCAG compliance, keyboard navigation, and screen reader support.

Frequently Asked Questions about accessibility-helper

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

FAQPage Schema
How do I implement WCAG-compliant keyboard navigation and focus management in a React frontend?▼

To implement WCAG-compliant keyboard navigation and focus management, you can use accessibility utilities that provide focus traps, skip links, and helper hooks to enforce proper tab order and screen reader support across your UI components.

What utilities are available for checking color contrast and ARIA patterns for WCAG 2.1 AA compliance?▼

Color contrast checks and ARIA patterns for WCAG 2.1 AA compliance are provided through modular utilities, reusable hooks, and accessible component patterns for modals, menus, and announcements via live regions.

How do I add screen reader announcements and support for reduced motion preferences in my application?▼

Screen reader announcements and reduced motion support are handled through reusable hooks and components that manage live regions and respect user preferences, ensuring inclusive and accessible UI interactions.

Can I audit accessibility issues and generate compliance reports for my development team?▼

You can audit accessibility issues and generate structured reports for your team using built-in testing tools that evaluate WCAG compliance, keyboard navigation, and screen reader support across the frontend interface.

What is the best way to enforce accessible modal and menu patterns without breaking existing UI functionality?▼

The best way to enforce accessible modal and menu patterns is using provided component utilities that manage focus trapping, ARIA roles, and keyboard interactions, ensuring WCAG compliance without disrupting existing UI functionality.

Related Skills

Explore More Software Engineering Skills→
lorenamelladolorenamellado

react-component

Automates creation of React TypeScript components with project conventions.

Community
Advanced
mgiffordmgifford

ai_best_practices

Automate WCAP accessibility testing in Drupal development workflows with Playwright and axe-core.

Community
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced