ui-design-a11y_skill

Overview

This skill provides focused web accessibility (A11y) audits and repair guidance based on WCAG best practices. It helps developers find semantic, ARIA, keyboard, and contrast issues and delivers actionable code-level fixes. The goal is to make interfaces more usable for people with disabilities while simplifying developer review workflows.

How this skill works

The skill inspects HTML, CSS, and common UI components to detect semantic tag misuse, missing ARIA attributes, keyboard navigation gaps, and insufficient color contrast. It reports specific failures, prioritizes issues by impact, and generates concrete remediation steps or code snippets (labels, alt text, ARIA roles, focus management, contrast adjustments). It can also propose keyboard-focus traps for modals and fixes for form-label associations.

When to use it

• Pre-merge code reviews to catch accessibility regressions early
• When validating color palettes or ensuring WCAG AA contrast compliance
• During UI component development (buttons, forms, modals, nav) to enforce semantics
• Before product launches to perform a final a11y audit and remediation pass
• When onboarding design or dev teams to establish accessible patterns

Best practices

• Prefer native semantic elements (nav, main, header, button) over role-only solutions
• Ensure every non-decorative image has a meaningful alt attribute
• Associate labels with inputs using for/id or <label> wrapping, and provide aria-describedby when needed
• Validate keyboard order and focus visibility; implement focus trap for modals and restore focus on close
• Test color contrast against WCAG AA standards and provide text alternatives for color-coded information

Example use cases

• Audit a form to link labels and inputs, fix ARIA descriptions, and output corrected JSX/HTML
• Check a new color theme for WCAG AA contrast and suggest adjusted hex values
• Add a focus trap and keyboard handling to a custom modal component with code examples
• Review a navigation component for proper semantic structure and keyboard access
• Scan pages for missing alt text and generate suggested alt strings for images