fixing-accessibility

Audit HTML accessibility violations and provide minimal code-level fixes.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill fixing-accessibility-ditekmax
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fixing-accessibility
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.claude/skills/fixing-accessibility
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill fixing-accessibility-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many web components and pages lack proper accessible names, keyboard support, focus management, and semantic markup, causing usability failures for people who rely on assistive technologies and keyboard navigation. This Skill helps auditors and developers quickly identify exact violations, explain why they matter, and propose minimal, targeted fixes that preserve existing behavior.

Core Features & Use Cases

  • Line-level violation reporting: Quotes the exact HTML snippet or line that violates accessibility rules.
  • Concise rationale: One-sentence explanation of why the issue matters for users or assistive technologies.
  • Concrete, minimal fixes: Small, code-level suggestions (ARIA attributes, labels, semantic element replacements, focus handling) that prefer native semantics before adding ARIA.
  • Use cases: Reviewing icon-only buttons, form labels and error associations, modal dialog focus trapping and restoration, keyboard navigation coverage, and color contrast problems.

Quick Start

Run the fixing-accessibility skill to audit a UI file and return quoted violations, brief reasons, and precise code-level 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 HTML accessibility violations in web UI components?

To fix HTML accessibility violations, you can audit your UI code to identify exact line-level issues, understand their impact, and apply minimal fixes using native semantics, ARIA attributes, and focus management.

What is the best way to add keyboard navigation and ARIA support to icon-only buttons?

Adding keyboard navigation and ARIA support to icon-only buttons requires auditing the HTML to find missing accessible names, then applying minimal code-level fixes like appropriate ARIA labels and native semantic elements.

How does WCAG focus management work for modal dialogs?

WCAG focus management for modal dialogs involves auditing the component for focus trapping and restoration issues, then applying targeted code fixes to ensure keyboard users can navigate and close the dialog properly.

Can I audit form labels and error associations for accessibility compliance?

Yes, you can audit form labels and error associations by scanning the HTML for missing semantic connections, returning one-sentence impact explanations, and providing minimal code-level fixes to ensure proper compliance.

Why does my frontend UI fail keyboard interactions during component reviews?

Frontend UI fails keyboard interactions when it lacks proper semantic markup and focus management, which you can resolve by auditing the component to identify exact violations and applying minimal targeted fixes.

When do I need ARIA attributes instead of native HTML semantics for accessibility?

You need ARIA attributes instead of native HTML semantics only when native elements cannot provide the required accessibility, with fixes prioritizing native semantic replacements before adding any ARIA attributes.