Ensure UI components are accessible to all users including those using assistive technologies through semantic HTML, keyboard navigation, ARIA attributes, color contrast, and screen reader compatibility. Use this skill when building UI components, forms, interactive elements, modals, or any frontend code in React, Vue, or plain HTML that needs WCAG compliance. Applies when adding navigation elements, buttons, inputs, focus management, alternative text, or testing with screen readers to ensure inclusive user experiences.
components/, Button.tsx, Form.jsx, or any React/Vue/Angular component<nav>, <main>, <button>, <header>, <footer>, <article>alt attributes or ARIA labels for icon buttonsrole, aria-label, aria-describedby, aria-live) for complex componentsThis Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.
For details, refer to the information provided in this file: frontend accessibility