fixing-accessibility

Audit and fix HTML accessibility issues against WCAG rules.

Updated Apr 22, 2024
One-click install
npx skills add https://github.com/oligamiq/fast-explorer --skill fixing-accessibility-oligamiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fixing-accessibility
Source: https://github.com/oligamiq/fast-explorer/tree/main/.agents/skills/fixing-accessibility
Command: npx skills add https://github.com/oligamiq/fast-explorer --skill fixing-accessibility-oligamiq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interactive UI code often ships with accessibility defects such as missing ARIA labels, broken keyboard navigation, poor focus management, and unlinked form errors that exclude users relying on assistive technologies. ## Core Features & Use Cases - Rule-Based Auditing: Reviews HTML files against nine prioritized rule categories covering accessible names, keyboard access, focus and dialogs, semantics, forms, announcements, contrast, and media. - Targeted Fixes: Reports violations with the exact offending snippet, a one-sentence impact explanation, and a minimal code-level fix instead of large rewrites. - Use Case: When adding a modal dialog or icon-only button to a page, run the review to catch missing aria-label attributes, absent focus trapping, or divs used as buttons before shipping. ## Quick Start Ask the assistant to review a specific HTML file for accessibility violations and propose minimal fixes using the fixing-accessibility rules.

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 using aria-describedby, set aria-invalid on invalid inputs, mark required fields so they are announced, and associate helper text with inputs. Critical errors should use aria-live regions so screen readers announce them.

How to make icon-only buttons accessible?▼

Add an aria-label or aria-labelledby attribute to the button so assistive technologies announce its purpose, and mark the inner SVG icon with aria-hidden="true" so it is treated as decorative.

What WCAG issues does an accessibility audit check first?▼

Critical categories come first: accessible names for all interactive controls, full keyboard access with visible focus, and focus trapping with restoration in dialogs. Semantics, forms, and announcements follow at high and medium priority.

Should I use ARIA roles or native HTML elements?▼

Prefer native elements like button, a, and input over role-based hacks, since they provide keyboard behavior and semantics for free. Only add ARIA when native semantics cannot solve the problem, and include all required attributes for any role used.

When should I not apply accessibility refactoring?▼

Avoid large rewrites or UI library migrations unless requested. The guidance favors minimal, targeted fixes and explicitly avoids adding ARIA where native semantics already work or refactoring unrelated code.