Loading repository data…
incluud / repository
An accessible and powerful launcher (command palette) for Astro websites, built with WCAG compliance and inclusive design principles.
A powerful, accessible command palette/launcher component for Astro projects. Built with keyboard-driven navigation, instant search, and full WCAG 2.2 AA compliance. Features semantic HTML with proper ARIA patterns (role="switch" for toggles, native anchors for links), dark mode support, preference toggles integration, and extensive customization through CSS custom properties.
Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.
role="switch" for toggles, native <a> for links)Cmd/Ctrl + K, navigate with arrow keys, select with Enter, close with Escapearia-activedescendant - type to filter at any point while navigating<a> elements with custom icons and external link supportrole="switch", aria-checked, and LED-style indicatorsaccessible-astro-components toggles (DarkMode, HighContrast, ReducedMotion)light-dark() CSS function--launcher-* CSS custom properties{query} placeholders)# npm
npm install accessible-astro-launcher
# pnpm
pnpm add accessible-astro-launcher
# yarn
yarn add accessible-astro-launcher
---
import {
Launcher,
LauncherTrigger,
LauncherPreferences,
LauncherSwitch,
LauncherNav,
LauncherLink,
} from 'accessible-astro-launcher'
---
<LauncherTrigger launcherId="site-launcher" />
<Launcher id="site-launcher">
<LauncherPreferences label="Preferences">
<LauncherSwitch label="Dark mode" onAction="toggle-dark-mode" />
<LauncherSwitch label="High contrast" onAction="toggle-high-contrast" />
</LauncherPreferences>
<LauncherNav label="Navigation">
<LauncherLink label="Home" href="/" />
<LauncherLink label="About" href="/about" />
<LauncherLink label="Contact" href="/contact" />
</LauncherNav>
</Launcher>
| Component | Description |
|---|---|
Launcher | Main dialog with search input and results |
LauncherTrigger | Button that opens the launcher (place anywhere) |
LauncherPreferences | <fieldset> wrapper with <legend> for preference switches |
LauncherSwitch | Toggle button with role="switch" and LED indicator |
LauncherNav | <nav> wrapper with heading for navigation links |
LauncherLink | Semantic <a> element with icon slot |
The Accessible Astro ecosystem is a collection of projects that are designed to help you build accessible web applications. It includes:
Check out our roadmap to see what's coming next!
We welcome contributions to improve the launcher! You can help by:
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.
We want to express our heartfelt gratitude to everyone who contributes to making the web 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!
Selected from shared topics, language and repository description—not editorial ratings.
incluud /
An Accessible, WCAG compliant Starter Theme for Astro 6+ including several accessibility features such as, better focus-outline, landmarks, semantics, interactive components and skip-link navigation. Ships with Tailwind 4, Prettier and ESLint support.
incluud /
An Accessible Admin Dashboard Theme for Astro with a login page and a dashboard overview. Includes accessibility features such as landmarks, better focus-outline and skip-links navigation.