Frontend Accessibility Spaceplushy Portfolio

---
name: Frontend Accessibility
description: Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and WCAG compliance. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any user-facing interface code. When working on Astro component files (.astro), React/Vue/Svelte component files, HTML template files, form components with inputs and labels, navigation menus and interactive widgets, modal dialogs and accordions, image components with alt text, button and link implementations, focus management code, or screen reader announcement logic.
---

# Frontend Accessibility

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.

## When to use this skill

- When creating or editing Astro components (.astro files)
- When building React, Vue, Svelte, or other framework components
- When implementing forms with input fields, labels, validation, and error messages
- When creating navigation menus, breadcrumbs, or site navigation structures
- When building interactive components (modals, dropdowns, accordions, tabs, tooltips)
- When adding images and ensuring proper alt text and figure captions
- When implementing keyboard navigation or focus management
- When creating buttons, links, or custom interactive elements
- When using ARIA attributes (roles, labels, live regions, expanded states)
- When ensuring color contrast ratios meet WCAG standards
- When implementing skip links or other accessibility navigation aids

## Instructions

For details, refer to the information provided in this file:
[frontend accessibility](../../../agent-os/standards/frontend/accessibility.md)