Frontend Accessibility Best Practices

What it does

This skill equips AI agents with the knowledge to implement frontend accessibility standards, ensuring web applications are usable by people with diverse abilities. It guides the creation of interfaces that comply with WCAG guidelines through semantic HTML and assistive technology support.

When to use it

• Building new web applications where inclusive design is a primary requirement from the start.
• Auditing existing codebases to identify and remediate accessibility barriers for screen reader users.
• Generating component libraries or templates that adhere to best practices for color contrast and focus management.
• Creating documentation or training materials for development teams on maintaining accessible standards.

Key capabilities

• Semantic HTML structure generation
• WCAG compliance guidance
• Screen reader compatibility optimization
• Keyboard navigation implementation
• Color contrast verification strategies
• ARIA attribute usage recommendations

Example prompts

"Generate a React component for a data table that fully supports screen readers and keyboard navigation." "Audit this HTML snippet for accessibility issues and suggest specific fixes to meet WCAG AA standards." "Create a style guide ensuring sufficient color contrast ratios for text elements on light and dark backgrounds."

Tips & gotchas

Always test generated code with actual assistive technologies like screen readers, as theoretical compliance does not guarantee real-world usability. Prioritize semantic HTML over complex ARIA attributes to maintain simplicity and robustness across different browsers.