{"id":25315725,"url":"https://github.com/incluud/accessible-astro-components","last_synced_at":"2025-04-11T11:38:35.212Z","repository":{"id":39901584,"uuid":"396258029","full_name":"incluud/accessible-astro-components","owner":"incluud","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-04T11:39:57.000Z","size":433,"stargazers_count":406,"open_issues_count":7,"forks_count":33,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-09T16:15:38.395Z","etag":null,"topics":["a11y","accessibility","astro","components","html","javascript","library","scss","wcag"],"latest_commit_sha":null,"homepage":"https://accessible-astro-starter.incluud.dev/accessible-components/","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/incluud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://www.buymeacoffee.com/markteekman"}},"created_at":"2021-08-15T07:19:26.000Z","updated_at":"2025-04-08T07:44:20.000Z","dependencies_parsed_at":"2024-01-12T16:49:08.075Z","dependency_job_id":"11edc9bf-9a70-4266-9085-61a31b0a38e9","html_url":"https://github.com/incluud/accessible-astro-components","commit_stats":{"total_commits":121,"total_committers":6,"mean_commits":"20.166666666666668","dds":0.4545454545454546,"last_synced_commit":"352473de930737c879cb58bc62bd005cfb6d1533"},"previous_names":["incluud/accessible-astro-components","markteekman/accessible-astro-components"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incluud%2Faccessible-astro-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incluud%2Faccessible-astro-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incluud%2Faccessible-astro-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/incluud%2Faccessible-astro-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/incluud","download_url":"https://codeload.github.com/incluud/accessible-astro-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248385007,"owners_count":21094813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","astro","components","html","javascript","library","scss","wcag"],"created_at":"2025-02-13T18:24:53.711Z","updated_at":"2025-04-11T11:38:35.186Z","avatar_url":"https://github.com/incluud.png","language":"Astro","funding_links":["https://www.buymeacoffee.com/markteekman","https://opencollective.com/incluud"],"categories":["Astro"],"sub_categories":[],"readme":"# Accessible Astro Components\n\n[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)\n\n![accessible-astro-components](https://github.com/user-attachments/assets/ba773cb6-ee7e-421d-8228-6f9fd3e13575)\n\nA 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.\n\n[![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge\u0026logo=astro\u0026logoColor=black)](https://accessible-astro.netlify.app/accessible-components/) \u0026nbsp;\n[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge\u0026logo=astro\u0026logoColor=black)](https://accessible-astro.incluud.dev/) \u0026nbsp;\n[![NPM Downloads](https://img.shields.io/npm/dt/accessible-astro-components?style=for-the-badge\u0026color=4ECCA3\u0026logo=npm\u0026logoColor=black)](https://www.npmjs.com/package/accessible-astro-components) \u0026nbsp;\n[![NPM Version](https://img.shields.io/npm/v/accessible-astro-components?style=for-the-badge\u0026logo=npm\u0026logoColor=black\u0026color=A682FF)](https://www.npmjs.com/package/accessible-astro-components) \u0026nbsp;\n[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge\u0026logo=opencollective\u0026logoColor=white)](https://opencollective.com/incluud) \u0026nbsp;\n\n## Our mission\n\n\u003e Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.\n\n## Component features\n\n- **Accessible by default**: Built following WCAG guidelines and ARIA best practices\n- **Modern CSS**: Using logical properties and modern selectors\n- **Performance**: Optimized for Core Web Vitals\n- **Responsive**: Mobile-first and touch-friendly design\n- **i18n ready**: Built with internationalization in mind\n- **Dark mode**: Supports light and dark themes with `light-dark()`\n- **Keyboard navigation**: Full keyboard support with focus management\n- **Screen readers**: Proper ARIA labels and semantic HTML\n- **Customizable**: Easy to style and adapt to your needs\n- **Zero dependencies**: Pure Astro components\n- **TypeScript**: Full type support and documentation\n- **Modern**: Uses latest web standards and best practices\n\n## Available components\n\nThe Accessible Astro Components library provides a collection of pre-built, accessible components that you can easily integrate into your Astro projects:\n\n- **Accordion**: Expandable/collapsible sections for progressive disclosure\n- **Avatar**: Versatile user avatar with support for images, initials, and placeholder icons\n- **AvatarGroup**: Display multiple avatars in condensed or grid layouts\n- **Badge**: Versatile label component with button variant, animations, and pulse effects\n- **Breadcrumbs**: Navigation aid showing the current page's location\n- **Card**: Content container with flexible layout options\n- **DarkMode**: Theme toggle with system preference support\n- **Media**: Responsive image component\n- **Modal**: Accessible dialog windows\n- **Notification**: Info and alert messages\n- **Pagination**: Navigation for paginated content\n- **SkipLinks**: Keyboard navigation aid for screen readers\n- **Tabs**: Content organization with tabbed interfaces\n- **Video**: YouTube embed component\n\n## Getting started\n\n```bash\n# npm\nnpm install accessible-astro-components\n\n# pnpm\npnpm add accessible-astro-components\n\n# yarn\nyarn add accessible-astro-components\n```\n\n## Quick Start\n\n```astro\n---\nimport { Accordion, AccordionItem } from 'accessible-astro-components'\n---\n\n\u003cAccordion\u003e\n  \u003cAccordionItem title=\"Getting Started\"\u003eContent for the first item...\u003c/AccordionItem\u003e\n\u003c/Accordion\u003e\n```\n\n## Accessible Astro projects\n\n- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.\n- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.\n- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.\n- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.\n\nCheck out our [roadmap](https://github.com/orgs/incluud/projects/4) to see what's coming next!\n\n## Contributing\n\nWe welcome contributions to improve the documentation! You can help by:\n\n1. [Filing an issue](https://github.com/incluud/accessible-astro-components/issues)\n2. [Submitting a pull request](https://github.com/incluud/accessible-astro-components/pulls)\n3. [Starting a discussion](https://github.com/incluud/accessible-astro-components/discussions)\n4. [Supporting on Open Collective](https://opencollective.com/incluud)\n\n## Support this project\n\nYour 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.\n\n[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge\u0026logo=opencollective\u0026logoColor=white)](https://opencollective.com/incluud)\n\n## Together we make a difference\n\nWe want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:\n\n- **The Astro team** for creating an amazing static site generator and the wonderful Starlight theme\n- **Our contributors** who dedicate their time and expertise to improve these tools\n- **Our sponsors** who help make this project sustainable\n- **The web community** for embracing and promoting web accessibility\n- **You, the developer** for choosing to make your projects more accessible\n\n\u003ca href=\"https://github.com/incluud/accessible-astro-components/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=incluud/accessible-astro-components\" /\u003e\n\u003c/a\u003e\u003cbr /\u003e\u003cbr /\u003e\n\nTogether, 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. ✨\n\nRemember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincluud%2Faccessible-astro-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fincluud%2Faccessible-astro-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fincluud%2Faccessible-astro-components/lists"}