fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, and focus management.

1|Updated Aug 31, 2026

Search Tags:#code review #html #accessibility #keyboard navigation #wcag #focus management #aria

Ready to run

npx skills add https://github.com/gagandeepgill/puzzle-game --skill fixing-accessibility-gagandeepgill

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interactive UI code often ships with accessibility defects—unlabeled icon buttons, keyboard-inaccessible controls, broken focus handling in dialogs, and unlinked form errors—that block screen reader and keyboard users and fail WCAG compliance reviews. ## Core Features & Use Cases - Prioritized Rule Audit: Reviews files against nine ranked rule categories, from accessible names and keyboard access (critical) to contrast, motion, and tool boundaries. - Targeted Fix Suggestions: Reports each violation with the exact offending snippet, a one-sentence rationale, and a minimal code-level fix rather than large rewrites. - Use Case: While adding a modal dialog with a form, apply the skill to verify focus trapping, Escape-to-close behavior, aria-describedby error linking, and aria-invalid states before shipping. ## Quick Start Ask the assistant to review a specific HTML or component file against the fixing-accessibility rules and report violations with concrete 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 accessibility issues in HTML forms?▼

Link error messages to fields with aria-describedby, set aria-invalid on invalid inputs, mark required fields so they are announced, and associate helper text with inputs. The skill reviews these patterns and proposes minimal code-level fixes.

How do I make icon-only buttons accessible?▼

Add an aria-label or aria-labelledby to the button so it has an accessible name, and mark the inner SVG as aria-hidden="true" so screen readers skip the decorative graphic.

What accessibility issues should I check first in a code review?▼

Start with the critical categories: accessible names for all interactive controls, full keyboard access with visible focus, and correct focus trapping and restoration in dialogs. Then check semantics, form errors, and announcements.

Should I use ARIA roles or native HTML elements?▼

Prefer native elements like button, a, and input over role-based hacks. Only add ARIA when native semantics cannot solve the problem, and ensure required ARIA attributes accompany any role you use.

When should I not apply these accessibility fixes?▼

Avoid large UI rewrites, unrelated refactors, or migrating UI libraries unless requested. The skill enforces minimal, targeted changes and does not add ARIA where native semantics already work.