DOCSEARCHbyAlgolia
Submit Docs

Accessible Astro Dashboard

repository·main·Indexed 42 days ago

https://github.com/incluud/accessible-astro-dashboard

A WCAG-compliant admin interface template built with Astro version 1.1.4. It features accessible components including a keyboard-navigable sidebar, skip links, a dark mode toggle, and a login form, along with accessibility utilities for screen readers and reduced motion.

Tokens
501
Snippets
1
Records
2
Agent score
3%

What's inside Accessible Astro Dashboard

  1. Overview of Accessible Astro Dashboard features

    main

    The Accessible Astro Dashboard is a WCAG-compliant admin interface template built with Astro. It includes several built-in accessibility features and components:

    Core Components

    • Navigation.astro: A keyboard-accessible sidebar (desktop) that switches to mobile navigation on smaller viewports. Supports arrow keys and the Escape key. User menu width preference is persisted via localStorage.
    • SkipLinks.astro: Provides links to skip directly to the main menu or main content.
    • DarkMode.astro: An accessible toggle for dark/light mode that persists user preference in localStorage.
    • ResponsiveToggle.astro: An accessible button for controlling mobile navigation.
    • LoginForm.astro: An accessible login form with built-in form controls.
    • DashboardWidget.astro: A component designed for dashboard metrics/widgets.
    • Pagination.astro: Component for paginating results.
    • Media.astro: Component for handling images.
    • EmptyState.astro: Component for displaying pages with no data.

    Accessibility Utilities

    • .sr-only: A utility class for content that should only be visible to screen readers.
    • prefers-reduced-motion: Automatically disables animations if the user has this preference enabled in their OS.
    • Outline Focus Indicators: High-visibility focus indicators that work on both dark and light backgrounds.

    Preinstalled Packages

    • Accessible Astro Components: Provides extra components like Accordions, Modals, and Notifications.
    • Astro Icon: For integrating icons throughout the dashboard.

  2. Get started with Accessible Astro Dashboard

    main

    To use this dashboard template, clone the repository locally and use the following commands to manage your development environment:

    • npm install: Installs all necessary dependencies.
    • npm run dev: Starts a local development server at localhost:4321.
    • npm run build: Builds your production-ready site into the ./dist/ directory.
    • npm run preview: Locally previews your production build before deployment.
    npm install
npm run dev