fixing-accessibility_skill

Overview

This skill helps identify and fix accessibility issues in UI code with minimal, targeted changes. It prioritizes high-impact corrections—like accessible names, keyboard support, and dialog focus—so interfaces work reliably for assistive technologies. Use it to review specific files or apply constraints to ongoing UI work in a conversation.

How this skill works

Run the skill against a file or scope of work. It inspects interactive elements, focus management, semantics, form wiring, announcements, contrast, and media practices. For each violation it quotes the exact snippet, explains why it matters in one sentence, and provides a concrete, small code-level fix that avoids broad refactors.

When to use it

• When adding or changing buttons, links, inputs, menus, dialogs, tabs, or dropdowns
• When building forms, validation, error states, helper text, or associating labels
• When implementing keyboard shortcuts, custom interactions, or focus management
• When working on focus states, focus trapping, modal behavior, or restoring focus
• When rendering icon-only controls or hover-only interactions
• When adding dynamic announcements, toasts, or loading indicators

Best practices

• Fix critical issues first: accessible names, keyboard access, and focus/dialog behavior
• Prefer native HTML elements (button, a, input) before adding ARIA attributes
• Give every interactive control a clear accessible name or aria-label
• Ensure all interactive controls are keyboard reachable and show visible focus
• Trap focus in modals and restore focus to the trigger when closed
• Provide error text linked with aria-describedby and use aria-live for critical announcements

Example use cases

• Scan a single component file and receive exact-line fixes for missing labels or aria attributes
• Review a dialog implementation and get focused suggestions for focus trapping and initial focus
• Fix icon-only buttons by adding aria-labels or visually-hidden text snippets
• Turn hover-only controls into keyboard-accessible equivalents with minimal code changes
• Audit form fields for missing labels, aria-invalid, and required announcements
• Ensure toasts and status updates use aria-live instead of silent visual-only cues