skills.rest
japurcell
japurcellCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/japurcell/skills --skill fixing-accessibility-japurcell
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
bizoton19bizoton19

508-audit

Audit federal websites for WCAG 2.1 AA accessibility compliance.

Community
Advanced
ravnhqravnhq
16

design-accessibility

Audit frontend projects for WCAG and ARIA compliance.

Official
Basic
mahamaneharouna9-cpumahamaneharouna9-cpu

accessibility-expert

Audit web accessibility for WCAG 2.1/2.2 compliance and ARIA errors.

Community
Advanced