https://github.com/incluud/accessible-astro-components
A collection of accessible components for Astro projects with built-in ARIA attributes, keyboard navigation and interactive elements. Easy to implement and customize to your needs.
https://github.com/incluud/accessible-astro-components
a11y accessibility astro components html javascript library scss wcag
Last synced: about 1 month ago
JSON representation
A collection of accessible components for Astro projects with built-in ARIA attributes, keyboard navigation and interactive elements. Easy to implement and customize to your needs.
- Host: GitHub
- URL: https://github.com/incluud/accessible-astro-components
- Owner: incluud
- License: mit
- Created: 2021-08-15T07:19:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T11:39:57.000Z (about 1 month ago)
- Last Synced: 2025-04-09T16:15:38.395Z (about 1 month ago)
- Topics: a11y, accessibility, astro, components, html, javascript, library, scss, wcag
- Language: Astro
- Homepage: https://accessible-astro-starter.incluud.dev/accessible-components/
- Size: 423 KB
- Stars: 406
- Watchers: 8
- Forks: 33
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Accessible Astro Components
[](https://astro.build)
A comprehensive library of accessible, easy-to-use UI Components for [Astro](https://astro.build). 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.
[](https://accessible-astro.netlify.app/accessible-components/)
[](https://accessible-astro.incluud.dev/)
[](https://www.npmjs.com/package/accessible-astro-components)
[](https://www.npmjs.com/package/accessible-astro-components)
[](https://opencollective.com/incluud)
## 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
- **Card**: Content container with flexible layout options
- **DarkMode**: Theme toggle with system preference support
- **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 projects
- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.
- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
Check out our [roadmap](https://github.com/orgs/incluud/projects/4) to see what's coming next!
## Contributing
We welcome contributions to improve the documentation! You can help by:
1. [Filing an issue](https://github.com/incluud/accessible-astro-components/issues)
2. [Submitting a pull request](https://github.com/incluud/accessible-astro-components/pulls)
3. [Starting a discussion](https://github.com/incluud/accessible-astro-components/discussions)
4. [Supporting on Open Collective](https://opencollective.com/incluud)
## 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.
[](https://opencollective.com/incluud)
## 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
- **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!