Accessible Astro Components

!accessible-astro-components


A comprehensive library of accessible, easy-to-use UI Components for Astro. Each component is built with accessibility in mind, following WCAG guidelines and ARIA best practices, providing a solid foundation for building inclusive web applications. The components are designed to be customizable, performant, and developer-friendly, with full TypeScript support.

  
  
  
  
  

Our mission

> Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.

Component features

- Accessible by default: Built following WCAG guidelines and ARIA best practices
- Modern CSS: Using logical properties and modern selectors
- Performance: Optimized for Core Web Vitals
- Responsive: Mobile-first and touch-friendly design
- i18n ready: Built with internationalization in mind
- Dark mode: Supports light and dark themes with light-dark()
- Keyboard navigation: Full keyboard support with focus management
- Screen readers: Proper ARIA labels and semantic HTML
- Customizable: Easy to style and adapt to your needs
- Zero dependencies: Pure Astro components
- TypeScript: Full type support and documentation
- Modern: Uses latest web standards and best practices

Available components

The Accessible Astro Components library provides a collection of pre-built, accessible components that you can easily integrate into your Astro projects:

- Accordion: Expandable/collapsible sections for progressive disclosure
- Avatar: Versatile user avatar with support for images, initials, and placeholder icons
- AvatarGroup: Display multiple avatars in condensed or grid layouts
- Badge: Versatile label component with button variant, animations, and pulse effects
- Breadcrumbs: Navigation aid showing the current page's location
- Button: Versatile button with variants and delightful animations
- Card: Content container with flexible layout options
- DarkMode: Theme toggle with system preference support and global API
- HighContrast: High contrast mode toggle for enhanced visual clarity
- ReducedMotion: Reduced motion toggle respecting system preferences
- Forms: Complete form components with validation, error handling, and accessibility features
- Form: Form wrapper with validation and error handling
- Input: Text, email, password, and other input types with validation
- Textarea: Multi-line text input with validation
- Checkbox: Accessible checkbox with proper labeling
- Radio: Radio button component with proper grouping
- Fieldset: Form field grouping with legend support
- Heading: Versatile heading component with proper accessibility and hierarchy
- Link: Link component for internal and external navigation with accessibility features
- Media: Responsive image component
- Modal: Accessible dialog windows
- Notification: Info and alert messages
- Pagination: Navigation for paginated content
- SkipLinks: Keyboard navigation aid for screen readers
- Tabs: Content organization with tabbed interfaces
- Video: YouTube embed component

Getting started

``bash


npm

npm install accessible-astro-components

pnpm

pnpm add accessible-astro-components

yarn

yarn add accessible-astro-components
`

Quick Start

`astro
---
import { Accordion, AccordionItem } from 'accessible-astro-components'
---


Content for the first item...

``

Accessible Astro ecosystem

The Accessible Astro ecosystem is a collection of projects that are designed to help you build accessible web applications. It includes:

- Accessible Astro Starter: Fully accessible starter for kickstarting Astro projects, with Tailwind.
- Accessible Astro Components: Library of reusable, accessible components built for Astro.
- Accessible Astro Dashboard: User-friendly dashboard interface with a login screen and widgets.
- Accessible Astro Launcher: Command palette/launcher component for Astro projects.
- Accessible Astro Docs: Comprehensive documentation for all Accessible Astro projects.
- Color Contrast Checker: WCAG-compliant color contrast checker with design system token generation.

Check out our roadmap to see what's coming next!

Contributing

We welcome contributions to improve the documentation! You can help by:

1. Filing an issue
2. Submitting a pull request
3. Starting a discussion
4. Supporting on Open Collective

Support this project

Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.


Together we make a difference

We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:

- The Astro team for creating an amazing static site generator and the wonderful Starlight theme
- Our contributors who dedicate their time and expertise to improve these tools
- Niek Derksen for conducting comprehensive accessibility audits to ensure WCAG compliance
- Our sponsors who help make this project sustainable
- The web community for embracing and promoting web accessibility
- You, the developer for choosing to make your projects more accessible

Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨

Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!