Skip to content
Accessible Astro Documentation

Overview

Introduction

The Accessible Astro Components is a collection of accessible components built for Astro. Each component follows WAI-ARIA guidelines and best practices for accessibility. All components are build using the light-dark() function to ensure they are accessible in both light and dark mode.

Installation

Terminal window
npm install accessible-astro-components

Available Components

  • Accordion: Expandable/collapsible sections for progressive disclosure
  • 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 and video components
  • Modal: Accessible dialog windows
  • Notification: Toast and alert messages
  • Pagination: Navigation for paginated content
  • SkipLinks: Keyboard navigation aid for screen readers
  • Tabs: Content organization with tabbed interfaces

Each component is documented individually with its props, usage examples, and accessibility features.