Name: Frontend Accessibility
Author: GreyssonEnterprises

When to use this skill

When creating UI components in files like components/, Button.tsx, Form.jsx, or any React/Vue/Angular component
When building forms with input fields, labels, error messages, and validation feedback
When implementing keyboard navigation for interactive elements (tabs, modals, dropdowns, menus)
When adding semantic HTML elements like <nav>, <main>, <button>, <header>, <footer>, <article>
When ensuring proper color contrast ratios (4.5:1 minimum) and not relying solely on color to convey information
When adding alternative text for images using alt attributes or ARIA labels for icon buttons
When implementing focus indicators and managing focus for modals, dialogs, or single-page app navigation
When using ARIA attributes (role, aria-label, aria-describedby, aria-live) for complex components
When creating proper heading hierarchies (h1-h6) that screen readers can navigate through

When creating UI components in files like components/, Button.tsx, Form.jsx, or any React/Vue/Angular component
When building forms with input fields, labels, error messages, and validation feedback
When implementing keyboard navigation for interactive elements (tabs, modals, dropdowns, menus)
When adding semantic HTML elements like <nav>, <main>, <button>, <header>, <footer>, <article>
When ensuring proper color contrast ratios (4.5:1 minimum) and not relying solely on color to convey information
When adding alternative text for images using alt attributes or ARIA labels for icon buttons
When implementing focus indicators and managing focus for modals, dialogs, or single-page app navigation
When using ARIA attributes (role, aria-label, aria-describedby, aria-live) for complex components
When creating proper heading hierarchies (h1-h6) that screen readers can navigate through

Frontend Accessibility