accessibility

Audit web pages and UI components against WCAG 2.2 accessibility criteria.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams find and fix accessibility barriers so websites and interfaces work for people using keyboards, screen readers, low-vision settings, and other assistive technologies.

Core Features & Use Cases

  • WCAG 2.2 Auditing: Check pages and components against accessibility criteria such as contrast, labels, focus order, media alternatives, and keyboard support.
  • Implementation Guidance: Get practical HTML, ARIA, and CSS fixes for forms, dialogs, navigation, live updates, and motion handling.
  • Use Case: Review a checkout flow for missing labels, poor focus states, and keyboard traps, then apply targeted fixes before release.

Quick Start

Ask the accessibility skill to audit the attached page or component and return WCAG 2.2 issues with specific fixes.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit my website for WCAG 2.2 compliance?

You audit pages and components against WCAG 2.2 criteria including contrast, labels, focus order, media alternatives, and keyboard support. This process identifies barriers and provides specific HTML, ARIA, and CSS fixes to resolve them.

What is the best way to fix keyboard navigation and screen reader support in a web component?

Fixing keyboard navigation and screen reader support requires semantic HTML, correct ARIA usage, and visible focus states. You implement skip links, manage live regions, and ensure logical focus order to eliminate keyboard traps and improve assistive technology interaction.

How do I check color contrast and form labels for accessibility compliance?

Checking color contrast and form labels involves validating UI elements against WCAG 2.2 standards. This ensures text meets minimum contrast ratios and all form inputs have properly associated labels for users relying on screen readers and low-vision settings.

Does this accessibility review cover dynamic interface patterns and reduced-motion support?

Yes, this accessibility review covers dynamic interface patterns and reduced-motion support. It evaluates dialogs, live updates, and motion handling to ensure interfaces work for users with vestibular disorders and those navigating via assistive technologies.

Why does my ARIA live region not announce dynamic content updates to screen readers?

ARIA live regions fail to announce updates when implemented with incorrect ARIA roles or non-semantic HTML. Auditing dynamic interface patterns ensures correct ARIA usage so screen readers properly detect and vocalize live content changes.

Can I get step-by-step HTML and ARIA fixes for an inaccessible checkout flow?

Yes, you can get step-by-step HTML and ARIA fixes for an inaccessible checkout flow. The review identifies missing labels, poor focus states, and keyboard traps, then returns targeted implementation guidance to resolve issues before release.