accessibility

Enforces WCAG 2.2 AA requirements for accessible web interfaces via semantic HTML, ARIA, and keyboard/focus behavior.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/junevm/avtoolz --skill accessibility-junevm
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/junevm/avtoolz/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/junevm/avtoolz --skill accessibility-junevm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you prevent and fix accessibility issues by guiding implementation of WCAG 2.2 AA requirements for semantic HTML, ARIA usage, keyboard navigation, focus behavior, contrast, and screen reader support.

Core Features & Use Cases

  • WCAG 2.2 AA compliance guidance: Requirements for contrast, focus appearance, focus not obscured, target size, reduced motion expectations, and robust announcements.
  • Accessible UI interaction patterns: Keyboard interaction conventions for widgets like tabs, menus, dialogs, and live regions.
  • Form and content correctness: Labeling, error announcement (aria-invalid and role="alert"), redundant entry avoidance, accessible authentication considerations, and data table semantics with captions and proper scope.

Quick Start

Use the accessibility skill when reviewing a UI that has missing alt text, weak contrast, broken keyboard focus, or improperly announced dialogs and form validation errors.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my web interface WCAG 2.2 AA compliant?

To make your web interface WCAG 2.2 AA compliant, apply semantic HTML, ARIA semantics, and proper keyboard and focus behavior across UI components like forms, dialogs, and data tables.

What is the correct way to implement keyboard navigation for tabs and dialogs?

Keyboard navigation for tabs and dialogs requires applying standard interaction conventions, ensuring visible focus appearance, and managing focus so it remains within the component during user interaction.

How do I announce form validation errors to screen readers?

Announce form validation errors to screen readers by using proper labeling, marking inputs with aria-invalid, and implementing role="alert" or aria-live regions for dynamic error messages.

What are the minimum color contrast and target size requirements for accessible forms?

Accessible forms require meeting minimum contrast ratios for text and elements, ensuring focus is not obscured, and satisfying target size specifications to maintain WCAG 2.2 AA accessibility compliance.

When should I use ARIA live regions for dynamic content updates?

Use ARIA live regions for dynamic content updates when you need screen readers to automatically announce changes, ensuring correct aria-live announcements for status updates or asynchronous form submissions.

How do I ensure accessible data tables with proper scope and captions?

Ensure accessible data tables by implementing proper table semantics, adding descriptive captions, and defining correct header scope attributes so screen readers can accurately navigate and interpret tabular data.