Accessible Astro Launcher Demo

This is the demo website for Accessible Astro Launcher: a powerful, accessible command palette/launcher component for Astro projects.

Explore live how the launcher behaves with keyboard, screen reader, and preference toggles.

         

---

What is Accessible Astro Launcher?

Accessible Astro Launcher is a WCAG 2.2 AA-compliant command palette with instant search, modular shortcut groups, extensive keyboard support, and integration with preferences like dark mode. This demo lets you experience:

• Keyboard-driven navigation (Cmd/Ctrl + K, arrows, Enter, Escape)
• Quick, fuzzy search and accessible status actions
• Live preference toggles (dark mode, high contrast, reduced motion)
• Fully semantic markup, roles, ARIA patterns & live region feedback

Try it live, inspect the UI, or test with your keyboard & screen reader!

---

Features Demonstrated

• Accessible by default: WAI-ARIA combobox and listbox roles, live regions, labeling
• Keyboard navigation: Open/close, type-to-search, jump to groups/items, select/cancel
• Instant search: Fuzzy matches labels & keywords
• Preference toggles: Switch themes, enable reduced motion, etc.
• Custom navigation actions: Trigger site navigation or functions
• Dark mode: Automatic light/dark theming
• Easy to extend or style: Built with CSS custom properties, ready for customization

---

View the source, install, or contribute!

• NPM: accessible-astro-launcher
• Source: github.com/incluud/accessible-astro-launcher
• Documentation: accessible-astro.incluud.dev
• Demo site source: Accessible Astro Starter (this site)

Get Started

Install the launcher in your own Astro project:

npm install accessible-astro-launcher
# or
yarn add accessible-astro-launcher
# or
pnpm add accessible-astro-launcher

Add it to your layout or page:

---
import {
  Launcher,
  LauncherTrigger,
  LauncherList,
  LauncherGroup,
  LauncherItem,
} from 'accessible-astro-launcher'
---

<LauncherTrigger launcherId="site-launcher" />

<Launcher id="site-launcher">
  <LauncherList>
    <LauncherGroup label="Preferences">
      <LauncherItem type="action" onAction="toggle-dark-mode" label="Dark mode" />
    </LauncherGroup>
    <LauncherGroup label="Navigation">
      <LauncherItem type="navigation" href="/" label="Home" />
      <LauncherItem type="navigation" href="/about" label="About" />
    </LauncherGroup>
  </LauncherList>
</Launcher>

---

Accessible Astro ecosystem

Accessible Astro Launcher is part of a growing family of projects promoting inclusive web development:

• Accessible Astro Starter: Fully accessible Astro project starter.
• Accessible Astro Components: Reusable accessible component library.
• Accessible Astro Dashboard: Accessible dashboard interface with login.
• Accessible Astro Docs: Documentation and guides.
• Color Contrast Checker: WCAG-compliant contrast checker & design tokens.

See the roadmap for what's coming next!

Contributing

We welcome feedback and contributions, especially about accessibility and user experience! 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 maintain and develop accessibility-focused tools for Astro. Consider sponsoring:

---

Together we make a difference

Thanks to all contributors and supporters who help make web accessibility a reality:

• Astro team – for a brilliant static site generator and accessible web vision
• Our contributors – your ideas, code, and feedback
• Niek Derksen – for independent accessibility audits
• Our sponsors – for sustaining community work
• Web advocates & you – for prioritizing inclusion

Every bug report, test, suggestion, or sponsorship drives us forward. ✨

Accessibility is not a feature—it's a human right. Thank you for supporting a better web!