fixing-accessibility

Identify and fix accessibility issues in UI components to meet WCAG guidelines.

Updated Mar 19, 2026

Search Tags:#accessibility #a11y #wcag #focus #keyboard #aria

Ready to run

npx skills add https://github.com/japurcell/skills --skill fixing-accessibility-japurcell

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fixing-accessibility
Source: https://github.com/japurcell/skills/tree/main/skills/fixing-accessibility
Command: npx skills add https://github.com/japurcell/skills --skill fixing-accessibility-japurcell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

Core Features & Use Cases

Provide a comprehensive accessibility review checklist covering names, keyboard access, focus trapping, semantic markup, form errors, and ARIA roles.
Suggest practical fixes and snippets to correct common accessibility issues in UI components.
Use Case: When building or auditing interactive UI (buttons, inputs, dialogs), run checks and apply targeted fixes to meet WCAG standards.

Quick Start

Review the current UI component for accessible names, keyboard navigation, focus handling, and color contrast, and propose minimal, implementable fixes.

Frequently Asked Questions about fixing-accessibility

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

FAQPage Schema

How do I fix keyboard navigation and focus trapping in UI components?▼

Fix keyboard navigation by ensuring interactive elements like dialogs and menus have proper focus management, visible focus indicators, and logical tab order. Use semantic HTML where possible and apply ARIA roles to handle focus trapping for complex widgets.

How do I add accessible names and ARIA labels to interactive elements?▼

Add accessible names to interactive elements by using proper ARIA labeling on buttons, inputs, and widgets. Ensure form errors are linked using aria-describedby and apply semantic HTML to provide clear context for screen readers.

What is the best way to audit HTML accessibility for WCAG compliance?▼

Auditing HTML accessibility for WCAG compliance involves reviewing UI components against a checklist covering accessible names, keyboard access, focus handling, color contrast, form errors, and ARIA roles to identify and propose minimal, implementable fixes.

How do I handle form error messaging for screen reader accessibility?▼

Handle form error messaging for screen reader accessibility by using aria-describedby to link error messages to inputs. Ensure interactive forms have proper ARIA labels and semantic markup so errors are announced clearly when validation fails.

Can I use this approach to fix color contrast and ARIA roles in existing UI widgets?▼

Yes, you can fix color contrast and ARIA roles in existing UI widgets by running accessibility checks on interactive elements. The process suggests targeted fixes to meet WCAG standards for color contrast and corrects ARIA roles for menus and dialogs.