Frontend Accessibility

The frontend-accessibility skill empowers AI agents to generate, audit, and remediate web code for WCAG compliance. It ensures interfaces are navigable via keyboard, screen readers, and assistive technologies while maintaining semantic HTML structure.

When to use it

• Initial Scaffolding: Generate accessible boilerplate HTML/CSS/JS for new landing pages or dashboards.
• Compliance Audits: Analyze existing codebases to identify missing ARIA labels, insufficient color contrast, or improper heading hierarchies.
• Remediation: Automatically rewrite non-compliant snippets to meet specific WCAG 2.1 Level AA standards.
• Testing Support: Create test cases for screen reader compatibility and keyboard-only navigation flows.

Key capabilities

• Generates semantic HTML5 structures with correct ARIA roles and states.
• Audits color contrast ratios against WCAG guidelines.
• Identifies missing alt text for images and non-text content.
• Ensures logical tab order and focus management in interactive components.
• Produces CSS that supports reduced-motion preferences.

Example prompts

• "Audit this React component for accessibility issues and provide a list of violations with line numbers."
• "Generate a fully accessible navigation bar using semantic HTML and ARIA landmarks for a dark-mode site."
• "Rewrite this form to ensure all inputs have associated labels, error messages are announced by screen readers, and focus is managed correctly on submission."

Tips & gotchas

• This skill focuses on output generation and code analysis; it does not replace manual testing with real assistive technology.
• Always verify that generated ARIA attributes align with the actual behavior of the interactive elements to avoid confusion for users relying on screen readers.